The web is a colourful place. Unlike print media, there’s no extra cost to use as many colour variations as you want on a website. Once limited to a “small” palette of only 256 colours, the advances in colour display technology mean colour is almost limitless. Of course, that doesn’t mean you should go wild with it.
Colour can make or break people’s first impression of your site. It can attract or instantly repel (think red and green side by side, which can cause that weirdly sickening pulse effect ). Colour can be used to highlight important features, to draw the eye, and to enhance website navigation.
Website Colour Coding
In the beginning… There were 16 basic colours that could be called by name in HTML. They are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. There are now another 130 named colours (see https://www.w3schools.com/html/html_colors.asp for the list).
However, it is far more common to code colours by their hexadecimal value (starting with a #) or sometimes by their RGB (Red Green Blue) values. This allows thousands – in fact millions! – of variations. How on earth do you choose colours for your website?
If you haven’t yet chosen your brand’s colours, give it some careful thought rather than just picking your own favourite colours. As with everything about your brand, think about colour from your customer’s perspective. Your website’s colours can invoke trust, convey your business personality, and provide instant recognition. [Tweet this.]
While you may want to be distinctive, it can be prudent to go with the flow of what’s already being done within your industry. For instance, green is commonly associated with nature, the environment and with fresh food. Blue is often used for travel, although dark blue is more the staid, reliable colour of financial companies and law firms. Red abounds for cosmetics. Pastels for babies and bright primary colours for toddlers.
Take some time to browse through some of the colour-related sites on the web for inspiration. One of my favourites is design-seeds. But beware, it’s easy to while away half the morning getting lost in their beautiful images.
Colour by numbers
How many colours should you select?
(1) One. Most people instantly recognise the distinctive colour used by Tiffany. What colour do you recall when you think of Cadbury chocolate? They use their particular purple on all packaging and advertising – so much so that they’ve won trademark protection to stop competitors using similar shades.
(2) Two. The combination of 2 colours can make brand recognition simpler – like the red and yellow of McDonalds, or the colour duos of most football teams.
(3) Three. At the most, use 3 colours, and not in equal amounts. One colour should dominate, followed by the secondary, and then only use the third colour as an occasional highlight.
Even if you decide your logo and brand will be a single colour, a monochromatic website could be a bit boring. Try choosing a neutral colour for some elements, or add some small highlights with a complementary colour. You can also use varying shades of the same colour, eg. to create darker text that has sufficient contrast with its background to be legible.
The importance of Contrast
If your website’s visitors can’t read your content, it’s next to useless. Not only does text need to be large enough (and spaced well, and in a legible font, etc, etc), it needs to have high contrast against its background. That’s not just for people with perfect vision, but for everybody – including those with poor eyesight, colour blindness and other visual impairment. So give up on using very pale grey or pastel pink text, even on a bright white background.
Obviously the highest contrast comes from black on white. Interestingly, pure white on black is generally too hard on the eyes. I even steer clear of pure black on pure white and prefer to use a charcoal and a slightly off-white for easier viewing on a brightly lit screen.
A very easy-to-use colour contrast tool can be found here: http://www.dasplankton.de/ContrastA/
Colour Variations – Web vs Print
Colour is a pretty tricky thing, not just because each of us may perceive it differently, but because so many factors affect the way it appears.
- On the web, colour is affected by the device and its inbuilt colour calibration as well as software technology. It can vary greatly from screen to screen, device to device.
- It can vary depending on your browser and how they process colour. Until a defined standard is introduced across all, you might find the same colour looks quite different on Safari compared to Firefox, for example.
- Colour in images will vary depending on the file format used – PNG, GIF and JPEG all work with colour quite differently.
- Print something off the web and it will often appear a completely different colour. Colour on the internet is created and referenced differently to how it’s done in print. So you’ll hear terms used such as RGB (Red Green Blue) and Hex values (appearing as #nnnnnn) for the web, and CMYK (Cyan Magenta Yellow Black), Pantone, etc for print.
What do these variations mean to you? Trying to match colours for printed business materials and signage compared to online colours can cause headaches! So accept that a perfect match is unrealistic (in fact, almost impossible) and just start with one or the other.
Choose your print colours first if you like, and from there your web designer can generally colour match from a CMYK or Pantone scheme, but they might end up needing a more saturated tone, as some print colours can appear dull online.
Conversely, if you start by choosing your website colours, you’ll probably have to experiment with converting those colours to print. Some colours in the RGB spectrum can’t even be replicated in CMYK.
Find something that looks good in print, and a similar colour range that looks good online, and accept that they’re not exact. Once you’re happy with them, it’s a good idea to record the colours for future use – both the online version and the print version.
An example of colour use on a website
I am by no means qualified in colour theory and felt it would be wrong to analyse another designer’s website. So I’ll stick with one that I know intimately and which I constantly question – my own website for Right Hand Design. it uses Orange and Purple. Why did I choose those colours? They’re vibrant. Distinctive. And they resonated with me at the time I was setting up the business. It was really just my gut feel.
I’ve since studied up on the colours and read that orange suggests energy and represents change (being one of the colours associated with Autumn/Fall). It’s also considered a friendlier version of red (which can seem aggressive). And purple is strongly associated with creativity, as well as luxury. Combined, I think they sum up my web design business quite well.
I necessarily teamed these two vibrant colours with neutral, soothing white, and made use of small touches of green in some of the images.
I’ve carried the same colour scheme through on all my printed materials – brochures, business cards, invoices, etc. I carry a purple folder and sometimes wear those colours when I attend client meetings too, further reinforcing the brand.
I’d love to know whether the colours resonate with you or not – you can email me at firstname.lastname@example.org.
So when choosing your brand colours, whether by gut feel or careful research, consider how they will work for you on your website. Have fun with colour, but use it wisely…