Lesson 2.2: Color Theory – Color Schemes

In our last lesson we took a look at what makes up a single color. In this lesson, we’ll take a look at putting these colors together to make up color schemes.

What are Color Schemes?

Colors schemes are simply collections of colors which are aesthetically pleasing. You’ve probably heard the term color scheme before, possibly referring to the color scheme of a room in someone’s house, or even a color scheme of some clothing someone is wearing. The same term applies with websites as well.

Types of Color Schemes

There are a number of different color schemes, each having to do with what types of colors you choose. Let’s discuss a few of them:

Monochrome

Mono means one, and chrome refers to color, so monochrome basically means “one color”. This doesn’t mean that you just use one color… that’s be exceptionally dull. A monochrome color scheme means using different shades of a single color. So, say you pick a blue color. The other colors you would use would be using that same blue, with differing brightnesses.

An example blue monochrome color scheme.

These schemes are difficult to utilize properly. They easily become very dull and boring, with no real excitement. That isn’t to say there aren’t many great monochrome color schemes, it’s just they are difficult to use well.

Polychrome

Polychrome means “many colors”. Pretty much any scheme that isn’t monochrome can be considered polychrome. There are many different types of polychrome schemes as well. They basically just depend on how many colors you choose, and where you get those colors from.

A complementary color scheme basically involves using your base color and it’s complementary color as the basis for the scheme, with other colors being different shades of those two colors.

A triad color scheme basically involves using your base color, and then the colors that are 120-degrees in either direction from the color on the color wheel (basically, making a triangle on the color wheel). Red, yellow, and blue would be an example of a triad color scheme.

A quad color scheme basically involves using your base color, and then the complementary color and then the complements 90 degrees from those (making a square on the color wheel).

And so it goes, you get the idea. After about quad, you don’t really want to use any more colors than that.

Practical Color Schemes

So, we talked about all these color schemes. They seem pretty inflexible, and actually, rarely do the perfect examples work well. For example, a red, yellow, blue color scheme doesn’t usually look that great if you use the exact shades. However, if you tweak the shades a bit they can start looking pretty nice.

Also, on a website we have certain things we want to show. On nearly any website, one of the primary things shown is text. In nearly any color scheme you’ll always want to have a really dark color and a really light color. Black and white can do the trick, but they can sometimes be a bit harsh, especially in large blocks on bright monitors.

Instead, you can choose a bit of a step down, using a really dark gray and a really light gray. When used, the user probably won’t be able to tell the difference, but there will be less straight on their eyes. We’ll do a little example. Here is an example page with a white background and black text and a light gray backgrond and dark gray text. You may not notice much of a difference, but the second one is a bit “softer” to look at.

So, our really light and really dark color are the first two colors in our scheme. Next, we want to pick our base color. This varies a lot on the topic, personal preferences, and sheer randomness. You can also use a bit of color psychology in picking your colors if you want. We’ll talk a bit about these in our next lesson.

Let’s say, for the sake of argument that we’re going to use blue as our base color. We play around and we pick the exact shade of blue that we want to use. That’s our third color.

We decide we don’t want to use a monotone scheme, so we’ll need more colors. Let’s say we want to have three main colors. We look at the colors 120-degrees away from blue and we see that it’s a shade of red and a shade of yellow. However, we don’t like these exact shades. We play with them and we decide to go with a darker yellow and a more purple red. This gives us 5 colors.

These will be the main colors that we’ll use. We need one last main color, a color that “pops”. We’ll use this color for giving emphasis to different things, and for links and what not. We picked a darker blue for our base color, so we’ll pick a bright blue for our pop color. We don’t want a “lighter” blue (a blue with a lighter brightness). We actually increase the saturation and brightness to get a brighter blue.

An example color scheme.

Not bad. Now it’s all up to how we use these colors that can either make or break the colors we’ve chosen.

Sum Up

So, we’ve talked about some color schemes and some specifics of what they make up. However, coming up with color schemes isn’t an exact science and requires lots of trial, error, and experimentation.

Also, we want to have a couple of important colors. We need our really dark and really light color, our base color or colors, and our “pop” color.

To round out our discussion of color theory, we’ll talk about color psychology in our next lesson.