Lesson 2.1: Color Theory - Color Anatomy

One of the first things you notice when you load a web page (whether you realize it or not) is the colors of the website. Not only do different colors go well together, different colors also evoke different emotions.

What is Color Theory?

Color theory is a guide for combining different colors and the impact that they have. Basically, it’s a guide for helping you decide what colors to use and what colors not to use together.

In color theory we concern ourselves with what colors work well with others, and also what kind of emotions those colors may evoke and try to get the emotions to be in-line with the overall impression we are trying to make.

Basic Colors

In visual arts there are three primary colors: red, blue, and yellow. These colors are known as primary colors. If you mix these 3 colors together, with different amounts of the shade colors black and white, you can get any possible color. Also, no mixture of colors can make these primary colors. You may get close, but you can’t get the primary colors.

When you mix any two of these colors together, you get the secondary colors: red and blue make purple, blue and yellow make green, yellow and red make orange. These three are the secondary colors.

When you mix any secondary color with one of it’s parent colors, you get a tertiary color: blue and green make blue-green, yellow and green make yellow-green, blue and purple make blue-purple, and so on (they weren’t very creative with these color names).

You will sometimes see these colors as Cyan-Magenta-Yellow-Key (Black). This is the “color space” for printing (it’s the colors they put in the ink cartridge). It is similar, but it isn’t exactly the Red-Blue-Yellow color wheel we are discussing.

These colors can be placed in a circle, commonly called a “color wheel”. Below is a color wheel:

This system is known as a subtractive color wheel. It is known as subtractive because as you mix materials (such as paint) together, the color gets darker, so you are subtracting color.

If you notice there are lines going across to the color on the opposite side of the wheel. Two opposite colors are known as complementary colors. In theory, these colors look good together (they complement each other). In theory, when you mix any two exact complementary colors you get brown or gray, though this is rarely the case (since it’s very difficult to get exact complements in real life).

These complements help you in beginning to choose your colors. Be aware though that exact complements are usually not that good together. We’ll talk more about this later.

On computers, we have an additive color system, because instead of mixing pigments we are mixing light. In this system, our primary colors are red, green, and blue. We then get slightly different secondary colors: red and green is yellow, red and blue is fushia, blue and green are aqua. Here is a RGB color wheel:

If you notice, when these complements are mixed (the middle point on the wheel), the color becomes a nice smooth gray. If you mix all colors of light together, you get white (which is why light is normally white, because it has all of the colors in it).

Anatomy of Colors

So, we have a whole bunch of colors. In fact, we have millions of colors. On a computer, we can currently represent about 16 million colors on a monitor. In real life, there are theoretically an infinite number of colors (since if you break light down into smaller and smaller pieces, each minute change is a different color). This means we need some ways to talk about color. We have a bunch of terms that we can use.

The brightness, or luminacity, of a color is the brightness of the color. The closer to white, the higher the brightness. The closer to black, the lower the brightness. Below is an image who’s brightness starts at the lowest point (black) and extends to the highest point (white). Notice that each little slice is actually a different shade of a color with the same hue and saturation:

The hue is the color itself. A color is either a blue, a red, a yellow, and so on. If you change the hue, the actually color itself changes.

The saturation is how much of that color is actually in the color. A color with high saturation will be a deeper color (not necessarily darker. Just think “more” like the color it is) where as a color with a lower saturation is a more muted and toned down the color is. If you have no saturation, you are dealing with gray colors.

Speaking of gray, a color at any hue with no saturation is a gray. The higher brightness, the lighter and more white the gray is. The lower the brightness, the darker and more black the gray is. Black and white, as well as any other shade of gray, is known as a “shade”, not actually a color because grays can actually be any color because of this reason.

There are actuallly numerous other terms that are used to talk about color, but if you know hue, brightness, and saturation you can talk about colors pretty well, and it’s enough to help us determine the colors we’ll use.

---

In this lesson we discussed individual colors and what makes them up. In our next lesson we’ll talk about putting those colors together: Lesson 2.2: Color Theory - Color Schemes