olor is one of your best tools?and one that needs to be used thoughtfully. Just because color is “free” doesn’t mean you should randomly throw it around. Color has a lot of meaning attached to it?and you can easily find yourself “saying” things you really don’t mean.

A good principle is to design a layout that works in black and white, then add color sparingly to reinforce the message or to communicate ideas and concepts, or to set an overall mood and tone.

Navigation. Use a splash of color to highlight a navigation choice?for example, making an onhover effect that turns a menu option gold when the reader puts his or her cursor atop of it. (If you are using a CSS1-compliant browser, when you mouse on the example to your right, you’ll see that the option turns yellow and is underlined.)	Breakfast Menu Lunch Menu Dinner Menu
Wayfinding. Color can help the wayfinding message?for example, the current path into the site might be charted in red across the top of the screen. Or the currently-selected section might appear in lime green in the navigation bar. Color can help you mark the idea that “you are here” in the reader’s mental map.
Legibility. Use of background and foreground color can enhance the readability of your text. For example, we find creating a slightly lower amount of contrast by using an off-white background improves readability over a bright white background.	Once upon a time there was a hungry lizard. He was an Iguana so he ate vegetables for breakfast, lunch, and dinner. Once upon a time there was a hungry lizard. He was an Iguana so he ate vegetables for breakfast, lunch, and dinner.
Tone, Mood, and Implied Meaning.Color has many psychological and cultural meanings and the most common use of color is to set mood and tone. When we use a specific color, we tap into those layers of understanding. Color can also be attached to a company or an image?when you read the words “Big Blue” a certain color and company pop into your mind. Which of the color combinations to the right impart extra meaning?	Happy Halloween! Happy Halloween! Our New Baby Boy… Our New Baby Boy… Spring Is Here Spring Is Here

Color Perception
Our eyes translate colors in surprising ways. Most people share three common effects, demonstrated in this section.

Simultaneous contrast describes the way a color object seems to change size and intensity based on the colors nearby.

Chromatic induction describes the way adjacent colors alter the way the color itself is perceived.

Afterimage describes the way high contrast colors make you “see” their complementary colors after looking away.

Simultaneous Contrast
The same color can appear very different depending on its surroundings.

Because we cannot look at colors as isolated instances, the appearance of any color is affected by what surrounds it. Simultaneous contrast is the term that describes the effect.

For example, color areas tend to look darker and smaller against light backgrounds… and the exact same color area will appear lighter and larger against dark backgrounds.

The squares above are the same except for their background colors. Notice how the squares look darker and smaller against white, and lighter and larger against black.

This is also true for type. The letters of the black type seem thinner than the white type.

Chromatic Induction
The actual color of a color may appear to change based on its surrounding colors.

Surrounding colors can influence the way you see a color. They can give the color the appearance of being tinged with the complementary hue of the surrounding area. Colors that are the same may appear to be different, and colors that are different may appear the same. The effect is called chromatic induction.

The small green squares are the same color. Hold your hand to the screen and block out the adjacent blocks, showing only the two green square, and you’ll see how dramatic the chromatic induction effect is.

These two brown shades are different colors?yet the square blocks appear to be the same shade of brown. It is only when your eye follows the line down that you see how different the shades are. Cover the bottom part of the illustration with your hand and look only at the brown boxes to see the way the chromatic induction effect impacts the way you see color.

While this can enrich the possibilities from the designers point of view, it can also cause the viewer to see colors differently from the way the designer intended them to be seen. What happens when that green logo is placed on a black page? On a yellow page? On a gray page?

Either avoid unwanted color perception by using a neutral gray background or be aware of the effect as you design and think about how elements will be placed in relation to each other and to different backgrounds.

After-image
Strong colors stay in your perception after you look away.

Areas of strong color and high contrast can produce ongoing images when the viewer looks away. The color of the afterimage is the screen color’s complementary tones?remember how those green monitors had you seeing bright pink images after you’d been working on them for hours? This effect is called after-image.

After-image results from strong colors and high contrast. Strong/high combos also result in visual stress with prolonged viewing. Consider this effect on your readers eyes as you make color selections.

Stare at this red square for a full minute and then, keeping your eyes open, look away at a white wall. You will see an afterimage of a turquoise-greenish square. The after-image lasts for 5 or 10 seconds, depending on your eyes.

Color Temperature
From “warm” to “cool”, the temperature of a color effects the way your site is perceived.

All hues fall into two groups based on their perceived color temperature, or their associations with coolness or warmth from our world.

“Cool” colors are blue, aqua, and violet?water and air elements. “Warm” colors are yellow, orange, red, and brown?earth and fire elements. Warm and cool color theory states that warm colors tend to pop forward, cool colors tend to recede.

Warm color on a cool background	Cool color on a warm background

Achromatic colors?that is, white, gray, and black?may become warm or cool when they have a slight hint of a chromatic color.

Warm black (reddish tint)	Cool black (bluish tint)
Note: The capabilities of your monitor will determine whether these colors appear the same or different.

The colors you choose can affect the mood, tone and message of your Web site. Which of the following lines makes you sit up and take notice?

Which of these two is more calm and peaceful and better matches the message?

