Web Design Colour Psychology – See how colour influences success within Web Design

We look at how colour association influences web design, and how that can impact on a site’s success.

web design colour psychology

Human beings are complex creatures. We like to think that we are in control of the decisions we make and feel empowered by the fact that we can form opinions based on conscious choice.

Except that this isn’t entirely true.

It’s our subconscious minds that are really being influenced by various factors around us and we respond based on experiences that have already shaped us.

This is how clever brands win favour with consumers.

Predominantly with the use of colour.

Considering we can see millions of colours at once, this is an amazing feat.

When you think of Coca-Cola what’s the first thing that comes to mind?

Most likely the colour red.

Red Coca-Cola can

Now try and imagine that in a different colour. Purple?

It’s almost impossible, isn’t it?

We constantly and subconsciously associate brands with colours.

This doesn’t happen by chance and most of the time the colour recognition comes even before logo recognition.

That’s because the psychology of colour association has existed for almost as long as rolling green hills and deep orange sunsets have.

It’s fairly powerful stuff and is often used in web design because the right colour scheme for your brand and target audience can increase dwell time and even conversions.

Just as long as you get the colours right.

Yes, it works both ways.

Your colour scheme can increase or decrease the amount of time someone spends touring your site before they have even read anything about what you have to offer.

A person will make an assumption about your business based on a subconscious feeling they get from your website’s first impression. Emotions rule us.

And colour rules our emotions.

In a research paper published by The Emerald Group, titled “Impact of color on marketing” it was found that 90% of snap judgements made about brands and products were based on colour alone.

Coincidentally, the same study says it takes just 90 seconds for us to draw that conclusion.

90 seconds to make 90% of our snap judgements about your brand based on your colour choice.

That’s crazy, right?

What’s even more astonishing is that what we are doing in that snap judgement is deciding whether your colour scheme appropriately matches your product.

This is how it works.

When your eyes process colour and colour schemes together they transmit information to the hypothalamus region of the brain.

This sets off a flood of communication within the brain with the same volume and lightning speed as a book club WhatsApp group.

Pituitary glands forwarded messages to the endocrine system that pass them straight on to the thyroid glands who give the go-ahead to release the mother of all storms, mood and emotions.

And of course these moods and emotions affect our behaviour.

Colour psychology is actually a branch from the behavioural psychology tree.

Use a colour wheel to see the relationships between various colours

Use a colour wheel to see the relationships between various colours

What’s really happening is that we are either being comforted or made to feel unsettled by the colour/product unification represented on the website.

When potential clients land on your website how they feel about what they see is more likely to get them to stay and click through. Or click away from it.

This happens without us even realising it.

We don’t even have time to register the feeling we get when we open a website.

Nor do we understand why we think that company won’t have what we’re looking for.

Using the right colour scheme for your website is not a very complicated process. It just requires a little knowledge of how our brains work and using that in your favour.

That should be enough information to convince you that it is imperative that you distinguish yourself through the correct colour scheme when considering web design.

This is why it’s so important to be cognisant of the psychology behind colour and not just go with what seems aesthetically appealing or matches your brand.

That way you can be sure that you are not only creating an inviting online environment for potential clients but you are also creating a memorable brand.

Is designing a successful website as simple as knowing what colours evoke positive and negative emotions?

Unfortunately, it’s not that simple at all.

Our memories are so finely tuned to each one of our senses that depending on our experiences, each one of us responds differently to different colours. This is true of our cultural experiences as well.

If you had a bad experience with a teacher in a classroom painted canary yellow, you’ll probably have a visceral response to the colour when you see it.

You may not even know why.

But you just hate yellow.

Why do we “see red” when we are angry?

Yet, on Valentine’s Day the colour red signifies the greatest emotion of them all.

Getting back to your website design though…

If you’re as confused as ever about your fuchsia and turquoise colour board you’ve painstakingly put together, don’t panic.

A little information on colour theory might help.

Complementary colours are found on opposite ends of the colour wheel and these really appeal to us. It creates a satisfying visual balance rather than create small explosions within our brains as our eyes try to process clashing colours.

Use complementary colours to create balance

Use complementary colours to create balance

It does get a little more complicated than this, but for now just being able to create visual calm with two complimentary colours will immediately up your design game.

These contrasting colours give your eyes a little break. It divides attention and creates more refined focus.

You can start your colour journey by choosing a dominant colour and then adding its contrasting colour in smaller areas.

The dominant colour is the one that stands out and the one colour that people will remember you by (humans are notoriously bad at information retention).

The others will just be used to enhance this colour.

But wait.

Before you start skipping like a unicorn through that magic colour wheel, let have a look at how some colours affect different people’s brains.

Different colours can actually create different consumerist responses in people.

Have a look at this colour guide from Kissmetrics:

Use specific colours to target types of consumers

Use specific colours to target types of consumers

Have you noticed that nearly every single sale price tag is red?

That’s not just to get your attention. It’s also screaming right past your logic and into the part of your brain that feels a sense of urgency when it sees that colour.

Couple that with royal blue – a colour associated with trust and security and you will find yourself at the checkout counter faster than you can say, “I’ve earned this”.

Black also feels powerful, sophisticated and luxurious.

American Express.




Feels smooth and not particularly budget conscious, doesn’t it?

