9 Aug, 2019

Impact of Colour on Web Design

Why does colour matter so much when it comes to website design? Well, if used correctly, colour can help increase brand recognition, improve usability and even increase conversion rates. That’s not just digital agency nonsense either, it’s actually based on the results of proper scientific research and good old A/B testing.
For example, studies have shown that people make subconscious decisions and judgements about a product within the first 90 seconds of seeing it, and most of that initial assessment, in fact 90% of it, is based on colour alone. Memory tests have also revealed that colour is a key component in memory retention and recall and that’s why many brands are especially focused on their branding.

With so many potential benefits, it’s no wonder then, that colour is one of the most important parts of designing a website. The first key decision that must be made, is which colours to use. You’ve no doubt noticed that most brands and websites have a very restricted colour palette, usually just three or four colours and there’s a very good reason why.

Too much colour can overwhelm users, overcomplicating the website design and ultimately causing confusion and disrupting the user journey. Luckily, there are a few rules of thumb to help choose the right combination (and number) of colours.

How to choose a colour palette

  • There are monochromatic colour palettes, using different hues or tints from just one colour, like the Strata website here...
  • Analogous colour palettes use colours that sit next to each other on the colour wheel just like this example from Barrett Steel…
  • Complementary palettes use colours opposite one another on the colour wheel (split contemporary selects two opposing colours to one main colour).
  • Triadic colour palettes use three colours that are evenly spaced around the colour wheel.
  • Finally, tetradic colour palettes use four evenly spaced colours from around the colour wheel.
Complementary palettes create high contrast while tetradic palettes give the most versality and colour variation; either way though, each one of these colour schemes has its own benefits and sticks to the rule of only using a limited number of colours.

The psychology of colours

At this point, it’s also worthwhile remembering that colours have psychological connotations too, so make sure the colours you choose within any given combination, appropriately reflect the emotions and attributes that you want to associate with your business. We won’t go into to too much detail here, because there are plenty of blogs online like this one that already cover this topic in great detail, but as a whistle stop tour these are the psychological connotations of the main colours on the colour wheel:
  • Red: passion, anger and danger
  • Orange: happiness, warmth, excitement, youth, frivolity and fun
  • Yellow: happiness, friendliness, energy, optimism, fear and anxiety
  • Green: natural, sustainable, prosperous, balance and stagnation
  • Blue: calmness, serenity, trustworthiness, security, safety, coldness, emotionless and unfriendly
  • Purple: royalty, luxury, wealthiness, wisdom, spirituality and introspection
  • Pink: femininity, youth, innocence and softness
  • Brown: rustic, earthiness, stability, sturdiness, heaviness and unsophisticated
  • Black: sophisticated, elegant, bold, timeless, seriousness and menacing
  • White: purity, cleanliness and sterility
Remember: there are positive and negative connotations of every colour!

How to use colours on a website

Once you have a colour palette selected, the next set of key decisions revolve around where to use those colours. We already mentioned how colour can help improve website usability and a big part of doing that, is by using colour to create content hierarchy; focusing attention on key calls to action and important information.
That being said, which colour you use to highlight key calls to action for example, is also an important decision as split testing has demonstrated on numerous occasions…

In an A/B test reported by Leadpages, a green call to action button out-performed an orange call to action button by 86.41%. For HubSpot, A/B testing their button colours revealed that red buttons outperformed green buttons by 21% and finally for Monetate it was a blue button that outperformed an orange button, delivering a 9% increase in clicks.

With so many conflicting success stories, you might think your call to action colour doesn’t matter, but in truth, you should always use a colour that matches your brand and sticks to your colour palette, then within those chosen colours, test different combinations to find the one that works best in the context of your website. In most cases, and what all the a/b tests listed above have in common, is that it was a high contrast button that generally won the experiment most likely because it stood out the most.

Finally, it’s always important to remember that according to the National Eye Institute roughly 8% of males and 0.5% of females are affected by some form of colour blindness and this is where using colours with high contrast can help ensure visitors can effortlessly read your content, especially where text is used over background colours and imagery.

If you need help designing your website and understanding the important of colour, our design team can help, let’s have a chat: 0113 887 1010.