Colour Psychology and Web Design
In design, colour and the choices that you make are very important. Colours resonate with us and give meaning to everyday things. Colour psychology is used extensively in all aspects of design, from logos and branding, to grocery packaging and much more.
When we look at a colour, our eyes send a message to the part of the brain known as the hypothalamus. This in turn sends more signals to the pituitary gland and then the thyroid glands. This causes a release of hormones which can affect our mood and emotions and consequently, our behaviour.
We also make judgements quickly; it takes a mere 90 seconds for a site visitor to form an opinion when they land on a site, Kissmetrics points out. And 62-90% of that snap judgement is influenced by colour.
Colour and Meaning
So colour is a very important aspect of site design that it’s vital to get right if you want your users to instantly form the right impression about the site and the business behind it. How we perceive colour is to some extent determined by our own personal preferences and our cultural background.
For example, to the western world, red is often associated with stop, delete, or danger (although not in colour psychology) whilst in China, it’s associated with prosperity and happiness and in South Africa, it’s associated with mourning.
Gender and societal influences also have an impact and studies have shown that users also make judgements based on how appropriate they feel the colour is to the brand.
Check out the chart below for a quick reference on the meaning of common colours.
Brown is universally disliked by both genders, so you should use only if it’s felt that there’s no other real option. Yellow too is disliked by men in general and should also be avoided. Pinks are often used in sites aimed at women (far too often, I think) but perform better when used to market confectionary and other foods that appeal to the sweet tooth as the colour stimulates this.
It’s common to see sites in the environmental industry use green, as this denotes nature and a sense of calm, whilst in the financial industry it’s common to see a dark blue used as this gives the user a sense of luxury and trust.
So when designing a site, you should carefully consider the brand, its personality and its audience. If the site is aimed at women, then you will want to use different colours than if it were aimed at men, for example.
- The main message of the site
- The audience and their likes and dislikes
- The overall colour scheme – logos and other existing assets will have to fit in with the scheme
- Brand story and meaning
When it comes to the latter, you should bear in mind that some of your users (especially if they’re predominantly men) will suffer from colour blindness. With this in mind, you should choose contrasting colours that don’t appear opposite each other on the colour wheel. This is because whilst they might seem like contrasting colours to you, to a colour blind user they may appear to be of a similar shade.
Image source: UX Movement
To ensure you don’t create designs that don’t look good to colour blind people you should avoid the following combinations:
- Green and red
- Green and brown
- Blue and purple
- Green and blue
- Light green and yellow
- Blue and grey
- Green and grey
- Green and black
To be absolutely sure, you could use variations of the same colour, choosing different shades, or you could add textures to illustrate difference.
It’s thought that the Facebook colour is blue because Mark Zuckerberg is red-green colour blind and so can see blue better than other colours.
Consider How You Want Users to Feel
When designing a site colour scheme then, it’s necessary to think about what you want users to feel when they land on the site. For example, a sports site might want to use orange as it’s associated with energy. Or it could use green as this is associated with well-being and innovation – ideal for sites that have an exciting new sports product.
Check out the screenshot above from Weight Watchers UK. We can see that pink is used fairly liberally and in areas which act as a CTA (although you have to wonder at a slimming site using a colour that stimulates the sweet tooth). This tells us that the site is clearly aimed at women and this is further proven by the use of purple as it’s universally liked by women. To boost trust, the site uses black and purple to lend the sense that the site is luxury in the sense that it’s a well-known and trusted brand. The colour green is picked out on another CTA on the top bar, which gives the impression that it’s an ethical brand that can be trusted too.
You should give plenty of thought to the colours used in a similar way in the sites that you design. Pay particular attention to CTA buttons and text and use colour to draw attention to them as well as prompt action. Once you have your design ready, you should A/B test as many elements as you can to ensure that the colours work with your audience. The colours used on CTA buttons can have a significant effect on conversions, so it can’t be emphasised enough how important they are.
Colour in design is not all about how pretty a site looks, but is central to how a site brands and presents itself. The designer who understands colour and its impact on different audiences then will be the one who creates successful designs that users love.