How to Choose Your Web Site Colors

RGB, CMY, intensity, palettes, swatches, hexadecimal, dithering, tint, shade, tone, hue, value, saturation, additive, subtractive, monochromatic, chromaticity, complementary, triadic, analogous... Ughhh, what does it all mean?

I won't candy coat it, color theory is a science and can be difficult to understand. But I have very good news for you. The real work has already been done and the tools are available to make working with colors a breeze.

How do you choose your colors? I'll give you the three step method and four rules in applying them to your web site.

1. LEARN YOUR 216 COLOR WEB-SAFE PALETTE. Most computers are set up to interpret 256 basic colors derived from the primary colors of Red, Yellow & Blue.

Why then do we use a 216 color palette when designing web pages? What happened to the other 40 colors?

The simple answer is that browsers interpret those last 40 colors differently depending on the mac/pc platforms. So it has been accepted that if you want the colors you choose for you web site to appear to everyone exactly as you planned, you will need to us the 216 color web-safe palette.

Now, rather than have a separate name for every color, several digital methods have been created for labeling or giving values to these different colors.

The main two you need to know are the hexadecimal method and the RGB method.

The hexadecimal method labels colors as a series of 6(hex) numbers and letters. For instance, 'black' is represented by the numbers 000000 and 'white' is represented by the letters FFFFFF. Every color in between has it's own combination of letters and numbers.

(Here's a tip for you. The safe colors all have pretty simplistic combinations such as 00FFCC, 99FFFF, FF66FF. When you see a hexadecimal nubmer such as 0G5649, you can rest assured, you are not dealing with a web-safe color.)

The reason you need to know the hexadecimal method is because it is the method that the html language uses to interpret color in your web pages. All the colors in your web page html will be shown by it's hexadecimal value.

The RGB method (Red, Green, Blue) labels colors as a number between 0 and 255 depending on how much of each color (red,green,blue) is included. So a pure blue would have an RGB of 0,0,255. Zero red, Zero Green, 255 or the maximum blue.

RGB is important to know because it is the method by which the browsers interpret colors that are within your graphics.

So let's recap, we have 216 web-safe colors to choose from and we know that there are two common methods by which these colors are interpreted on the web, Hexadecimal in our html pages and RGB for our graphics.

So where is the 216 color web-safe palette? It's right here for your viewing pleasure and lists both the Hexadecimal and RGB methods for each color.

http://www.wordnet.net/imc/palette.htm (this is a large graphic and will take a few seconds to load)

Stick to these colors and you won't have any problems with someone asking you why your sidebar looks green when you know you created it as beige.

This is also a neat little hexadecimal color picker.

http://home.earthlink.net/~westcott/colors.htm

2. LEARN TO COMBINE COLORS USING SWATCHES. Visually, some people do this very well and others don't. It really doesn't matter because there are people who are experts in color and they have done all the work for you by creating swatches of the 216 color web-safe palette.

My definition of a swatch? A series of colors guaranteed to match. How's that for a working definition. Never mind that there are three or four different ways that swatches are created, just choose a swatch that is suitable for you and you are in business.

Here's a sample color pattern that I chose from a swatch based on the color yellow. In this color pattern, all the colors based on primary yellow with either white, gray or black(neutral colors) added to yellow to make various shades.

http://www.wordnet.net/imc/yellowswatch.htm

Swatches can be put together in many different ways, but here is an example of what a standard swatch might look like.

http://www.wordnet.net/imc/standardswatch.htm

You simply choose whatever color combination you want and be assured they will match, whether you pick colors that are very similar such as the yellow swatch shown above or contrasting colors such as the following example.

http://www.wordnet.net/imc/contrast.htm

I strongly suggest that you obtain a graphics program such as fireworks by Macromedia or Photoshop by Adobe.

Both of these programs contain their own swatches and you can easily download swatches from the web and import them into these programs. These programs will also show you the hexadecimal and RGB values of any color, a nice feature.

Fireworks
Photoshop

3. MATCH YOUR COLORS TO THE PERSONALITY AND AUDIENCE. Let us not forget that whatever colors we choose, we should still have in mind our primary audience. What colors appeal to them on an emotional level? Are there any particular colors that are associated with your target audience? Imagine using all blues and greens on a Red Cross web site or blacks and reds for a Greenpeace web site, you'd be out of work fast if you were a designer.

The point is to always keep your audience in mind, even when choosing colors. Going back to our fishing example, I imagine most fishermen are going to enjoy the medium greens, blues, tans and browns of the outdoors.

Now let's apply our colors to the web page. Here are four rules to keep in mind when adding your colors. (There are always exceptions to these rules, but they apply for most non-artistic sites.)

A. THE LARGER THE GRAPHIC, THE LIGHTER THE COLOR. If you intend to use a large left navigation table, choose a lighter color from your swatch. This does two things.

First, it is easier on your viewer's eyes to see lighter colors(not brighter, but lighter as in shade). This is also why I believe good old white is the best background color for a majority of web sites.

Second, you have more options for colors to use on top of that large graphic area. For example, if you use a black as a major color, either as a background or navigation bar, then you have significantly narrowed your choice of text colors to white, bright yellow or something even more hideous to apply as text because nothing else will be easily visible on the black background.

B. THE SMALLER THE GRAPHIC, THE DARKER THE COLOR. Yes, the exact opposite is true for the smaller graphics. Because they are smaller, the darker the color, the better they will stand out. This is also why you should use dark colors for your text.

C. SOFTER TONES SAVE YOUR VISITOR'S EYES. There are many people who just love bright, flashy colors, but I'll say it flat out, the web is not the place for it. The web is much different in that it is a digital viewing area. Glare from color on a web page is much more pronounced and harsh on the viewer then bright color on a printed page. You can still use aggressive colors such as red, but just use a tone or two down from the true red to save your viewer's vision.

D. THERE IS NO ONE COLOR THAT SELLS BETTER THAN OTHERS. I've heard many different stories of how blue and red web sites sell better than any others or how white text on blue is the most effective for presenting sales copy. In my opinion and my experience this is patently false.

The BEST color for selling is the color that captures your primary audience emotionally. If my audience is new mothers and I'm selling baby clothes, I guarantee you I can sell more clothes with soft pinks, blues and purples than I could using bright reds, greens or black.

When used correctly, colors give a tremedous boost to the power and effectiveness of your web site, so remember to be color wise and color safe or you may not see the color of money.