Why Colour Is Important For Your Website

Posted on

Conveying your brand identity through colour

Consumers place a 93% weight on visual appearance when making shopping decisions, with texture at 6% and sound/smell at 1% (though I suspect that changes when walking past a good bakery). It seems almost too high, but actually when you think about it, the visual design of a product and a company is incredibly important. And colour is a huge part of why that is.

Colour makes you feel things. It is often an emotional trigger, and we know that people are more likely to buy something because of emotional triggers than rational ones. Colour decisions for your products, website and branded materials should not only consider how aesthetically pleasing something is, but what emotional response is triggered by your palette. 

Colour schemes are crucial for building a brand

One of the most important functions colour has is building brand recognition. In fact, 80% of brand recognition comes from colour. Colour is usually the first thing people remember about a company’s logo, and changing a logo’s colours can have a big effect on how you are perceived. It's a huge part of your brand identity.

If you are rebranding it’s important to think about whether or not you are trying to hold on to your current associations and keep your colours, or are trying to get rid of your existing perception and pull out the colour palette again.

Choosing the right colour scheme

There are lots of articles out there on colour theory, with extensive colour wheels with descriptions of what each colour means. These are borrowed from Shopify’s Practical Guide For Creating The Best Website Colour Schemes:

  • Red - Passionate, Powerful, Dangerous, Important, Speedy, Stimulated
  • Orange - Playful, Energetic, Attractive, Cheap, Welcoming
  • Yellow - Cheerful, Friendly, Stimulative, Attention-seeking, Bright, Warm
  • Green - Natural, Safe, Fresh, Healthy, Growth
  • Blue - Trust, Calm, Reliability, Security
  • Purple - Luxurious, Mysterious, Romantic, Spiritual, High-end
  • Pink - Feminine, Innocence, Youth
  • Black - Powerful, Sophisticated, Mysterious, Edgy, Luxury
  • White - Purity, Health, Cleanliness, Innocence
  • Grey - Neutral, Formal, Sophistication, Sterility

Turn colour theory into an eCommerce win

Here’s a shortcut to get you started - an infographic from Kissmetrics on how shoppers in North America (and presumably similar shoppers in Australia, NZ, the UK and much of Europe) interpret colours when it comes to commerce.

Also check out this colour emotion guide with some examples of companies utilising colour psychology.

Here are a few examples of Shopify stores that are using colour well.

Chalkd sells chalkboards, so it’s pretty natural that their main colour scheme would involve dark grey and white. Notice their use of bright teal to indicate what page you are on, their contrast with the Win A Free Chalkboard in the top right corner, and the subtlety of the colours in the main image, so as not to take too much away from their dominant colour.

Studio Neat uses a light brown, with orange and white showing reliability (brown), neatness (white) and friendliness (orange).

And I love Ball and Buck’s colour scheme, with dark grey, orange and white, but featuring bold images with lots of colours from the natural settings in them.

And, a couple of tips for using your palette.

Pick three

Start by thinking of a list of what emotions you want your consumers to feel, and sort them by priority level.

You may be saying “ok but I want to build trust and security and create a call to action, and also be soothing and also portray that we are optimistic and youthful and full of energy”. You’ll find yourself with a completely ridiculous looking colour palette that is more overwhelming than anything else.

Go with the “60-30-10” rule, meaning you have one dominant colour, one supporting colour and one accent colour. These should be from your list of customer emotions, and adjusted based on what colours actually go together. You can then vary the shade of that colour to create more depth. Here’s an example.

Quick cheat: You can use this online tool (a seven question quiz by Grasshopper) to help you come up with a colour scheme depending on your products and demographics.

Use contrast to show importance

One of the important design elements of eCommerce is how you guide a reader to important parts of the page. Here’s an example of Tushy, an attachable bidet, which does contrast well. Your eye is immediately guided to the CTA - the “Learn More” button.

Take a look at Oxfam International, too. The contrast between the orange and green buttons on the top, and the orange and white on the left immediately draws your eye to the “Donate” button.

Stay accessible

Remember that nearly 8% of men and 0.5% of women are colour blind. You can use this site to see how your website would look to someone who is colour blind. Keep in mind that the colours you choose, the level of contrast, the size of your text - all of these things can affect how accessible your site feels to groups of people who have visual challenges.

Test it out

We believe in the power of trial and error. Don’t just come up with one colour palette; come up with at least two or three and test them out using A/B testing (or at least run them by your colleagues first). A/B testing is a method that lets you experiment with two versions of the same thing to see what gets better results from actual website users. You can use A/B testing to see which colour scheme makes your customers more likely to make purchases, see how long they are spending on each page and even shift average order value.

We’re designers. And we really like looking at colours.

Elkfox is a Shopify expert that helps businesses grow by making strategic design and marketing decisions. We can help you pick and test out colours that ensure your company gives off the right vibe.