Using the Three C’s: Complement, Contrast, and Coordination

How do you use color effectively? Effective color usage begins with the three C’s of color management:

- Complementary colors are pleasing to look at.

- Contrasting colors make your elements stand out, not wash out.

- Coordinating colors throughout all the parts of your pages and site make your work look like a whole unit, not several different elements or pages jumbled together.

Planning for color should be one of the first things you do when planning your Web site. By keeping the three C’s in mind, you will be able to create a site that’s inviting, consistent, and memorable.

Choosing complementary colors The World Wide Web is a semi-static medium. The Web is semi-static because you can add motion and other dynamic elements to your Web pages. However, most elements on a Web page are stationary, much like a page you read in a magazine or an image you view on a billboard. See article 13 for more information about adding dynamic page elements. If you’ve read any magazines or seen any billboards on the highway recently, the ads that probably caught your eye (though hopefully not for too long in the billboard case) were the ones that had good complementary color. That is, the colors look like they go well together, so the ad is pleasing to look at.

The same concept of complementary colors also applies to Web pages. If you have colors for your background, graphics, and text that go well together, your page will be not only be more readable, but also more pleasing to look at. The more pleasing your Web page is to look at, the more visitors (and more returning visitors) your page will receive. But what are complementary colors, exactly? To illustrate the principle.

Analogous colors are ones that are right beside one another on the color wheel. Blue and bluegreen, for example, are analogous to one another. In addition to the strictest definition of complementary colors, you can also consider any colors that are analogous to a complementary color as complementary. Complementary colors are those directly opposite each other on the color wheel. For example, orange is complementary to blue. The analogous colors for blue are blue-green and blue-violet, so both of those colors would also work well as complements to orange.

This color model provides basic information about how to use color on your pages, but it does not guarantee that different colors (or the colors in your background and text) will appear correctly. For that to happen, you must have the right color contrast.

Ensuring contrast and visibility

Complementary colors are also called contrast colors because they let the lighter colors stand out more against the darker colors. The most familiar contrasting colors are black and white. Books are printed with black ink on white (or light-colored) pages because that’s easy to read. The same is true for the Web; it’s much easier to see black text on a white background or, for example, on light gray wallpaper that you use as a background graphic. If you try to read white text on a black background, you can’t read the text as well. Black tends to mask the outer boundaries of the white text, and if you see any sites with black backgrounds, the text is usually in boldface to make the text easier to read. Some sites, such as the TrekWeb site (http://www.trekweb.com), use blue fields as the background to make the white text stand out even better. If you have a triad or split complementary color scheme, the same contrast rules apply. For example, a triad color combination that has a background of red and green with blue text makes the text difficult to read. If you change the red to yellow, then the blue text stands out from the green-and-yellow background, so you can read the text more easily.

Coordinating color schemes

Coordination of your Web site’s color schemes goes hand in hand with planning your Web site. (Refer to articles 1 and 4 if you need to brush up on planning your Web site.) Now that you have a firm grounding of how to complement and contrast colors on your site, it’s time to coordinate how those colors will appear on your screen. The audience for whom you are developing the Web site must determine your color schemes. For example, if your site is designed for seniors, then it may be a good idea to have a high-contrast color scheme (such as black text on a white background). If your site is designed for children, then having less contrast and more colors may be the best approach.

Understanding color warmth

If you want your site to be memorable, you must use color to create an emotional impact for your audience. Your visitors will come back to your site and encourage others to visit your site as well. You can manipulate colors by changing their values, thus producing strong, flamboyant colors or softer colors. The color wheel contains so-called warm and cool colors. Warm colors consist of red hues, from yellow to purple. Warm colors exude energy, so they stand out from the cool colors. These warm colors are best used as foreground colors. Cool colors, on the other hand, consist of blue hues, from green to dark blue. Cool colors exude strength and calm. These colors are best used for the background so that the warm colors can stand out and do their work.

Although contrasting warm colors with cool colors is a good general rule, some colors contrast better than others. For example, if you use light blue and orange together, they won’t contrast well because both colors are light. If you change the blue to a dark blue, or if you change the orange to black or brown, the colors will contrast much better, and visitors will have a much easier time viewing your page.