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
Now, rather than have a separate name for every color, several digital
methods have been created for labeling or giving values to these different
The main two you need to know are the hexadecimal method and the RGB
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
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
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.
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.
Swatches can be put together in many different ways, but here is an
example of what a standard swatch might look like.
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
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.
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
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
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
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.
|About the contributor