When There's Too Much Color

Web Design February 02, 2008

When it comes to choosing colors for your website, there's a standard limit: three.

Most things in the world come in three's: jokes, pigs, stooges, blind mice, space dimensions... But in terms of color on a website, you can think of the three being:

(1) your main color
(2) your secondary supporting color
(3) your highlight color

Think about your audience and site focus when picking a color scheme. Do you want something bright and saturated or the opposite? The use of color can have drastic effects on your overall user experience. For example, having orange text on a white background creates a totally different feeling than white text on a black background. What's the overall vibe you want to make?

Consider the feelings associated with colors:
- Red: passion, romance, fire, violence, aggression.
- Purple: creativity, mystery, (reddish purple) royalty, mysticism, rarity.
- Blue: loyalty, security, conservatism, tranquility, coldness, sadness. Light blues create a feeling of openness, clean air and freshness, while dark blues can convey tradition, trust and solidity.
- Green: nature, fertility, growth, envy. A lighter, somewhat desaturated green is the color of money and indicates wealth or value.
- Yellow: brightness, illumination, illness, cowardice. Some yellows can symbolize the precious metal - gold - and are universally valued.
- Black: power, sophistication, contemporary style, death, morbidity, evil, night.
- White: purity, innocence, cleanliness, truth, peace, coldness, sterility.

Now consider how these colors come together to form color schemes. Yellow and green tend to feel like Spring whereas Black and Red seem a bit more morbid.

In addition, it's important that your color choices not inhibit readability. If your text color is too light, it can become very hard to read. The same is achieved if you have a dark background and dark text.

Don't overdo it. Too many colors on a site can not only be confusing, but it detracts from your "branding." If all your links are different colors and all your headers are different, you lose consistency. When everything matches a style, your users will more quickly be able to identify and understand the various aspects of your site.

There are a couple cool sites out there to help you pick a color scheme:

WellStyled.com
WebColorSchemes.com
Kuler
ColourLovers.com
Genopal

Other Web Design Posts