The vibrant colour psychology behind web design

31 May 2017

The vibrant colour psychology behind web design

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.

Coca-Cola - Red

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

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

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

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

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.

Let's gets a little more technical with regards to how and 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

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

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.

» How Fake News is Fought (and how to spot it yourself)

Learn how to report fake news, and how to recognise which stories are false....

» 5 Reasons your website is not gaining traffic (and how to fix it)

Boost your natural web traffic by improving these 5 aspects of your site....

» 6 Tools to boost team collaboration and productivity

Keep track of your work projects with these helpful tools....

» The nuts and bolts of social media marketing

Learn more about social media marketing from these helpful guidelines...

» The helpful guide to Instagram for business

Set up your own Instagram for business account and grow an engaged following with these helpful guideline...

» 11 simple SEO tricks and tools for your new website

Follow these simple SEO tricks to help increase your new site's visibility ...

» The vibrant colour psychology behind web design

How the psychology behind colour association influences web design, and how that can impact on a site's success ...

» How not having a mobile-friendly site hurts your business

Mobile browsing has overtaken desktop as the number one choice for internet users ...

» What you need to know about Google's Fred Update

Google’s latest algorithm update ...

» What's happening on Social Media in 2017

We look at the recent changes and added features for your favourite social media platforms ...

» 7 Free tools and techniques to find long-tail keywords to boost your conversion rates

Your website is all set to conquer the web, but there might be a missing element ...

» Why Content Marketing is Important for Any Business

Why content marketing is important for any business ...

» What Mobile First Means for Your SEO

Users have gone mobile. Each and every year, studies are showing that ...

» How to Build Trust on Social Media

How to Build Trust on Social Media ...

» Goodbye intrusive mobile popups

Google now penalizing mobile interstitials ...

» The latest Google SEO Algorithm Updates

The latest Google SEO Algorithm Updates ...

» WhatsApp wants to share your data with Facebook (and how to opt out)

WhatsApp wants to share your data with Facebook ...

» Ten fascinating digital marketing stats from the last week

Ten fascinating digital marketing stats from the last week ...

» 10 Significant Digital Marketing Stats from last week

10 Significant Digital Marketing Stats from last week – 21 April 2016 ...

» Optimise your Email Campaigns for Conversions

8 Ways to Optimise your Email Campaigns for Conversions ...

» Facebook Reactions

How will Reactions change the Facebook experience? ...

» Improve Business Branding

10 Social Media Tips to Improve Business Branding ...

» Online Brand Management

5 Tips to Manage Your Online Reputation ...

» Ten Tips to Increase Blog Traffics

Ten Tips to Increase Your Blog Traffic and Visibility ...

» 10 Great Tips to Promote Your Blog

10 Great Tips to Promote Your Blog

» The Perfect Blog Post

How to Write the Perfect Blog Post ...

» Facebook Trends 2016

Facebook Trends 2016: One Social Network to Rule Them All ...

» Blogging for Business

8 Reasons why Blogging is important for your Businesses (and why you’re missing out) ...

» The Ultimate Web Design Checklist

Does your website have the essential elements to succeed? ...

» Digital Marketing

How Digital Marketing can Kickstart your eCommerce Sales ...

» What is Social Currency?

What is Social Currency and how can it help your eCommerce store ...

» Optimise your FB Account for Business

Facebook is the world’s favourite social media platform ...

» How to gain more instagram followers

Instagram is a big player in the social media market ...

» Panda Update

Panda Update may just be part of the new Google core Algorithm ...

» Ridding the web of spam

Google’s latest web browser, ‘Chrome’ was released in 2008 and ...

» Digital Marketing 2011

Digital shopkeepers are changing the face of the Internet and ...

» E-commerce Boosts Economy

For many London Web Design agencies, 2010 was the year of ...

» SEO: A short Introduction

In this “SEO Hierarchy of needs” effective keywords and ...

» To Design or Not ... (Part 1)

Knowing when it’s actually time to call on a professional could be ...

» To Design or Not ... (Part 2)

Web designers often fall into the habit of screen-to-screen ...

» Organic SEO

An efficient, sustainable marketing strategy is important ...

» Agile

A project management solution that encourages inspection ...

» Bing vs Google

Online Search Engine technology is continually evolving ...

» Ruby on Rails

An open source web application framework using Ruby ...

» WordPress

The more reputable small-scale website and blog package ...

» Grid Design

Mathematics is often closely related to the art of web design ...

» Drupal vs Joomla

Open Source CMS's can give a greater level of autonomy to users ...

» Google Page Rank

Page Rank is based on the principle of importance through connectivity ...


12 Stukeley Street

T: +44(0) 207 631 3366
F: +44(0) 207 692 2646

Reg UK: 05806347
VAT Reg No: 912 5835 27

Cape Town

502 Buitenkloof Studios
8 Kloof Street, Gardens
Cape Town, 8001

T. + 27 21 424 2797
T. + 27 21 424 2829



Unit 2, Crossways Shopping Centre
Cnr Rokeby Road and Bagot Road
WA 6008

T: +61 (0) 42 777 0294


more info please email us at or call us on +44 (0) 207 631 3366

Lilo London Lilo Cape Town Lilo Perth