Colour and Design: The Importance of Using Colour Theory in Web Design

May 16, 2019 | Websites

Colour and design matters. Whether it’s the colours, we choose to wear, to colours we paint on our walls, or the colours we use to design websites. They are all important.

Every shade you use is essential and influences your audience in different ways. It increases a person’s recognition of your brand. When you have an endless colour palette to work with it’s vital to simplify the process and get it right.

Minimalist logo design

Colour and Design Expresses a Message

The colours you use on a website you’re designing will determine whether or not a person visiting that site will trust the site, stay on the site and be persuaded to do whatever it is that site wants them to do, be it buy a product or perform a call to action.

If the colours on the website you’re designing don’t have hues that work together, your audience may as well just click away and find a friendlier site to visit!


The Basics

Just in case anyone’s forgotten, there are three kinds of colour on the colour wheel:

  • Primary (red, blue, yellow)
  • Secondary (green, orange, purple)
  • Tertiary (yellow-green, red-orange, red-purple and so on).

You can’t make primary colours by mixing other colours together, whereas secondary colours are made by mixing two primary colours together, so blue, and yellow make green, and so on.

Whereas, tertiary colours come about by combining primary colours with secondary colours.

Understanding these basics is really important if you want to make your website stand out and invoke an emotional response with your audience.


So, What’s Colour Theory?


Put simply; it’s how, in design, colours relate to one another and how we see those colours on the web page.

Think about the relationship between different colours. Colours opposite one another on the colour wheel always work well together, such as yellow and purple, and create a terrific contrast.

Your audience is more likely to feel engaged with your content and pays attention to it.

Or if you want to be a bit more adventurous, think about using compound colour schemes. In other words, use two colours from opposite ends of the colour wheel, and you’ll see a great contrast, it’s just a bit softer.

Alternatively, you can go for the triadic colour option. By using three colours that are equidistant from each other on your colour wheel, you can still create balance, making one of your three colours slightly more dominant than the other two.

Have a go at using yellow, orange and blue. Drawing a triangle on your colour wheel is a simple means to achieve this.

Using colours that are close to each other on the colour wheel can create a lovely sense of harmony. It’s less of contrast but works well.



Your use of contrast can make it easier to read words on a page. Period.

Every colour or shade has an opposite. Just look at your colour wheel and choose a tone, and then select a hue at the opposite end of the circle.

Typically, using a light background colour with darker text is a simple way of making your site readable, attractive and accessible.

You can also draw your audience’s attention to specific areas of a web page by using colour.

It’s important not to forget that some people have colour blindness or dyslexia and this can impact on how they see colours on a page. The aim is to provide the best possible user experience.



Last but not least, vibrancy. This is how we use colours to attract a specific audience or invoke a particular emotion.

Basically, using colour cleverly can set the mood of your website, remembering of course that a person’s response to colour is entirely subjective. Some people feel calm when they see blue. Others may find it cold and unwelcoming, for example.

Colours have meaning. It may seem obvious, but using brighter colours will naturally make your audience feel energised and engaged with your site. This is especially important if you are advertising something you want to sell, whether it’s a product or a brand.

Alternatively, if you want to convey seriousness and gravitas, use darker colours.

Brighter colours equate to vibrancy. Check out the BBC news website for example. It’s red which suggests ‘being alert’ which compliments the site’s ‘breaking news’ element.


Which Colours to Use?

Choosing colours for your design isn’t just about colours that are your personal favourites.

Some colours have meaning across the world, for example, green means go, and red means stop or danger — peaceful colours, such as blue, mean calm, security, serenity, and harmony.

Whereas, bright colours are associated with happiness, energy, and positivity. So, unsurprisingly, darker shades do the opposite.

Look at Facebook’s home page. What do the lighter blue colours project? They should represent creativity, and trust too.

Or The Ritz Hotel’s dark blue strapline? It symbolises trust, loyalty, and wisdom. Or companies that want to inspire their customers to think of them as reliable, steady, someone to depend on.

They’ll use darker colours on their websites. You’ll notice that lots of healthcare and financial institutions use darker shades of blue.

Don’t forget about green. It represents balance and calm. That’s why you often see it on eco-friendly or organic sites. And yellow means happiness and fun.

Check out holiday websites, such as Thomas Cook and their use of yellow, or the BBC Sport home page.


Final Thoughts

All in all, getting your colour and design right will absolutely set the tone for your website, making it stand out from the crowd.

If you want a helping hand designing the perfect website, please feel free to reach out to us and get a free quote. Speak soon!

Related posts you might like…

Share This