Web Site Cookbook: Solutions & Examples for Building and Administering Your Web Site (Cookbooks (OReilly))

Problem

You need to select colors for your site's background, text, links, and other elements.

Solution

Choosing a color scheme for a site might be the most subjective task confronting a web designer. Of the nearly infinite number of color combinations at your disposal, there are certainly more than a few right ones for your site, as well as many wrong ones.

Choosing the right colors can have a big impact on how your site is received by visitors, while the wrong combination can just as easily repel them. But differentiating right from wrong has less to do with opting for, say, a shade of light purple over a shade of light green, than it has to do with choosing a palette of colors that supports your design and the goals of your site.

With that in mind, follow this checklist when developing a color scheme for your site:

Follow the lead of the materials you already have.

Your favorite color may be flaming red-orange, but you'll have to hide your light under a bushel if your project already has an existing logo or offline material that employs an orange-free color scheme. Using a web design project to branch out visually from an established color scheme will cause credibility issues for your site. Don't shock visitors with a color scheme that bears no resemblance to the other "touch points" by which they know yoube it your catalog, your packaging, your delivery vehicles, the neon sign in your store front window, or something else.

Use a background color that does not weaken text legibility.

White wins the contest for most popular background color because usability studies have shown that white provides the best background on which to read web site content. Choosing to use black or dark text over a white background doesn't preclude the use of other colors in design elements such as borders, navigation bars, and display copy. But it does lower the level of difficulty associated with devising a complementary color scheme that doesn't sacrifice readability.

On the other hand, a non-white background offers a canvas on which to design a distinctive and visually compelling site. The hue-saturation-brightness interface to your favorite color picker is a good place to find complementary pairs of colors. Pairs of background and text colors that vary only in brightness will naturally enhance one another, while preserving readability.

Always specify colors for text and links.

To prevent a browser's default color values from clashing with your color scheme, start your stylesheet with rules for the text and link colors, as well as the background color:

body { background-color: #FFFFFF; color: #000000; } a:link { color: #0000FF; } a:visited { color: #333333; }

Choose and use colors that help highlight information.

A guiding tenet of graphic design asserts that a good design works equally well with color and without. In other words, you shouldn't rely on color to validate design decisions about type sizes and layout. The color red can make a smallish headline stand out, but that headline should probably be bigger regardless of its color. However, a web site that uses color effectively obviously has an advantage over a "colorless" web site or a site that uses color indiscriminately. That's because color accentuates the context of your web site content. Bright, strong colors help visitors focus on the most important parts of your site, but if everything is strongly colored, then nothing stands out.

Discussion

Creating a color scheme requires some familiarity with how colors relate to one another, practice, and a bit of experimentation. By learning a few tricks, you'll be able to whip up beautiful, professional color schemes at a moment's notice. Don't rely on small swatches to make your color decisions, though. Mock up some text on a sample web page and take your color choices for a test drive.

First, use a color wheel or color picker, such as the one in Photoshop, to experiment. A color wheel displays the red-to-violet rainbow of colors wrapped back on itself in a circle. Points on the circle identify colors that harmonize with each other (see Figure 3-3). Analogous colors, like blue and teal, lie next to each other on the wheel and can work together in a low-contrast, understated scheme. Complementary colors at opposite sides of the wheelsuch as purple and greencombine in more dramatic schemes. Even richer color combinations can be found by combining color triads from three points of a equilateral triangle on the wheel. If you don't know where to start on the color wheel, take a favorite image (or the site's logo), optimize it as a JPEG or GIF, and zoom in on it until you can see individual pixels. Adjacent pixels are usually complementary colors.

When you've exercised on the color wheel long enough, step away from your computer and pay attention to your surroundings. Mother Nature is the supreme color expert. A walk in the outdoors can reveal surprisingly obvious color combinations that work well on a web site, too. Everyday objects also can be a source of inspiration. Keep a clipping file of color schemes you find attractive, whether it's a cereal box or conversion van artwork. Take note of how the notable color schemes you collect complement their subject and affect your emotions.

See Also

Other design considerations are covered in Recipes 3.1 and 4.3.

There are several addictive point-and-click online tools for mixing and matching colors from a color wheel, including the Webmaster's Color Laboratory (http://www.visibone.com/colorlab/), ColorWhore (http://www.colorwhore.com/), and the Color schemes generator 2 (http://wellstyled.com/tools/colorscheme2/index-en.html).