Here are some other colours that do weird things with our minds:

  • Green – Relaxing and associated with prosperity and health and at one with nature. Often used for environmental matters.
  • Purple – Used to calm and lull. Associated with wealth and royalty. This is often used on an older, more mature demographic.
  • Pink – Young, feminine, and romantic. Often used for women’s sleepwear or lingerie
  • Orange – Aggressive, often used with a strong call to action
  • Yellow – Optimistic, happiness and youthful, often used for window dressing
  • Brown – Is associated with ruggedness and masculinity
  • Grey – Dignity, understated elegance, authoritative, conservative
This web design from Lilo uses green to show its environmental association

This web design from Lilo uses green to show its environmental association

While colours certainly evoke certain emotions in us it is really important that the colour of the brand matches the target market and crafts your brand’s personality.

You have to make sure that you are sending the right messages to the right people at the right time.

While you might want to pressure your chief demographic to sign up to your app immediately, if they are quiet nature lovers, the colour orange may be too overpowering.

This might leave you wondering why no one likes your product, when actually it’s a really good product it’s just the colour that’s freaking them out a little.

As Coco Chanel once said, “the best colour in the world is the one that looks good on you”.

In this case, the one that looks good on your brand.

So, while navigating colour psychology is not easy, the best thing you can do for your website is to be aware of the subliminal messages you are sending.

If you’re still not sure what colours to use, maybe you need to spend a bit of time thinking about your target market and what colours might work best to attract them to your brand.

Take a careful look at things like their age, sex, assets, and the availability of disposable income then refer to the graphic above.

Gender inequality is real

Whatever your stance on feminism, there is just no denying that some colours appeal to men more than women and vice versa.

But before a sexism fight breaks out – this is not a pink for girls and blue for boys declaration.

In fact, a 2003 study by Joe Hallock found that women and men both preferred the colour blue over all the other colours.

Both genders love blue the most.

This has been proven in many studies.

Little wonder we love it, the colour blue is associated with tranquillity, trustworthiness and serenity.

Just hearing those words is like a cool drink of water.

Remember what online brand is almost exclusively blue?

You did say Facebook, right?

But there are exceptions.

Don’t ever use blue to sell food.

It’s an appetite suppressant derived from strange evolutionary thing that makes us suspicious of the foods nutritional value.

See how finely tuned we are to colour association?

Out of the study participants, men’s least favourite colour was brown and women’s least favourite was orange.

However, gender colour preferences have more to do with tones, tints and shades than actual colours.

Men are attracted to bright colours, as well as achromatic colours (those with no hue like black, white and grey).

Women are attracted to softer tones.

According to Kissmetrics, “A McInnis and Shearer experiment found that women preferred tints more than shades. It’s often proposed that the reason is due to their higher consciousness of specific colours. A “tint” is simply any colour with white added. A colour scheme using tints is soft, youthful and soothing. A “shade” is simply any colour with black added. Shades are deep, powerful and mysterious.”

Take note: This doesn’t mean that you have to resort to stereotypes, though. Remember shades and tones give us a range of millions of colour choices. Have fun with them.

Your clients will thank you.

Where to use colour on your website

Obviously, colour is ever-present, so what we are discussing is a carefully curated colour scheme.

These will be used in the headline type, menu bar, borders, backgrounds, and call to action buttons, navigation tabs, popups and hero graphics.

The most common website colour schemes follow the 60/30/10 rule. The dominant colour is used over 60% of the website.

This colour is going to elicit the greatest emotional response.

A secondary colour (usually complimentary) is used on 30% of the website and further 10% splash of a third colour is used elsewhere on the site.

All three of these colours need to be chosen with utmost care. Just because the contrasting colour is used over such a small area, it can be used to highlight or draw attention to navigation tabs or CTA buttons.

Here is an example of a Lilo web design for E-therapy, and it’s a great example of the 60/30/10 rule.

A web design from Lilo that demonstrates the 60/30/10 rule

A web design from Lilo that demonstrates the 60/30/10 rule

The predominant colour is blue, but the eye is naturally drawn to that red “Login” button on the top right.

The vibrancy of the red against the blue and green is what creates interest. So don’t be scared of adding winks of something unexpected. See how well it works?

Don’t use someone else’s template

While it may be tempting to ride the coattails of a successful competitor, choosing a similar colour scheme is more likely to confuse potential clients.

Again, psychology plays a role.

If people think they are being tricked into thinking you are another, perhaps better known, brand this will immediately invoke a negative response to your brand.

This may even be unintentional on your part. But our brains are strange and this is just one of those snap judgements we make in a split second.

It’s better to do some research and set yourself apart from other people in your industry.

Eliminate your competitors colours altogether.

Be distinctive and there is a higher likelihood that people will remember you.

The only time it is okay to choose an instantly recognisable colour scheme is if the colour is industry related.

Breast cancer awareness is always pink, for example.

An example of a industry-related colour scheme - pink for breast cancer awareness

An example of a industry-related colour scheme – pink for breast cancer awareness

While you’re designing and playing with colour you might decide that you want a small fireworks display of colour on your website.

Well, that’s okay, as long as these colours blend beautifully with your existing palette.

Just be careful. The bright flashing colours of websites gone by are quickest way to get someone not only to click off your site, but also avoid the internet altogether for a while.

So, do you think you might have an idea of what colours you want for your website now?

It’s best to consult the pros on these types of design elements. Regardless of whether the answer is ‘yes’ or ‘no’ to that question

Not only do they have years of experience, but understanding the effects of colour in web design is just something that comes naturally to them.

It’s almost subconscious.

Latest Stories.
Latest Work.
GPA Global WordPress Development
Uniquely Health
Autograph Sound WordPress