Colours tell a story, your story and, without colours, your website is plain, boring and fails to activate any emotion from your visitors.

Why is colour important in web design?

As visual creatures, we associate images and colours with everything. When somebody says McDonald’s what do you picture? Yellow arches? What about Ferrari? Coca Cola? Lego? The first thoughts that will most likely come to your mind are a logo and a colour, why? Because that is how the majority of human minds work.

This is why it is crucial to ensure that your brand contains a set colour that correctly aligns with your company message and is so consistent that when somebody sees the colour your brand name instantly comes to mind.

We know how difficult it can be to pick the colours that truly speak your brand and so we’ve put together some important considerations when determining brand colours.

Colour psychology

Different colours hold different meanings, from red signifying love to green signifying nature, and spark different emotions within us. Choosing between a warm and cool colour can be an important element to create the right emotions in your customers. If you’re a fast food chain, a warm colour such as yellow or orange is said to cause slight hunger. Maybe you want to create a good, calming environment, the cool colour blue can help to relax the mind and reduce blood pressure (think BUPA).

If you’re struggling to determine which colour will be best for your brand image, smashing magazine has put together an amazing in-depth guide to colours and their meanings.

Colour schemes

Now you have your brand colour, you need to incorporate it into a colour scheme because no you can’t just turn your entire site red! Colour schemes help create a website with multiple colours (or variations of a single colour) that are pleasing to the eye. The most common colour schemes are monochromatic, analogous, and complementary.

Monochromatic colour scheme

You know when I put “(or variations of a single colour)? Enter monochromatic. This colour scheme is where you take one colour and use only that colour and its shades on your website. This is mostly used for greys and blacks – no not reds, stop trying to turn your site red!

Analogous colour scheme

Analogous is a colour scheme that puts 3 colours together that are next to each other on the colour wheel. Almost like a step up from monochromatic, instead of one colour and all its shades, you have 3 very close colours. An example would be red, red-violet, and violet.

Complementary colour scheme

The complementary colour scheme focus on one primary colour with a complementing colour from the opposite side of the colour wheel. The idea here is that the high contrast that is created is able to make information stand out and create a natural journey for your site. An example of a complementary colour scheme would be red and green.

Creating user journey with colour

One brilliant use of colour on a website is to gently nudge your visitors in the direction you want them to go. Creating a menu or a call to action with contrasting colours to your page is a great way to make them stand out and increase the chance that they will be noticed. We all create ideas of where we want our visitors to end up, so why not create a colour scheme that helps them get there?

Bonus: Identify your target audience’s colours

You might have the colour in mind you want to use and maybe you’ve got the whole colour scheme figured out but before you sprint off and change everything, you’ve got to remember that you need to please the people visiting your site.

What this means is that even though you want to run and turn everything red, if your target audience is environmentally conscious they might better associate with a green colour scheme and so that’s what you need to first identify your target audience’s colours.

Leave a Reply