What colours should I use for my website? What is the meaning or colour psychology behind certain chroma when applied to site design? Which colours work best to increase conversions? These are all common questions that we are frequently asked, so let’s take a look, and find the truth behind colour choice…
For a start, it is worth pointing out, if there were a perfect colour palate delivering optimal results on every site, then most people would be using it, and the internet would become a very aesthetically boring place.
For some businesses, the foundation of their website’s colour scheme will be determined by their existing brand colours. Even so, there are still different ways in which these colours can be used. For example, where to use the strongest or darkest colours, and where to use the lighter colours in the design.
Your colours may not be so set in stone, but you may have a core colour or two as defined by your logo, or you may be starting from a blank canvas, or be open to change. Regardless, read on, and you will learn how to maximise the impact and effectiveness of your colour choices.
When it comes to colour psychology, it is worth remembering that there are no definitive colour meanings that are true in every case (despite what some colour charts or experts claim). There are just too many factors involved. Take red for example…
Red can represent danger, but it can also simply grab attention. Depending on the shade, it can also be associated with sex or passion. And, in some Asian cultures, it can represent good luck. Clearly, context needs to be taken into account. There is no such thing as a ‘good’ colour or a ‘bad’ colour.
You should also remember that while we can talk in generalities, there is always the influence of personal preference too. If someone visits your site and has a strong positive or negative association with the colours chosen, then they will have a subconscious positive or negative influence on them. Not much you can do about this!
So with those caveats aside, before we get into colour psychology specifics, let’s look at some foundational guidelines on applying colours…
This is essentially how well two colours stand apart from each other. For example, the strongest contrast is black and white (yes, technically I know they are shades and not colours – but for the purpose of this article they will be treated as colours).
Contrast is very important when it comes to website usability, especially readability. Despite being so foundational, it never ceases to amaze me how often ‘professional’ designers fail on this simple rule. If you see a mid-shade grey text on a pale grey background – this is a perfect example of what not to do!
Black or dark grey text on a white or very pale background is far easier to read. And the text on the page is there to be read! Aesthetics in design should not come at the cost of function. And yes, this has an influence on psychology too – struggling to read what is on the page leads to mental fatigue, frustration or avoidance – none of which are exactly desirable.
White or light text on a dark background also works, though not as well. It is best suited for headlines or short sections. There are always exceptions to every rule, but generally, for longer sections of text, only break the rule if you know what you are doing. (I have a friend who ran an astrology website, and found white text on black and dark purple background out-converted dark text on a white background – an exception, not the rule.)
Some elements should stick out more than others, such as headlines and buttons. Another common mistake designers make is to try and make these ‘blend’ with the rest of the design by using the primary brand colour, or one very similar (e.g. a couple of shades different). This is a safe, and dare I say, lazy approach to colour design.
I am not suggesting it should look bad, but there are ways of using complementary colours that will still look good, but also stand out. Do not fall for the pseudo-psycho-logic that dictates that buttons should be green for best results as green means ‘safe’ and ‘go’. A = B does not necessarily mean B = C.
There have been countless tests done on this, and in short, grabbing attention is far more important than any specific colour used. So if your site is all in green, then green is likely to be a poor choice. If it is all in red, then likewise, red no longer grabs attention.
There are some great tools, such as https://paletton.com that can help you determine a complementary, yet eye-grabbing colour.
More is not always better. When it comes to colours, restraint is key. Try to limit yourself to ideally 2 or 3 colours, 4 at the most, along with white and black. More than this can become a visual mess and psychologically distracting and overwhelming.
A very common mistake we see is using the same colour for non-clickable text elements (such as a headline), with clickable ones (such as a content hyperlink or menu text).
It is important to not only stick with the same colours, but use them in a consistent way. For example, links and buttons that are clickable should ideally use the same colour or colours that are not being used elsewhere on the site. This help improves usability by creating a design language that makes life easier for the site visitor. Consistency also builds trust.
And what about the actual colour choices themselves? Well, as mentioned, this really comes down to a mix of industry-specific and cultural associations. However, here are some general guidelines (at least from a Western perspective – always be sure to check colours for culturally specific sites with someone from that culture).
- Blue: Often seen as a trusted colour in business, it is often found as the foundation to corporate websites and many B2B services. While being trusted, it’s downside is it can appear a bit cold or impersonal – so be careful what image you want to portray. According to some research, blue is the most preferred colour for both men and women.
Of course, for businesses associated with the air, the sea, or water in general, it can be an obvious choice. Sometimes a less obvious choice can help you stand out in a sea of competitors though.
- Green: A colour of natural balance, green can be calming and (at the current time) represent ecological responsibility. Traditionally it has also had a strong association with money and financial products.
Bright, vibrant, almost fluorescent greens are a popular choice for some modern tech companies, and of course, socks from the 80’s.
- Red: A strong colour that is sure to grab attention and signify strength. A bold red is powerful. In some industries, this will help you stand out. In others that require more sensitivity, it may be a little too strong.
- Yellow: A bright colour that is often associated with intelligence and happiness. The stronger, brighter tones of yellow are also very eye-catching and bold in their own way.
There can be an association of danger (as with the black and yellow striped warning signs, or high visibility tops), but overall yellow is a very underutilized colour in web design – perhaps as it is one of the least favourite colours for both men and women.
- Orange: One of my favourite colours, bright orange has long been seen as the colour of joy, while browner shades lean back to a more natural state (think autumn leaves and monks).
In recent years orange and white have become popular with online and software businesses due to their ability to stand out while looking fresh, clean and modern.
- Purple: While traditionally being associated with royalty, purple can be a difficult colour to use well. It is preferred more by women than men, being women’s second favourite colour but being men’s second least favourite (after brown).
Of course, this is a huge oversimplification of colour psychology. A colour’s shade and tone are also important, and their meanings and popularity change over time. The real trick to choosing colours is to worry less about what some guide tells you about its deeper meaning, and more about how you plan to use them.
Common sense will offer a lot of answers (what is your product, who is the intended audience, do you need something that stands out, or that is more discreet, etc.). Then make sure that the colours chosen are compatible with each other using a tool such as https://paletton.com or take inspiration from some pre-made colour palettes at a site like https://coolors.co/palettes/trending.
In my experience, people worry far too much about the meaning of colour, and not enough about the psychology of how their colours are being used. Take time to ensure that the colours you choose have sufficient contrast, and are used with intention in the right way to enhance the usability of your website.
There are plenty of examples where successful sites break the ‘rules’, such as a finance website using bright orange or a tech company going with purple. Use colours intentionally, but don’t get restricted by articles like this trying to tell your their hidden psychological meaning!