Colour Psychology for Your Website [INFOGRAPHIC]

Last Updated on November 24, 2021 by James Wilson

Colour psychology can be applied to many things in life like food, medicine and branding. It is the study of hues to determine the effects on human behaviour. Believe it or not, colour psychology is an essential part of designing your website and marketing your brand.

Choosing the right colour scheme can be difficult; there are so many different colours to choose from, as well as combinations to send the right message.

Below is an infographic that we’ve created here at UKWebHostReview. We hope you find this useful and encourage you to use it as a helpful reference point (embed code at the bottom of this post). 

Many people shy away from using colour because it can be a tricky business. However, it’s all about finding the right balance. Too little colour, or none at all, can make your website not memorable, whereas too much colour, or the wrong colour, can be overwhelming.

If you’re not a graphic designer and decide to build your own website, learning which colours to use can undoubtedly be a challenge. That’s why I’ve created this guide to help you. After reading this article, I hope that the following points will be better understood:

• How to choose the correct main (or dominant) colour for your website
• How to choose complementary colours and mix them with your main colour
• How to choose the best background colour for your website
• How and where to use the right colours on your website

Let’s take a closer look at colour psychology for your website…

How do colours affect your website?

According to Neil Patel, colour increases brand recognition by 80%. Colour combinations can be used for multiple purposes, including your call to action, content, and infographics. There are a wide range of colour combinations, as well as different tints, shades, tones and contrast.

People tend to prefer simplicity over complication. It’s important to remember that colour has meaning, so choosing colours can add or take away from the message you’re trying to convey.

Colours can also mean different things depending on where your customers are located. For example, in North America, the colour red is associated with urgency and energy, whereas in a different part of the world it can mean danger or love.

Do you remember the saying “opposites attract”? Well, that’s because they do. If your colour scheme mainly consists of light colours like yellow or green, the colour red is going to stand out. If you use two competing colours like orange and blue, they’re fighting for attention and neither stands out.

On Microsoft’s Office website, which colour stands out to you? It’s the colour orange. The main colours used are quite dark, like grey and black, meaning the colour orange stands out. The call to action is “Get Office”, meaning they’ve achieved what they set out to do.

Now let’s compare Yale’s School of Art website to Microsoft’s Office website. There are many competing colours, resulting in an eye-sore. It’s hard to determine what you should be looking at and whether there are any important messages that should stand out.

So I hope you can now see that colour is important to your website and your brand.

1. How to choose your main website colour

The main colour that you use for your website represents your brand. It’s your brand colour, so you’ll need to consider this carefully. For example, Vodafone’s brand colour is red. It’s recognisable, and the minute you see their logo surrounded by the deep red, you know it’s Vodafone.

The minute someone lands on your website, their emotions and feelings are going to be tapped into.

Colour is what makes your brand memorable; it’s recommended that you use your dominant colour for your brand in your logo. This will then feed through nicely to your website.

Hopefully, now you have more of an idea of what colours can do for your website. Think about your brand and revisit the infographic above to see what colours are most fitting.

Don’t worry if you’re not entirely sure. However, I would encourage you to take some time to reflect on your brand and write down some ideas on who you want to attract and what emotional responses you want to instil in your website visitors.

• Who do you want to attract?
• Is your brand catered to male, female, or both?
• Is your brand a luxury brand?
• Do you want to create a more calming and health-based feel to your products?

Male Vs Female

Although gender is somewhat of a talking point at the moment, or rather non-gender, the emotional response men and women feel for different colours is very embedded.

Colours appeal to people differently, as they do people from different locations. However, studies have shown men and women prefer different colours to each other. It’s worth thinking about whether your brand is targetting men, women or both.

Joe Hallock, 2003, performed a study to compare colour preferences between men and women. 232 people from 22 different countries participated in the study.

Here are some statistics from the infographic above, created by Neil Patel:

• 57% of men said blue was their favourite colour
• 35% of women said that blue was their favourite colour
• 27% of men said brown was their least favourite colour
• 33% of women said orange was their least favourite colour

Men and women both like the colour blue, however, only female participants liked the colour purple. Brown and orange were amongst the least favourite colours in both groups. If you want to target men and women, I’d suggest choosing blue and green, as these were favoured by both.

Similarly, if you want to attract just men, avoid purple, or if you want to attract just women, go for purple!

Emotions

The information above should be a good starting point for you if you’re trying to establish who to target. However, it’s not all about gender, that’s just a part of our colour psychology guide.

Emotions and how people perceive others plays a big part in the way people choose to purchase products. For example, if you want to appear more sophisticated or deem to be associated with luxury brands, you may be more drawn to brands that use the colour black.

When we see someone in the street holding a bag, or driving in a particular car, it’s natural for humans to judge others and build a picture of who that person is. More often than not, people will choose a brand based on the personality or emotions they believe that brand says about them.

If you want to attract customers to your business who enjoy nature, and have a calm and holistic view, green would be the preferred colour. If you want to come across as a trustworthy and secure brand, blue would be a better choice.

Do you see where I’m going with this?

I know it can be a bit much to take in, which is why I encourage my readers to pause and take in everything we’ve discussed so far. Keep reflecting on your brand and what you want your customers to feel when they purchase your products or services.

How to use dominant colour

By now, you should know what you want your dominant colour to be. If you don’t, review our infographic and compare the emotions vs your demographics to find a suitable colour for your brand. Once you’ve nailed a colour, it’s time to use it in the right places.

We know that colour attracts attention, so you want to use it correctly and not just place it willy nilly.

Here’s a few tips:

• Don’t overdo your colour
• Use it where you want your website visitors to pay attention to
• Use colour when you want your visitors to take action, like a contact form or “buy now”

Above is O2’s website. They’ve used light tones of blue, white and grey throughout, with bolder blue’s to highlight call-to-actions (CTAs) like “Go to My O2”, “Buy now”, and “See the range”. These CTAs draw the user’s attention to where the company want people to go.

2. Complimentary colours

Complimentary and accent colours help to break up the theme of having just one colour on your website. If there was just one colour, there wouldn’t be anything to draw attention to.

The trouble is, working out which colours match together well can be difficult. Colour theory provides practical guidance on colour mixing and the visual effects colours have. However, like me, I’m sure you don’t have the time to get a degree in colour theory!

Thankfully, there’s a wonderful tool called Adobe CC Colour Tool.

Adobe CC Colour Tool lets you enter in the HEX code of your dominant colour and will provide colours that work well with it. If you don’t know your HEX code, there are plenty of colour picker tools on the internet that you can use for free like this one.

How to use complementary colours on your website

Complementary colours are a great way to highlight less important information on your website, but information you want your visitors to notice. For example, when you hover over a menu bar item, a complementary colour would work well.

Other good uses of complementary colours include:

• Links
• Subtitles
• Secondary buttons
• Background colour
• Info boxes

Like your dominant colour, don’t overdo it with your secondary colours. I’d recommend sticking to one or two colours that blend well with your dominant colour.

Harry’s website uses subtle complimentary colours that work well, but don’t overburden their dominant colour. Here you can see they’ve used a dark blue when you hover over links like “help” and “products”.

3. Background colour

Choosing a background colour is a lot like interior design.

When you walk into a hospital, what is the main colour you expect to see on the walls and floors? White. White gives the impression of a sterile and clean environment. This is the same for a dentist and even a health and beauty parlour.

When you visit a local family-run cafe, you may see cottage-style designs, like olive green. Or perhaps you’ve gone to a funky restaurant with bursts of colour on their walls.

Wherever you go, whether it’s a shop, restaurant, hotel, or even your own houses, background colour (or in this context, wall colour) is important.

The background colour of your website can also determine where your visitor’s attention is drawn to. Overly complicated backgrounds can focus a users’ attention away from call-to-actions or important information.

Content-heavy websites

Information, research, and blogs tend to be content-heavy. Content is the focus of these websites and therefore that’s the information you want visitors to see. It’s for this reason they tend to have white or light-coloured backgrounds.

I’m going to use UKWebHostReview as an example. It’s easy to read the content on my website because the background colour is white. If I used another colour for my website background, it would be hard to read the information.

If you want people to be able to read your content, do not go for a dark or overly complicated colour. White and light colour backgrounds are recommended for content websites. This also eliminates any issues for those that are colour blind.

Creative websites

Creative websites include designers, fashion, beauty and art. In these industries, you can pretty much do anything you like with your background colour as long as you can read the text on the website. For these types of websites, your background colour or image is the first thing people will see.

Studio Lovelock is a branding company. They’re creative and stylish, as is their website. If this is the kind of industry you’re in, you’ll want people to believe in your creative mind and the things you can do for them.

Brand websites

Brand websites have a strong identity. They tend to use their dominant colour as their website’s background colour, and will most likely have a logo of the same colour. Using an example I mentioned at the beginning of this article, Vodafone holds a strong brand identity using the colour red.

Vodafone’s background colour works, even though it is very bold and bright. We instantly recognise which brand this is and their content is easy to read.

If your brand colour is bright blue or bright green, it may be difficult to read the content on your website. In this case, go back to one of the tools I mentioned earlier, Adobe Colour CC Tool and have a play with some different shades of your dominant colour.

Conclusion: How to choose your website colours

I realise we’ve talked a lot about colour and the information here can be overwhelming. However, I hope I’ve been able to give you an overview of which colours to choose for your website.

Understanding colour psychology isn’t something you can necessarily master in a day, but this is certainly a start.

Whether you’re a web designer, graphic designer, or you’re designing your own website, your website is what’s going to talk to your audience. It’s, therefore, imperative you put them first and cater to their tastes.

It’s easy to try and create a website that appeals to your own tastes, however, this isn’t the right thing to do. If your target audience is female, and you hate the colour purple, don’t dismiss it for that reason. Colour psychology is based on research and there’s a lot of it out there!

Creating a good colour combination is crucial to your brand. Don’t think your website has to be boring and dull but at the same time don’t create an eyesore.[/vc_column_text][/vc_column][/vc_row]

Download this infographic.