Design with Color

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