RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Design with Color : Page 4

Color is a wonderful tool in the Web design tool box. It can add navigational meaning, understanding, and mood and tone.


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.

Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date