Choosing colors for your Web site

Color is tied directly to your site's identity. If your colors and identity clash, the content is lost. Think of how jarring it would be if you visited CNN.com and suddenly found the site ablaze in vibrant yellows and greens. The colors -- as happy as they might be -- would distract you from the content.

So how do you pick the right colors? A good place to start is to go with your gut reaction. What colors appeal to you? What colors seem appropriate for your topic? Take a look at sites that are similar to yours and see which colors they use. You don't want your site to look exactly like theirs, but you can get a sense of what works.

If you're the academic sort, you can dig into the symbolism of color. Colors and feelings swirl together, so it's helpful to know the emotions your site palette will elicit.

Usability can also help in your decision. High contrast colors -- such as black text on a white background -- are easiest to read. Low contrast is often illegible (see below).

Hard to read, eh?

Ultimately, your color decisions may be defined by technology. The wide variety of monitors and Web browsers makes it hard to guarantee that the colors you place on your pages are the colors your visitors will see. The only way be sure is to use colors from the Web-safe color palette.

The Web-safe palette only has 216 colors. The full story behind this limited number is long and involves a lot of math, but the important thing to know is that the palette was created during a time when most people were using monitors and operating systems that could only handle 256 colors. The color discrepancies between Macintosh and Windows further depleted the palette to the point where only 216 colors could be counted on to appear the same way on all operating systems and browsers.

Now, you don't have to use colors from the Web-safe palette. Modern hardware and software are capable of handling millions of colors, so most of the time your color picks will display reasonably well. But if you absolutely want to guarantee that what you see is what you get, let the palette be your guide.

Related links

Name	Type	Notes
Introduction to Color	Tutorial	WebDesignClinic provides a comprehensive, easy-to-read primer on color theory.
Using Colour on the Web	Tutorial	Independent publisher Craig Saila offers quick color tips.
Color Symbolism	Resource	Discover the link between specific colors and emotions with this chart from About.com.
Color, Contrast & Dimension in News Design	Tutorial	Interact with different color models and learn about the process of choosing color schemes through this tutorial from the Poynter Institute (Flash required).
Color Codes Cheat Sheet	Resource	Adding colors to HTML documents often requires the use of hexadecimal codes. This Webmonkey chart links colors with their codes.
Death of the Websafe Color Palette?	Article	A study by Webmonkey on the viability of the 216-color Web palette. Their findings aren't what you'd expect.
Visibone Color Lab	Resource	Pick colors with this Web-based tool.
Got a recommendation? Send it to: editor@theindependentpublisher.com.