programming & design

Wheel of Color

Robert Hess

For this article, I'm going to flip the tables a bit and discuss aspects of color that graphic artists can recite in their sleep, but that the programmers may need a little refresher on. In fact, I see a lot of sites that use these principles incorrectly, so I know there are a lot of programmers out there who need a better understanding of these concepts.

While my primary goal with this article is to discuss some of the specifics of the interaction of one color with another, I need to get some preliminaries out of the way so that we are all coming from the same space.

Color Basics

We know that what we consider "visible" light can be broken down into a spectrum that ranges from blue to red in a progressive rainbow.

Figure 1. The visible spectrum of light

We have also seen, and perhaps used, a color wheel, which shows how to arrive at a particular color by mixing two or more other colors together. The color wheel is essentially the linear progression of color as seen in the color spectrum, connecting the two ends together so that red connects up with purple on the other end.

Figure 2. The color wheel

A color wheel usually includes 12 distinct colors, as shown here. While important aspects of the color wheel and color theory are well known to artists, they might not be fully appreciated by the programmers among us, and that lack of understanding can lead them to make a mess of things.

Primary Colors

Figure 3. The primary colors

By definition, the primary colors are the root colors that you can combine in some prescribed amounts to arrive at any other color. To identify the primary colors, you first need to clarify exactly which color medium you are using. In elementary school, you may have learned that the primary colors are red, yellow, and blue. However, most of us now use color displays, for which the primary colors will be red, green, and blue. No surprises there, I hope.

But if you have an ink-jet color printer, take a moment to open the lid and look at the cartridges. Do you see red/green/blue? Nope. You probably see four ink supplies: cyan, magenta, yellow, and black. The colors are different because a computer monitor uses additive color, while your printer uses subtractive color. The monitor emits colored light, while the ink on the paper absorbs color from the light it reflects. Any further discussion about this is beyond the scope of what I want to accomplish with this article, but if you are looking for a little more reading, here are a couple of links to check out:

• Additive Color Synthesis, by Jim Scruggs
• Subtractive Color Synthesis, by Jim Scruggs

Aside from the difference between emitting and absorbing light, the concepts discussed in this article apply to both the additive and subtractive models-but for our purposes, we will focus on the additive model, where the primary colors are red, green, and blue.

Secondary Colors

Figure 4. The secondary colors

To build out our color wheel, we next want to identify the three colors that are obtained by combining any two adjacent primary colors. These will be our secondary colors: cyan, magenta, and yellow. Oops! Haven't we already talked about these colors? Yes, the secondary colors of the additive world are the same as the primary colors of the subtractive world. As you might conclude from that, the secondary colors of the subtractive world are the primary colors of the additive world. It's all part of the interrelationship between additive and subtractive color modeling.

Tertiary Colors

Figure 5. The tertiary colors

The final step in building up our color wheel is to once again find the middle colors between the colors currently filled in on our wheel. Fortunately, these tertiary colors are the same for both the additive and subtractive worlds. Now that we have defined the colors we will use for our 12-point color wheel, we can discuss the colors' relationships to each other.

Analogous Colors

Figure 6. Analogous colors

These are any colors directly beside a given color. If you start with orange and you want its two analogous colors, you select red and yellow. A color scheme that uses analogous colors provides a harmony and blending of the colors, similar to what might be found in nature.

Complementary Colors

Figure 7. Complementary colors

Also known as contrasting colors, complementary colors are directly opposite each other on the color wheel. Selecting contrasting colors is useful when you want to make the colors stand out more vibrantly. If you are composing a picture of lemons, using a blue background will make the lemons stand out more.

Split Complementary Colors

Figure 8. Split complementary colors

Split complementary colors can be made up of two or three colors. You select a color, find its complementary color on the other side of the color wheel, then use the color or colors on each side of that complementary color.

Triad Colors

Figure 9. Triad colors

These are any three colors that are equidistant on the color wheel. When triad colors are used in a color scheme, they present a tension to the viewer, because all three colors contrast. The primary and secondary color sets are both triads.

Warm Colors

Figure 10. Warm colors

Warm colors are made up of the red hues, such as red, orange, and yellow. They lend a sense of warmth, comfort, and energy to the color selection. They also produce a visual result that causes these colors to appear to move toward the viewer, and to stand out from the page.

Cool Colors

Figure 11. Cool colors

Cool colors come from the blue hues, such as blue, cyan, and green. These colors will stabilize and cool the color scheme. They will also appear to recede from the viewer, so they are good to use for page backgrounds.

It is important to note that you might find these color groups called different things in different books-but if you understand the basic principles, they will all make sense to you.

This finally brings me to the main concept I want to discuss, which is contrast.

Pump up the Contrast

Figure 12. White to black: achromatic contrast ramp

Figure 13. Monochromatic contrast ramp using blue

A monochromatic contrast is set up when you use a single color, then increase or decrease its lightness.

Contrast is extremely important in Web design. And there are many different ways to use it, all of them based on the other color concepts listed above. It is clear to everybody that black text on a white background is extremely easy to see, which is part of the reason why most of the printed material you read is black text on a white background. Likewise, white on black produces high contrast, but it is more difficult to read because black is perceived as being heavier than white and, thus, squeezes it out a little.