Tips for using colour on websites

Colouring crayons - Website colours

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.

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

1. Understand the psychology of colour

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 a mood.

Colour representation rainbow
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!

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.

 

3. Where to use colour on your website

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

 

4. How to use colour on your website

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 the 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.

Call to action buttons with different colours of representation

 

5. How to choose colours for your website

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.

 

Palette of colours and their emotions
Opposites attract: A vibrant look is created by pairing contrasting colours but be careful as the effect can be jarring. Complementary colours work well when you are trying to make something stand out, but don’t work well with text. You can choose a base colour and use the opposite two adjacent colours. This 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.

See some of Adobe’s popular colour palettes here.

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.