How To Select A Good Colour Scheme for your Website

Introduction

Most developers are not the best graphic designers and sometimes produce Web sites that have terrible colour schemes whereby the text is difficult to read and you get a headache after looking at them for any length of time. I therefore thought I'd write a basic guide to implementing a decent colour scheme that will at least allow visitors to browse your site without wincing.

The first thing to bear in mind is that colours do invoke moods. You need to think very carefully about how your potential visitors will respond to your choices before you develop your site. Below are some colours and information about how the majority of people respond to them. Some may appear to have contrasting meanings, please use your best judgement when selecting a colour keeping its context in mind.

• Red – Excitement, Power, Aggressive, Strong, Heavy
• Blue – Peace, Strength, Comfort, Dependable
• Yellow – Brightness, Spring, Caution
• Green – Lucky, Wealth, Nature, Food
• Brown – Nature, Aged, Wisdom
• Orange – Warmth, Excitement, Energy
• Pink – Soft, Child-like, Feminine
• Purple – Sophisticated, Dignified, Royalty, Religion
• Black – Dramatic, Classy, Serious
• Gray – High Tech, Business, Cold, Distinctive
• White – Clean, Pure, Simple

Also, note that there some "rules" for mixing colours. The human eye cannot focus on both a red and a blue line at the same time. For this reason, trying to read red text on a blue background creates immense fatigue and eye strain. Most colours work well with others in the same "family". Warm text colours (red, orange, brown) look better together with a warm background colour and cool colours (blue, green, gray) look better on cool backgrounds. While contrast can be used effectively to draw attention to specific items, too much contrast is a bad idea and should be avoided.

When selecting colour combinations, look to nature for great ideas. The Web is full of mundane Web sites with the same few colours and it becomes easy to fall into this same rut. A unique palette can make sure the site stands out and becomes more memorable. Remember however, that your colour selections need to be appropriate for your audience. As colour communicates so effectively, it's important to make sure that it says the right thing.

It is usually a good idea to incorporate the colours of your company logo into your colour scheme so keep this in mind when selecting it.

Typically there are 5 groups of colours in a Web site, using more is not recommended:

1. The background colour - if in doubt, use white
2. The body text colour – if in doubt, use black
3. The dominant contrast colour – used for headings, borders and large blocks of content
4. The secondary contrast colour - used to provide visual interest or contrast
5. The tertiary contrast colour – this is used to grab a visitor's attention and should be used sparingly

The "screenshot" above is an example of a "before" site, a natural setting from which a scheme is drawn and an "after" site utilising the natural colour scheme.

History

• 4^th July, 2007: Initial post