Experiment with warm and cool colors until you achieve the look you want.

The computer monitor on which your page is viewed can effect the perceived temperature of colors. By adjusting the “white point” setting for the monitor, the entire display can appear warmer or cooler; lower value setting are warmer while higher ones produce a cooler effect.

White point = D50	White point = 6500	White point = 9300

Color Symbolism
Color packs a lot of non-verbal communication?the addition of a color can subtly change the meaning of a design element and how it is perceived.

Color is a powerful design element that draws attention to the layout. Because color is also a powerful communicator of nonverbal information it can either work for or against the content.

As you design your page, consider the symbolism of color as seriously as the contrast and harmony of colors on the page. Many colors have qualities associated with them because of their natural occurrence or cultural usage. For example:

Make sure you give color selections careful consideration and don’t just rely on personal preference(hey, not every one might respond as you do to your favorite bright orange and lime green!) or trends (is it really appropriate for every corporate logo to be blue and green or does that just mark is as turn-of-century design?).

Cultural Symbolism
Color packs a lot of non-verbal communication?but don’t make too many assumptions. Much of the symbolism is loaded with cultural interpretations?and your pure white dove could be seen as a white dove of death!

Some common associations of color in United States culture are:

The color needs to match the message and image and it needs to translate into all the cultures that will be using the site. If the color’s associations contradict the content, the Web site may communicate in unintended ways. If you think cultural differences aren’t a big deal, just remember that Chevy sold very few Novas in Spanish speaking counties (no va means “no go”?quite an unintended message!) The use of color is full of symbolism?if you are designing a site for multiple cultures, be extra careful of your color choices.

For example, white carnations signify death in Japan and green hats mean a man’s wife is cheating on him in China. Maybe a green hat with a white carnation in the brim isn’t such a good color choice for your company’s product logo! Make sure you go beyond your self-contained experiences (whichever culture you belong to) and understand color from a global perspective.

Color Contrast
The human eye requires contrasts for visibility and legibility. Contrast creates visual interest and helps deliver accurate information.

Colors that are close in value tend to blur together, and their borders “melt.” For example, black text on a dark blue background is hard to read. When the color value is too close between text and background colors, it can create legibility problems.

To identify close color values, squint at the chart below. The letters that disappear into the background have color values similar to the background.

When you are putting together different elements, you want to be sure they have a contrasting color value unless you want the elements to just blur together. This is especially important when you want readable text on a colored background.

Colors of contrasting values stand out from each other. On a blue background yellow jumps out at the reader. When the color value has enough contrast compared to the background it is easy to read?but too much contrast or the use of complementary colors is taking the idea of contrast too far. Colors will appear to “vibrate” and will create legibility problems and give your poor reader a headache.

To help identify contrasting color values, squint at the chart above. Notice the letters that are clearly readable against the background. This “squint test” is a great way to determine contrasting color values.

Remember the simultaneous contrast effect! When colors are applied against each other, their appearance can change. Don’t just pick a text color without looking at it against the planned background color. And expect to do some visual experimenting before you find the right combination of colors.

Picking the Right Colors
Debates over color can quickly take on a religious edge. The “right” color set is the one that relays the information and tone your site requires for its targeted readers.

You can select colors on a number of factors: for their emotional appeal, their implied meaning, their match to your printed brochure, or because you (or your client!) like the color yellow.

Whichever specific colors you select, you can create harmony in a design by using a limited group, or palette, or colors that look pleasing in combination. If you aren’t sure where to begin, try starting with a small number of colors that have a specific relationship to each other on a color circle?triad colors, for example.

Hues can be varied in saturation and value to produce the desired palette. Typically, a color palette contains contrast, between light and dark and between saturated and unsaturated colors. If the colors are of similar value, the overall effect will be bland. Here’s some sample palettes:

Color can be used for both associating elements in the design through common color, or differentiating elements with dissimilar colors. Use bright highly saturated colors to grab attention, but not for prolonged viewing:

The colors you choose can affect the mood, tone and message of your web site. Use for a calm, serious effect, or warm colors for an energetic, exciting look:

Colors can be selected according to theme. A season, a geographical region, or a historical era, so that the palette conveys the desired mood or feel. Examples of thematic palettes can be found in textile and product designs:
Spring colors	Colors reminiscent of Santa Fe

Colors can be selected based on subject matter. Thorough understanding of the subject matter is necessary to avoid using colors that may be confusing or erroneous.
Traffic related colors	Colors of microbiology cell cultures

Use psychological, cultural, or age associations of colors.
Dignified colors	Colors for young children

For a palette to work well in a design, some unifying attribute should tie the colors together. This could be a particular hue or range of saturation (or value) that appears throughout the design, accented by small areas of a contrasting color.

In informational design, distinguish decorative color from functional color. Decorative color enhances the layout by making it more aesthetically appealing, creating a mood, or establishing a style. Functional color conveys information explicitly.

The best choice of colors depends on the site’s intent and the user expectations, as well as the designer’s aesthetic. Use color sparingly, never more than is necessary for the task. Don’t use color that doesn’t support or add to the meaning of the information displayed. And be sure you use color consistently throughout all pages of the Web site.