Any Web site should have a colour scheme, used consistently through the site. Schemes can vary in complexity from "black for text, white for background", through black-and-white plus an additional colour for highlights, to full colour schemes or those that specify colour-coding for sections of the site.
Although most people choose colour schemes "by feel", this is not quite an arbitrary process and it's possible to give a few suggestions or guidelines. Hopefully these can be helpful, especially if you are not confident in your use of colour.
Meaning of colour
Like fonts, colours contain meaning and can give impressions that should suit the content. Reds convey warmth, blues and greens are cooler. Pastels can give a light, airy feel to a site. Dark, strong colours can encourage a claustrophobic or powerful impression.
As well as these "inherent" meanings, colours and colour schemes can also give certain impressions based on common uses of those colours; for example, pastels might suggest hospital walls, and dull "earth colours" (greens, browns) can hint at a natural setting.
The colour wheel
The most understandable way of describing colour uses three values:
- Hue - this represents the actual "colour", for example red, green, or purple.
- Saturation - saturated colours are stronger. As saturation of a colour decreases, it gets closer to grey.
- Brightness
It's possible to represent two of these (normally hue and saturation) on a colour-wheel. Hue changes around the circle; saturation increases from the middle of the circle (which is grey) to the outside.
Key-colour schemes
One easy way to design a colour scheme is to use black and white, plus a single "key colour" to highlight important information such as hyperlinks, headings, or emphasised text, or to include graphical elements like rules or background shading.
This is quite easy to do well. You simply need to choose one colour which is reasonably appropriate for the site, and make sure not to overuse the highlighting to the point where it's diluted.
Monochromatic colour schemes
You can create a colour scheme using variations of a single hue (with different brightness or saturation). This can be useful, for example, if you need to use a coloured background to set apart some text; you can use a low-saturation, bright (near-white) version of the colour as a background.
Complementary colour schemes
Complementary colours - hues opposite on the colour wheel - can provide a striking, distinctive colour scheme. Sometimes a better effect can be achieved by using not-quite-opposite colours.
Adjacent colour schemes
Using colours near to each other on the colour wheel can produce a more subtle impression. Wider ranges of colours give a more dynamic, striking effect.
Lots and lots of colours
In general it's a good idea to restrict the number of colours used (as with fonts). However sometimes you need to use many colours (perhaps five or more), usually if you decide to colour-code sections of the site.
If you do this, you can usually avoid unpleasant clashes with several techniques:
- Restrict the varied colours to small areas of the screen, and keep other parts of the screen neutral (black, white, and greys).
- Use low-saturation colours (pastels or dark colours) for the colour-coding, because they are weaker.
