What colours should your website use?

It’s a question that should be given some serious thought, as getting the colours right can get you spotted, help people remember you and encourage certain behaviours.

A widely referenced study from the University of Loyola, Maryland, claims that colour increases brand recognition ‘by 80%’. (Or it could be ‘by up to 80%’; it seems that there’s some confusion over what the original quote actually said.)

Easier to pin down is the fact that different colours produce different responses in those seeing them.

They can motivate someone to act (red), make us seem approachable (teal) or denote a superior product (purple; see Color Psychology: How Do Colors Affect Mood & Emotions? and Psychological Properties Of Colours).

But it’s more subtle than that, as attitudes to colours have been found to differ between genders and ages.

Men and younger people prefer bright colours and women prefer softer ones, according to Choosing a Good Color Scheme for Your Website, while both men and women tend to like blue and green, but black is preferred by men and purple by women.

If you’re targeting a specific audience, it might be worth investing some time in finding out what – if any – colour preferences they might have.

GETTING IDEAS

But how do you choose your website colours?

If you’ve got existing assets, such as a logo or social media account, you’ll almost certainly want to use one or more of their colours.

(There are exceptions; one of my clients insisted that the colour of their logo should not be used on the site, because of an association they’d become aware of only after using the logo for some time, so a new colour scheme had to be created.)

Don’t worry if you’re starting from scratch and not yet sure what colours to choose. There are plenty of places to go to for ideas, including other websites, colour generators, magazines and the world around us (think of brickwork, shop window displays, flowers, cars in a car park … there are so many sources of inspiration!).

Seen an image online whose colours you like? Then you can find out what they are using tools such as Image Color Finder or Hexcolor.

If it’s a website whose colours take your fancy, you can check them out using ColorZilla, Image Color Picker or one of many other colour picker tools.

DO YOUR COLOURS WORK?

Having got some ideas, it’s worth thinking about how a potential colour scheme would work on your site.

Don’t feel bound to squeeze in 10 colours when three will do and remember that not all the colours used need to be given equal prominence.

Decide what the dominant colour will be and how it will be used. As a background for headers or blog posts? In images? For fonts?

How do you see the other colours you’ve chosen fitting in? On call to action (CTA) buttons? As menu backgrounds or highlights?

If you’re thinking of using a particular font and background colour combination, it’s worth using the Coolors Contrast Checker to see whether they provide sufficient contrast for the text to be easily read. (The tool is based on contrast ratios recommended by the Web Content Accessibility Guidelines, WCAG.)

The example below shows that white text on a pale blue background scores poorly and so is best avoided.

Try not to be too dogmatic about colour schemes; if something isn’t working, be prepared to think again and try other options.

HERE TO HELP

All this might sound like a lot of work for you, but I’m happy to do most of the legwork for my clients, listening to their thoughts, offering advice and drafting colour schemes for them to consider.

Thanks for reading; here are some other colour-related sources to check out …

Hexcolor: Colour Inspiration

Visme: 50 Gorgeous Color Schemes From Award-Winning Websites

WebDesignDev: 11 Steps to Creating the Perfect Website Color Scheme