Web design and colour | Web Design Articles

A subjective decision

Choosing an appropriate colour palette for a web design project can be a daunting task. The biggest problem is colour is all down to individual taste colour is a matter of opinion and there is no right or wrong answer. As a result you will get as many opinions on your colour palette as people you ask. However the basic principles of colour theory that can make this process less accidental and more deliberate.

Different perceptions

We all perceive colour in slightly different ways. For a start 5% of people have some form of colour vision deficiency. Adding to that complication when designing a website is different computer show colour differently. There are a number of different  factors which affect the way our computers display colour. These include:
  • Monitor type
  • Monitor brightness and contrast settings
  • Operating system being used
  • Graphics card used
  • Gamma settings
  • Colour depth

Colour theory

The basis of most colour combinations is the colour wheel (see figure below). There are many, many ways to combine the colours on the colour wheel, and come up with a usable scheme. There are many theories for harmony. The following illustrations and descriptions present some basic formulas.

alt


Figure 1: The colour wheel
Complements
Complementary colours are any two colours which are directly opposite each other, such as red and green and red-purple and yellow-green.
 

Figure 2: Some examples of complementary colour pairs

Monochromatic

Use a colour in combination with its tints and shades. When we lighten a colour, we obtain its tint. When we darken a colour, we obtain its shade. The end result is a scheme that is easy to develop and adds a bit of colour.
 

Figure 3: Monochromatic colours

Achromatic

Using a scheme with greys and blacks only presents a professional impression. The only problem is that without at least a hint of colour to balance this scheme, it can sap the energy from the presentation, and the audience. If you do plan to use this scheme, make sure to combine it with a little bit of colour, such as red, blue or orange (for instance for the main heading).
 

Figure 4: Achromatic colours

Primary colours

Red Yellow and Blue form the primary colours on the colour wheel. A wonderfully cheerful colour scheme (if using the right combination), this is often a good scheme to fall back on when time is short, and you need to make an impression.
 

Figure 5: Primary colours

Colour symbolism

Colour conveys meanings in two primary ways - natural associations and psychological symbolism. People are comfortable when colours remind them of similar things. For example, a soft shade of blue triggers associations with the sky and a psychological sense of calm.

Successful wed design requires an awareness of how and why colours communicate meaning. The source of these meanings can be quite conspicuous, such as those found in nature — red is the colour of blazing fire and blood, blue the colour of cooling waters and the sky. Other meanings may be more complex and not universal.

Colour Temperature

Colours are warm, hot or cold in appearance; orange, red, blue. Warm colours, such as red and orange, tend to come forward. Cool colours, such as green and blue, tend to recede. Warm colours, especially red and yellow, tend to agitate, while cool colours tend to relax.

Using too much of any colour can either aggravate or depress the audience, while at the same time diluting the effect of the colour. Too much red, for instance, could make the audience extremely uncomfortable. Too much blue on the other hand could put the audience to sleep, or sap the energy from the audience.

It’s usually a good idea not to use more than two or three colours in a design.

Search Search | Explore Creo

More | Additional pages

UKWDA Text size: 1|2|3