The Colour of Success

How you use colour on your website is a surprisingly complex topic. Here, we cover the 6 key elements of how to approach using colour on your site.

1. Understand the psychology

Psychologists suggest that up to 90% of purchasing decisions are based on colour.  Every time you see a colour, there’s an unconscious response taking place in your brain. Hormones are released to trigger emotions that affect behaviour.

Therefore, the colour palette for your website is a very important part of the design process.

Different colours have psychological associations (although interestingly these associations change according to your background and culture, for example black is a colour of mourning in the UK but in China, and much of the Far and Middle East, it is white) and create mood.

There are some general associations with colours, but these can be highly individual and vary according to gender, age, background and culture as well as fashion.

2. Use colours appropriately

With the above in mind, use colours in the right way, at the right time, with the right audience, and for the right purpose. For example, if you are selling children’s toys then you won’t want a website designed in 50 shades of grey!

3. Consistency

The starting point is usually your brand logo, its colour and style. Your website should be consistent with this and maintained throughout the site, unless you have a deliberate and well-considered reason.

4. Where to use colour

Colour will make your website look inviting, engaging and attractive. But don’t use it randomly, harness it to highlight key areas for attention:

  • Headlines
  • Buttons and calls to action
  • Primary text panels, hero graphics
  • Banners

5. How to use colour

As discussed above, you can use colour to enhance your website, not only by making it look inviting but also by providing context, personality and mood. You can use a hierarchy of colour on a page to show importance of headings or content, or to identify different topic strands.

It is important to have clarity so use contrast and make sure that text is easy to read. Look at this example using blue and grey. It is surprisingly often you see text that is not that easy to read, especially on small mobile phone screens.

The psychological principle known as the Isolation Effect, states that an item that “stands out like a sore thumb” is more likely to be remembered. Research clearly shows that people remember an item far better (be it text or an image) when it blatantly sticks out from its surroundings.

Use colour contrast to make items stand out.

According to a study published on Moz, an online slot machine company simply changed the call to action button from green to yellow, resulting in a huge rise of 187.4% rise in conversions!

With something as important as a call to action button, it is worth trying out different combinations, but the key thing is to make sure it stands out from the rest of the content.

6. Your choice

There are 16.8 million colours to choose from!  Bearing the psychology of colour in mind can help, but the options can be overwhelming.

Using a colour wheel can make this process much simpler.

You can find advice and useful resources at https://www.pantone.com and Adobe where you can use a digital colour wheel to experiment with colours and pick complimentary colour schemes. Here are four ways suggested on the Adobe site to help you choose a palette.

Opposites attract

A vibrant look is created by pairing contrasting colours but be careful as the effect can be jarring. Complimentary colours work well when you are trying to make something stand out, but don’t work
well with text.

Split the compliment

As a variation you can choose a base colour and use the opposite two adjacent colours. This colour scheme has a strong impact but using a third colour makes it less aggressive.

In close harmony

Pick three colours that are next to each other on the wheel. This presents a harmonious effect, but you need to be careful you have enough contrast in the design.

Golden triangle

Using three colours at the points of a triangle will give a lively vibrant look, but for this to work, make sure that you have enough contrast with a dominant colour and the others for accents.

Click here to see some of Adobe’s popular colour palettes.

Get in touch!

If this is all a bit too much, remember we are here to help! We have a team of expert designers who can advise on how colour will work best with your branding and product range to create a website for results.


leave a comment

Your email address will not be published. Required fields are marked *.

7 website design mistakes & how to avoid them Are you GDPR ready?