Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

How To Select A Good Colour Scheme for your Website

, 4 Jul 2007
Rate this:
Please Sign up or sign in to vote.
How to select a good colour scheme for your Website
Screenshot - colourscheme.jpg

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

  • 4th July, 2007: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

mikvos
Web Developer
South Africa South Africa
No Biography provided

Comments and Discussions

 
GeneralBlack – Dramatic, Classy, Serious Pinmembersk8er_boy2874-Jul-07 4:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 4 Jul 2007
Article Copyright 2007 by mikvos
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid