Export (0) Print
Expand All
Expand Minimize

Wheel of Color

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.

Robert Hess
Microsoft Corporation

August 14, 2000

Contents

Color Basics
Pump up the Contrast

Last month, I provided some introductory information about using color and images on Web sites. The column dealt with some of the preliminary technical aspects of page coding, differences between .jpg and .gif formats, and other topics in which a "programmer" might be well versed, but topics to which a graphic artist might feel a tad unaccustomed, as graphic artists are used to having full control over the color and design aspects of their work. 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.


Bb263947.hess0800-1(en-us,VS.85).gif

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.


Bb263947.hess0800-2(en-us,VS.85).gif

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

Bb263947.hess0800-3(en-us,VS.85).gif

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:

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

Bb263947.hess0800-4(en-us,VS.85).gif

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

Bb263947.hess0800-5(en-us,VS.85).gif

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

Bb263947.hess0800-6(en-us,VS.85).gif

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

Bb263947.hess0800-7(en-us,VS.85).gif

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

Bb263947.hess0800-8(en-us,VS.85).gif

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

Bb263947.hess0800-9(en-us,VS.85).gif

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

Bb263947.hess0800-10(en-us,VS.85).gif

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

Bb263947.hess0800-11(en-us,VS.85).gif

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

Contrast is the perceived difference between two adjacent colors. Because white and black are not really colors, they are said to represent achromatic contrast. Black and white also represent the highest level of contrast. Complementary colors from the color wheel represent high chromatic contrast. The human eye is more sensitive to achromatic contrast than it is to chromatic contrast, which is why the .jpg compression algorithm will drop color information before it drops black and white information from an image as you increase the compression factor.


Bb263947.hess0800-12(en-us,VS.85).gif

Figure 12. White to black: achromatic contrast ramp


Bb263947.hess0800-13(en-us,VS.85).gif

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.


Bb263947.hess0800-14(en-us,VS.85).gif

Figure 14. High-contrast color combinations

The same sort of effect happens with warm and cool colors. The warm colors are perceived as advancing out of the screen slightly, and the cool colors recede. This means that a warm/dark color is best for text, while a cool/light color works best for the background. However, this approach isn't quite cut and dried. Let's take a look at a simple example in which we select two contrasting colors, using one for the background and the other for the text.


Bb263947.hess0800-15(en-us,VS.85).gif

Figure 15. Complementary color combinations

You'll notice that the results are pretty bad. These two colors don't just contrast with each other, they almost appear to be duking it out. Definitely not a good combination. Let's keep the colors basically the same, and adjust the lightness/darkness of them to move them even further apart.


Bb263947.hess0800-16(en-us,VS.85).gif

Figure 16. Modified color combinations

You can see that this is a much better combination, and it illustrates the importance of thinking about contrast not only in an analytical sense, but from a visual standpoint as well.

Such use of color and contrast is perhaps the most important in superimposing text on background images. Using these notions of contrast, you need to remember that the text component of your page must contrast strongly enough with all of the colors in the background image. For example, if you simply use a set of the triad colors described above, you will have three distinctly contrasting colors fighting for the page.


Bb263947.hess0800-17(en-us,VS.85).gif

Figure 17. Triad color combination; text over a background image

A better approach is to use a set of split complementary colors, with the analogous colors for the background, and the complementary color for the text. This way, the background colors will blend together properly without calling overt attention to themselves, and the text will stand out.


Bb263947.hess0800-18(en-us,VS.85).gif

Figure 18. Split complementary color combination; text over a background image

Understanding color theory also comes into play as you select a color theme for your site. Depending on your needs for background colors, navigational elements, and different text styles, you can select patterns of contrast from the color wheel. Then, using something like my Safety Palette Chart, you can easily select darker/lighter colors to increase the contrast between your elements to an appropriate level. There are lots of combinations that will work well for your pages—providing an exciting use of color without giving your users a headache. So put those aspirin away and spend just a little more time thinking about how you use colors on your Web sites. For a look at some of the possible options, view this dynamic sample.

Robert Hess hosts the MSDN Show.


  
Show:
© 2014 Microsoft