By: Alex Walker

February 26th, 2001

Reader Rating: 8

Color. The human eye can discern over 16 million different shades of it.
I know this fact because just last week I had the opportunity to count each and every one of them on an AOL hometown page I was enjoying. Bless their little hearts, they certainly were thorough ;-)

I remember thinking to myself 'Hey, they're all free, so there's no reason to skimp on them, right?'

Of course not, but it does raise the obvious question -

• How many colors do I really need to use?
• And which colors 'play nice' together?

Following is a 4-step checklist to help you set off on the right foot.

Rule 1: Choosing a Mood

Try this when you begin. Write the name of your Website on the top of a sheet of loose leaf and then underneath it scribble down 20 to 30 words that describe the 'mood and feel' that you want give your visitors. Do this, and very quickly your sheet will be covered with words like slick, breezy, professional, funky, informative and friendly. Now circle the best five words that describe your new site, and tape your page somewhere you can see it while you're working.

This page will be your guide, keeping you on track the next time you get seduced by that crazy, German techno site with the groovy, unreadable font as you begin re-designing BassFishing-tips.com.

Rule 2: Limit your Palette

Once you've settled on your mood the fun begins. Sit down and select two, three, or at most, four colors to build your entire site around. In general I've found that monotone and duotone sites have an intensity that is hard to reproduce with more colors. If that quality is important in your site, keep the colors down. You can enlist some free help at this stage of the process. Plenty of free, well-designed software exists to make this important task easier and I've listed a handful of my personal favorites here.

BjColorizer V1.5 [1] - A simple little app equipped with sliders to adjust both foreground and background colors.

ColorPad 2.3 [2] - This tiny, pretty, clever and cool tool lets you analyze and adjust colors from anywhere on your screen including other websites. Make sure you browse the 'ReadMe.txt' though before you get started using this tool.

Color Picker 2.0 [3] - Another 'eyedropper' app like ColorPad, but this one lets you remember a palette of up to six colors (Grab yourself a copy of 'Calipers' while you're there, a great little app too).

Rule 3: The Color is not the Design

Don't forget that choosing your color-set is only one weapon in your design arsenal. In fact, try this experiment….

Take a screen capture of your current design and desaturate it with your graphics program. If your design doesn't work 'stand up' in black and white, it probably needs more work. Keep in mind that color is only one of six basic 'Elements of Design'.

The other five are:

• Line: The basic structural foundation of almost all graphics. Designs like the one used in Dennisinter.com [4] rely very heavily on their linework.
• Shape: The shapes created by lines merging, touching, and intersecting. Sites such as Nike.com [5] and GlobeShoes.com [6] strongly emphasize the shapes of their athletes and shoes in their web design.
• Value: The relative lightness, darkness and shading of elements in a page. This is the key to good monochrome designs such as Australianinfront.com.au [7] or Nickciske.com/binary [8].
• Space: The bits you deliberately leave blank. Sometimes used to give an illusion of depth, sometimes to create movement and sometimes just used to give your eye 'breathing room'. Marchfirst.com [9] is a great example of a design using space.
• Texture and Pattern: A different 'tactile' design element created by a combination of line, shape and value. Most successfully applied when used subtly on sites such as K10K.net [10] or Entic.net [11]

Every design you've ever done has used a combination of all of these elements, although you probably weren't conscious of it until now. So, before you throw a new color into the mix, ask yourself if you could get more benefit from adjusting one of your other five elements.

Rule 4: Use Color to Guide Your Users

If your color only exists as 'window dressing', then frankly it isn't working hard enough. Every site needs a 'content hierarchy' or 'content ladder of importance'. There's a good chance that your 'Latest News' might be at the top of your sites ladder of importance, and your copyright message might be at the bottom of it. Color (along with size and screen position) is your key weapon in helping your users understand your hierarchy. The more they use your site, the more they learn to scan for certain colors and text styles.

SitePoint.com itself is a nice example of this. 'Feature Articles' and 'Hot Discussion Topics' are marked with big, clickable, rich blue text links. Scroll the landing page quickly down and up and you will notice these main links still catch the eye amongst the blur of text. Older articles are highlighted in a less eye-catching gray text, sitemap links are tagged with a sedate blue, and 'garden variety' body text is presented in plain black. An easy order for any user to follow.

In closing, most importantly stay true to the purpose of the site. Some audiences (for example the rave culture) will comfortably identify with color selections and styles that a wider audience simple won't tolerate. If this is your audience my advice is to know them well before you start designing for them. They tend to be uncannily good at smelling a fake.

On the other hand, if your audience is broader, invest the extra time to make sure your color choices aren't damaging your user experience.

Remember that your color selection by itself is unlikely to guarantee a return visit from a user. However it could be more than enough to guarantee they don't.

[1] http://www.bjfelix.de/main.php3?go=delphi
[2] http://www.entic.net/~vmoya/downloads_software.html
[3] http://www.iconico.com/colorpic/
[4] http://www.dennisinter.com
[5] http://www.nike.com
[6] http://www.globeshoes.com
[7] http://www.australianinfront.com.au
[8] http://www.nickciske.com
[9] http://www.marchfirst.com
[10] http://www.k10k.net
[11] http://www.entic.net/~vmoya