Colour Theory in Website Design

What colours have you picked out for your website? Do you have a particular marketing message in mind?

We have all heard that different colours can influence our mood and effect our behaviour, but should we really pay attention to colour theory when designing a website?

The answer is 'Yes' of course!

There are untold benefits for using colour theory in web design. Colour has the power to influence how we act and what we feel, applying this knowledge in website design gives you a fantastic marketing tool.

Colour theory is largely subjective and is not an exact science, but there are lots of things that you can take into account and benefit from.

First, we will venture to a science lesson to get a bit of background information on colours.

The Scientific Stuff

Don't be scared, this is really quite interesting.

Colour Theory Part 1

Colours are divided into two groups on the spectrum wheel;

• Warm Colours -  red, orange, yellow
• Cool Colours - blue, purple, green

Warm colours can make you feel anything from cosy to angry whilst cooler colours can make you feel tranquil or even sad.

Though some psychologists may regard colour theory and therapy as a load of .... rubbish, there are increasing studies from colour and emotional reactions to the benefits of colour healing.

Did you know that the Science of colour or colour theory can be called 'chromatics' or 'colorimetry' ?

Colour Theory Part 2

What is colour exactly? Well class, colour is simply a visible form of light - electromagnetic energy.

Sir Isaac Newton famously discovered that each colour has a single wavelength. Using the colours of the visible light spectrum, the wave lengths are as follows.

• Red = 650nm
• Yellow= 570nm
• Green = 510nm
• Blue= 475nm

Red has the longest wavelength and you can see it for yourself in nature; at sunrise and sunset. Basically the atmosphere scatters the colours, the blue shades are removed easily due to their short wave length, leaving the red/ orangey glow you get in the sky. How lovely!?

And now back to the web design ....

On the eye...

Choosing your colour scheme can be easy!

Most of it is common sense really. You are going to know which colour combinations look naff, and which look more... zen. Don't make rookie mistakes such as putting garish patterns behind text, using poor colour contrasts and clashing with your brand image.

The following text/ background combinations are regarded as the criminals of colour theory and design;

• green text - purple background
• light blue text - white background
• dark blue text - red background
• green text - orange background

People respond to colour before anything else. Take a look at the picture below it shows you how powerful colour theory can be;

Did you know that the human eye can see 7,000,000 colours?

So which colours are the easiest to see? Well colours by themselves are different from combinations. For example yellow as a block colour is renowned for being difficult on the eyes, but if you coordinate it with other colours, it can look very pleasant.

That is the important thing to remember. Contrast and coordination make colours more accessible.

Did you know that 1 in 10 people are visually impaired?

Did you know that if you add around 33% more white space to your web page your content will be much more accessible to the visitor.

Colour and Culture

It is perfectly normal for colour preference to differ from person to person, but do you know what colours are associated within other cultures than your own?

Its important to consider this when designing your website especially if your target audience is international.

For example Blue can symbol represent trust in Western Europe but mourning in Latin America.

Thes Colours in Cultures chart, will help you loads will picking your colour scheme! That way you don't run the risk of putting off some clients!

Your Colour Theory Plan

Are you ready to use colours to communicate?

• Target your market? Location, age group, gender? Once you get a better idea of who your clients are, then you can pick colours accordingly.
• Match with your Brand! Take a look at what the big brands are doing on their websites and see how they use colour in their marketing. Good ones to observe are McDonalds, Coca Cola and Galaxy Chocolate.
• Experiment - play with different colour combinations and see what looks the best. Get feedback and opinions from colleagues etc.
• How do you want your client to react or feel? For example if you are Dentist and you have a website, you don't want to have pictures of staff dressed in red as this would remind the client of blood. Not the best move.

And last but not least - remember these colour theory facts;

• Out of the worlds top 100 big brands the most popular colours used are; blue 33% , red 29%, black or grey scale 28%, yellow or gold tones 13% .
• As for the number of colours 95% use only two colours in their scheme
• Red is most popular in the food, technology, car and agriculture industries
• Green is most popular in the energy, finance, household, food and technology industries
• Colour is the first thing a client will notice about your logo.

Hopefully you have a good grasp of the foundations of colour theory, so good luck in your projects! Let us know how you get on!

If you need help with colour choices for you website or marketing material,  take a look at our Website Design Services. Or if you're creating a brand for the first time, why not take a look at some of the companies we've helped with their new website design.