Colour theory is the understanding of how human beings react to colour. Web designers can use this theory, its rules and guidelines, to inform their use of colour, according to what they want to communicate in their designs. The theory and guidelines are a mix of psychology, culture and optical physiology. And when it comes to website design, colour theory plays an absolutely essential part in visual communication.

What is colour theory, and why is it so important in web design?

Does colour make a difference?

The short answer is: yes, definitely. Users make a visual judgement of your website within around 90 seconds, and up to 90% of that judgement is to do with colour.

There’s a famous example of a colour experiment carried out by HubSpot in which they designed two versions of the same web page, with a clickable call-to-action button: “Get Started Now!”. Everything about the two pages was the same, except for the clickable button, but on one version it was red and on the other it was green. Interestingly, the red button gained 21% more clicks then the green button!

No one should be changing all their call-to-action buttons red on the back of this experiment, as there are many theories around the contrast of red and green on the rest of the page’s colours to take into consideration. But it is interesting to consider how emotional associations made with the colours red and green could potentially have played their part. Red perhaps inspiring passion, urgency and being more eye-catching than the more neutral, calming green.

How do I use colour theory in my website?

If you’ve not considered colour theory before, you can start simply by realising how important colour is in the visual communication of your website. Getting the ‘palette’ right for the look and feel you want to achieve should be your first stage, with it ideally being composed of just two or three colours. More colours can be visually confusing for users.

Don’t forget too how crucial the ease of navigation is for true UX design. You can use colour to guide users to where you want them to go, so that their experience is smooth and enjoyable.

So, what do different colours mean?

Sir Isaac Newton invented the colour wheel in 1666. He believed that colours are not absolute, fixed concepts, but subject to how humans perceive them. Different colours make us feel different emotions.

Each colour has positive and negative aspects. For instance:

  • Red positively conveys energy, warmth and passion, but also fear and anger
  • Yellow positively denotes happiness and fun, but also impatience and pessimism
  • Blue can convey trust, stability and loyalty, but also coldness and predictability

Each colour features on the colour wheel and depending on its relation to other colours it is put with, determines how we feel about that combination.

It’s all about harmony!

When choosing a palette of colour, harmony is crucial. Colours put together must be visually appealing when viewed together. Too much contrast is chaotic and unpleasant, not enough contrast is boring and unengaging.

Thought put into your palette to get it right is time well-spent. And you should test your ideas out and get feedback to see if your palette is evoking the emotions and the kind of engagement for your brand that you want to achieve.

Don’t forget about cultural aspects of colour

There are many publications to explore on colour theory, and symbolism, but it’s also very important to consider any cultural aspects that influence how your audience may perceive certain colours. For instance, red in China means good fortune, whereas red symbolises mourning in South Africa.

Summing up on colour in web design

  • Colour is one of the single most important considerations of good web design and is integral to your brand.
  • As well as considering the individual colours of your palette, you need to consider harmony and culture.
  • Always use colour to guide and help make your website as intuitive to navigate as possible.
  • There’s a complex amount to consider in colour theory so it’s worth exploring further about how colour can influence and engage in web design.
  • And finally, always test your results and then you’ll really know if you struck the right hues.
CloseComment or share
  • Facebook logo
  • LinkedIn logo
  • Medium logo
  • Twitter logo

< Read more articles on our Web Academy