Loading...

How Colour on Your Website Can Improve Conversions and User Experience

Finding the right colours can help increase your conversion rate with your target audience.

For example did you know each colour represents an emotion? Keep reading to find out which colour represents each emotion and trigger keywords.

It’s always best to enlist in a good web design company that understands great design and also builds optimised websites with colour theory in mind. For example, UK, Bristol based Ben Smith is a web designer with real world graphic design experience and colour psychology understanding applies this thought process. If you are on a budget or want to explore colour on your own website you can follow these tips and facts below.

Colour meanings: More than just pixels on a screen

Red conveys Energy, Action: Desire, Passion

Orange conveys Adventure, risk, conversation, Friendship, forward thinking

Yellow conveys Happiness and fun, optimism, affordable, confidence, communication, new ideas

Blue conveys Communication, trustworthy, Peace, Honesty, authority and wisdom

Purple/Violet conveys Inspiration, thinkers, creativity, individual, subconscious

Turquoise conveys Communication, balance, success, trendy, elite, expensive

Pink conveys Love, compassion, nurturing, understanding, respect, positive, inspire

Silver conveys Illumination, forward thinking, modern, clear, strong, energy, wealth, expensive, class, corporate

Gold conveys Success, winners, wealth, expensive, elegance, value, quality, status

White conveys Innocence, clean, pure, stress free, moving on, clear, modern

Black conveys Mystery, secretive, luxury, dark, power, control, unknown

How colours work: Understand what colours go together

Primary colours these cannot be created by mixing other colours together.

Secondary colours are formed by mixing two primary colours: blue and yellow create green, red and yellow create orange.

Tertiary colours are achieved by combining primary and secondary colours: blue-green or red-orange.

Complimentary colours are colours that compliment each other - they are located at opposite end of the colour wheel. These include blue and orange, purple and yellow, and red and green. Analogous colours are located next to each other on the colour wheel - they match well but are more hues / shades of the colour used eg Violet, Blue Violet, Blue, Blue Green, Green

Make a great first impression: You only get one chance!

Research shows people make a subconscious decision about your website within 90 seconds of viewing it and between 62 percent and 90 percent of that judgment is based on colour alone.

According to data from Kissmetrics, colour increases brand recognition by up to 80 percent, so its very important to do research into your target demographic and keep branding consistent between all online and offline promotions.

Break it down: Colour preference by gender and age

A survey conducted by Philip Cohen, a sociologist from the University of Maryland, asked 2,000 men and women the simple question:

“What is your favorite color?” The colour most often given in response was “blue,” for both male and female.

See breakdowns of colour by specific gender and age groups below.

Colour preference by percentage Male and Female

Men

Blue - 42%

Green - 25%

Red - 8%

Dark Yellow - 7%

Yellow - 5%

Purple - 12%

Light Purple - 1%

Women

Blue - 29%

Green - 19%

Red - 9%

Light Purple - 7%

Yellow - 6%

Dark Yellow - 3%

Purple - 2%

Colour preference by percentage Under 19 years - 55+ years

Teenagers under 19

Charcoal Black

Denim Blue

Splashed White

Jade Black

Crimson Red

Tangerine Orange

Young Adult 20 - 30 years

Caroline Blue

Quartz Silver

Hickory Brown

Sand Gold

Cherry Red

Egg Plant Purple

Adults 30 - 40 years

Oxford Blue

Powder Blue

Earl Grey

Dull Magenta

Emerald Green

Heather Purple

Middle Aged 40 - 55 years

Pebble Black

Misty Grey

Smokey Teal

Apricot Pink

Pine Green

Pantone Plum

Senior Citizens 55+ years

Sauve Mauve

Pale Beige

Snow Blue

Frosty Lime

Crepe Pink

Candle White

Get creative: Create your own colour pallet

Whether you have a good eye for design or just starting out, there are some good online tools to help you achieve a great looking website by saving hours of testing combinations. For example:

Adobe Color and coolors.co - these are free to use and offer quick generated examples of tried and tested colour combinations for you to use instantly.

Don’t be scared to experiment in creating a unique brand.

Proven: Colour conversion results example

HubSpot publicly shared their results of an A/B test they carried out looking at the impact of colour and the relationship to website conversions.

Two pages which were identical except the call to action button where created - one had a green button and the other page had a red button. Hubspot ran the experiment, they had over 2,000 visits to the page.

At the end of the A/B test, the green button attracted 21% more clicks than the red.

Colour Conclusion: Optimise your website

Colour is very important in web design - you should adapt your colour pallet to your target audience for maximum results.

Automate your colour palettes by using website tools but above all A/B test different combinations to see what works for you.

Keep branding consistent to achieve higher results.

Copyright © All Rights Reserved