Sunstar Creative

Web Design & Colour theory

Dec 9, 2009 Web Design & Design Principles

Colour is used in design to attract attention, group elements, indicate meaning and enhance aesthetics.

Colour can make designs more visually interesting and aesthetic, and can reinforce the organization and meaning (often importance) of elements used in design. If applied improperly, colours can seriously harm the form, function and therefore effectiveness of your website. Colour theory is a massive subject, one well worth learning more about, so here is a set of guidelines that address common issues regarding the use of colour in website design:

Number of colours

Use colour conservatively. Limit the pallate to what the eye can process at a glance (generally about 5 colours. Of course, this depends on the complexity of the website design). Don’t use colour as the only means to impart information, as a significant percentage of the population has limited colour vision.

Colour Combinations

At a glance, the possible range of colour combinations may appear limitless. And to a large extent, it is. That being said, aesthetic colour combinations can be achieved by using adjacent colours on the colour wheel (analogous), opposing colours (complimentary), colours at the corner of a symmetrical polygon circumscribed in the colour wheel (triadic & quadratic):

Appealing and engaging colour combinations can also be found in nature.

Use warmer colours for elements you wish to appear ‘more in the foreground’ (read: eyecatching) and cooler colours for elements you might wish to appear ‘background’ elements.

Light grey is a safe colour for grouping elements without competing with other colour.

Saturation

Use saturated colours (pure hues) when attracting attention is a priority.

Use desaturated colours when performance and efficiency are the priority.

Generally, desaturated, bright colours are preceived as more friendly and professional; desaturated, dark coloursare preceived as serious and professional (as with the Whitehouse logo above); and saturated colours are preceived as more exciting and dynamic.

Exercise caution when combining saturated colours; they can interfere with one another, appear to vibrate and cause eye fatigue.

Lastly, and this is more a point of academic interest: There is no substantive evidence supporting the general effect of colour on mood as most of us tend to think. Similarly, there is no universal symbolism for different colour -different cultures attach different meaning to colours. Therefore, verify the meaning of colours and colour combinations for a particular audience prior to use. (see the ‘Color of Power’ by M. Walker, 1991).