The use of colour
The colours you use on your website can have a dramatic impact on how your visitors perceive your website.
The colours you choose should reinforce your message and the image you want to portray.
Let’s have a look at some colours, and the psychological perceptions of them.
Red
Red has multiple meanings. It can represent danger, anger, or romance. It is a high energy colour that reflects urgency, which is why it is often used to symbolise sales and reductions in price. It is bold, brash, and catches the eye.
Pick the four words from the list below that can be associated with red.
Not quite. You have .
Correct!
Orange
Orange is another colour that can evoke different emotions depending on how it is used. It can be an energetic colour, symbolise happiness, or even vitality. It can also denote urgency, so is often used to create a 'Buy it Now' call to action.
Pick the four words from the list below that can be associated with orange.
Not quite. You have .
Correct!
Yellow
Youthful and optimistic, vibrant tones of yellow can make your website look fresh and grab your audience's attention. The negative connotation of yellow is that it can sometimes be seen as a deceitful colour.
Pick the four words from the list below that can be associated with yellow.
Not quite. You have .
Correct!
Green
Green is a colour with many connotations. It can symbolise nature when used for beauty products, or can be a symbol of wealth and security. It is one of the easiest colours for the eye to process.
Blue
Calm and cool, shades of blue are often used to create a sensation of knowledge, trust and brand loyalty. Many businesses and banks, for example, use blue in their web design to give an impression of solidity and gravitas.
Purple
Shades of purple are used to reflect different things in design. Purple is often associated with royalty and affluence, so is often used by websites to give the impression of luxury. It is also used in the world of retail and beauty to soothe and calm, which is often why it is featured on anti-aging products.
Pink
Youthful, fun, and exciting; pink can symbolise a whole host of emotions. It is often used in websites aimed at young women and mothers. It is romantic and feminine so has a very clear target market in mind.
Pick the four words from the list below that can be associated with pink.
Not quite. You have .
Correct!
White
A neutral colour, white reflects purity and cleanliness. Designers talk of using 'white space' to enhance their work and guide the eye. This colour is fresh, open, and inviting, making it a great choice for an eCommerce website.
Pick the four words from the list below that can be associated with white.
Not quite. You have .
Correct!
Black
Black is often seen as a powerful, strong colour; one that is frequently used for luxury products. On the negative side it can seem void of emotion and even symbolise death.
Grey
Grey is a neutral colour, and one that can seem conservative and formal. Websites use this colour to show their authority and reflect the high quality of their products. It is mainly used as a background colour because it is devoid of any warmth.
Pick the four words from the list below that can be associated with grey.
Not quite. You have .
Correct!
Brown
Dependable, natural and stable; brown is a colour that divides opinion. Some see it as a dull colour to be avoided while others will capitalize on the fact it can portray a website as wholesome and reliable.
Pick the four words from the list below that can be associated with brown.
Not quite. You have .
Correct!
So we know what these colours indicate, and from this we can decide what colours would be good choices to use for different sorts of designs.
Based on what you’ve just learnt, select the most appropriate colours for these websites.
What colour would you pick for
A magazine aimed at pre-teen/early teen girls?
Correct!
Pink, purple, yellow or orange would all be great colours for this website - they’re fun, youthful and vibrant.
Hmmm. Perhaps there is a better choice.
We're looking for a colour that is fun, youthful and vibrant. Try again. Don’t forget you can go back and look at the colours again.
What colour would you pick for
A luxury, expensive boutique hotel?
Correct!
Black or purple would be perfect - they're luxurious and high end.
Hmmm. Perhaps there is a better choice.
We're looking for a colour that is luxurious and high end. Try again. Don’t forget you can go back and look at the colours again.
What colour would you pick for
A price slashing auction website?
Correct!
Orange or Red are great choices - they represent the urgency associated with sales and auctions.
Hmmm. Perhaps there is a better choice.
We're looking for a colour that represents the urgency associated with sales and auctions. Try again. Don’t forget you can go back and look at the colours again.
What colour would you pick for
A website for a minimalist piece of technology?
Correct!
White or grey are good choices for this - they're neutral and clinical.
Hmmm. Perhaps there is a better choice.
We're looking for a colour that is neutral and clinical. Try again. Don’t forget you can go back and look at the colours again.
What colour would you pick for
A website for a firm of lawyers?
Correct!
Blue is a good colour for this - it symbolises wisdom, authority and seriousness.
Hmmm. Perhaps there is a better choice.
We're looking for a colour that symbolises wisdom, authority and seriousness. Try again. Don’t forget you can go back and look at the colours again.
What colour would you pick for
A website for an organic food company?
Correct!
Green or brown are good choices for this website - they represent nature and freshness or wholesomeness.
Hmmm. Perhaps there is a better choice.
We're looking for a colour that represents nature and freshness. Try again. Don’t forget you can go back and look at the colours again.
Well done!
Of course, the combinations of colours you use along with their exact shade, hue or tone will also have an impact on their meaning.
The use of colour is one way which may reassure the user they are in the right place. The use of typography is another.