Colour is an essential part of design and as a result has been the subject of a lot of study. Surprisingly, however, there has been relatively little research into colour psychology, despite its importance and its money-making potential for businesses.
“Research reveals people make a subconscious judgment about a person, environment, or product within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on colour alone.”
So, colour is important!
In this blog, we will cover the basics of colour psychology: associations, colour preferences etc., and how this can be used (both positively and negatively) as part of site UX design.
We will take a look at some real-world examples of colour being used by sites to drive certain behaviours, and finish off with some actionable advice for your own site.
Colour Psychology: Emotional responses to different colours
The way we perceive colour is subconscious and difficult to measure objectively, however, it is well known that colour can have a powerful impact on our emotions and how we perceive things.
We are subconsciously influenced by colour constantly in our everyday lives. From the spaces we live and work in, to the books we read, adverts we see and websites we use, colour surrounds us and impacts our view of the world.
From a site UX point of view, therefore, simple colour psychology can be used to influence a user’s emotions and subsequently their choices.
Each individual’s response to a colour can vary dramatically, but there are still some general responses common to most of us.
Red is a simple colour but its effect on us is powerful. It is attention grabbing and actually has a physical effect on us, raising our blood pressure and enhancing metabolism. Some of the positive associations are warmth, energy, excitement and friendliness, but it can also represent aggression and danger, so overuse can be overwhelming to users.
Blue, consistently reported as the world’s favourite colour, is a much calmer colour than red, and can be therefore be used to communicate trust and wisdom (although it also has some negative connotations of coldness and aloofness).
Yellow is an emotionally stimulating colour – it has been found to create feelings of optimism, happiness, confidence, friendliness and creativity, but also hunger, frustration and anxiety.
Orange is a combination of red and yellow and so is associated with enthusiasm, comfort, and warmth.
Green is a reassuring, calming colour typically linked with ‘natural’ things (think about how food companies use green packaging for health food products).
Sociology can also have an important impact on how we perceive colours – historical societal representations of colour mean some have important, symbolic impacts.
Purple, for example, was once a rare and expensive colour, and so even now is still associated with luxury, elegance and opulence.
Black has a range of negative connotations (fear, dark, death, mourning) but also can symbolise power, authority and strength, whilst white is typically associated with purity, innocence, hygiene and simplicity.
When we read the psychology related to some of the colours above, we can begin to understand why some industries generally tend to use certain colours.
For example, many food companies use red, orange and yellow to make us feel hungry, whilst social media, banks and other corporate companies tend to use blues to communicate trust, communication and wisdom. Colour can have a huge impact on our instinctive, immediate responses to products and brands, making it a hugely important part of design and branding both on- and off-line.
Colour & UX: Improving Site Efficiency
But beyond branding and product design, colour psychology can also have a big impact on site design and user experience.
A page which is a mess of confusing colours slows a user’s journey, frustrates them, and ultimately increases the likelihood they will leave the site without converting. Discerning colour usage helps avoid this.
The basic principles of colour psychology and UX are very similar to those of typography, another fundamental part of site design. It is a well-known design principle that colour can be used to highlight certain parts of a site and draw user attention away from others. Just as with using varying fonts, colour contrast can be used to guide the user down the page with ease, pointing out important elements.
These improve user experience by reducing the amount of information a user needs to process, therefore easing their navigation through a website.
The good, the bad and the ugly: using colour to manipulate
Colour can also be used to influence behaviour—using positive colours to encourage certain actions we want the user to take (purchase, download, subscribe) and negative or neutral ones discourage ones we don’t (unsubscribe, remove from basket).
The dark side of this is it can also be used to manipulate – so-called ‘dark patterns’ that can be used to deliberately trick, deceive and obfuscate as previously discussed in a blog by Jim.
This can include deliberately using similar colours to make a certain action like account deletion near-impossible to find, or by establishing certain colour patterns in a user journey (e.g. green buttons to progress) and then tricking the user to auto-clicking on a green button that performs a completely unexpected action.
Where is the line drawn, I hear you ask? For us, it’s quite simple: using colour psychology to nudge a user to perform an action is standard best practice and good UX. Using colour to deliberately trick or block a user from doing something is manipulative and unethical.
Besides the ethical implications, it’s also counter-productive. Designing your site for what you want your user to do, not what they want to do, breaks down trust and will ultimately harm your business long-term. Don’t do it.
Using Colour Effectively: Practical Advice
So, that unpleasantness out the way, let’s look at some practical advice. If the ultimate goal is using colour psychology to improve speed, efficiency and ease of use, how can you achieve this?
Here are a few of our top tips:
- Use the 60-30-10 rule. This means 60% of your design is your main colour, 30% your secondary colour and 10% for accent colour
- Test your designs using A/B testing. This ensures you are choosing colours based on testing of real users rather than personal preferences of the designer (more on that below)
- Test on different devices. Colours will look different on various screens, so what you are seeing on your screen may not be what the user is seeing.
- Use contrast. Dark colours complement bright colours. This helps to differentiate between different elements and can even be effective for people with colour blindness because they can clearly see a difference regardless of whether they can see the colours properly
- Don’t just rely on colour to portray your message and differentiate between elements. Use other visual cues such as shapes and wording to show difference, this again improves the accessibility of the website for colour blind people
- Keep it simple and don’t use too many colours. If you do this, you may be communicating too many messages with your user which can confuse them
Now, one final slightly cautionary note. Remember, we said that colour psychology is not an exact science. As much as we deliberate about which colours generate specific feelings, this will not necessarily apply to everyone who sees these colours and can vary from each individual.
Colours can have different associations based on a range of contextual factors – other colours on the page, the individual preferences of a unique user and even the mood they are in, plus a range of cultural factors including culture, upbringing, and learned associations.
The bottom line is as designers, we should not automatically assume that a colour will have the universal effect we want it to on our site.
Instead, when creating websites, it’s useful to test different colours and see what works best for your site and your users.
An experiment by Hubspot involved A/B testing red vs green on their main CTA. Conventional wisdom said that the green button would generate more conversions, but the test actually found that red button was better.
This is a one-off example, but it demonstrates that we can always be surprised by real test results and is a perfect example of why we need to test.
Hopefully you now have a better understanding of the theory of colour psychology, and how it can be used to improve your site’s UX.
Just remember, at the end of the day the aim is to create better experiences for users. If you use colour to manipulate people, ultimately nobody wins. Colour is a powerful tool – use it well, and use it responsibly, and the payoffs can be huge.