You are currently viewing How to use colour on websites for the full effect

Or color to our American friends. When you’re a British website designer you have to remember when writing CSS and you want to make something a colour you have to write color in the code somewhere. There’s a mini UK to USA translator in our heads.

Back to colour…

What springs to mind when writing about colour is when people use unnecessarily bright background colours on website pages and printed literature for that matter.

Remember you want to communicate with people, not burn out their retinas!

Don’t have zillions of colours on your website it can look really messy and confusing. Remember your website is a tool to communicate a message or make it easy to sell your wares or make information easy to access.

You don’t have to match the colours of your logo exactly on your website. Adding one other colour, shades of the colours of your logo and or a selection of greys can work too.

As long as you’re consistent it makes the site much more user friendly.

For example, have all your headings the same colour, size and typeface, don’t vary the colours of common elements, a break in the consistency can disrupt reading and finding information or features of your website. This can be a bit of a turn-off. Keep it simple and straightforward and people will find what they’re after more quickly.

Colour meanings

Colour has a massive effect on psychology and how much of it you use. Masses of bright pink might feel overpowering but having just links or icons on a website in that colour can make them easier to find and a subtle touch to the overall feel.

How we feel about colour is down to previous experiences, which can change over time.

Red for example can mean love, danger or anger, depending on context.

When I was doing my graphic degree in the late 1990s, a teacher told us banks will never use red in their logos, because ‘being in the red’ meant being in debt.

I’ll never forget a few years later, when HSBC rebranded and used red in their logo, and then Santander did too. Perhaps the idea of being overdrawn went out of date with online banking?

Orange is a trusting colour, bright, positive and steadfast. Can be overpowering depending on the brightness if over used.

This spring-like colour is bright and fresh. Don’t ever use yellow text on a white background, just not enough contrast to be read by some. Light shades of yellow as a background can be used to highlight sections without being hard to read. Very bright yellow though can be way too much in large doses.

Blue is a safe option, like orange is trusting, but easy to read and look at, unless you use a very bright shade. Burnt orange can be associated with 1970s furniture depending how you use it.

Dark green is a classy colour but can look stuffy and old. Used in the right way can be easy on the eye and not overpowering at all.

Light green is the colour I think of for eco-friendly designs, but it can also be for medical and food scenarios. I love it, it’s bright and positive.

Purple is a lovely gender-neutral colour, I have to stop myself using too much when designing logos. Seems to go with all colours whatever shade. Can be associated with mystical or therapy type subjects, and lots more, I don’t think it can ever be wrong on any design.

Random fact the Phoenicians made purple dye and their name means the ‘purple people’.

Well, there’s lots more colours which would make this far too long to read, what’s your favourite?

Light text on dark backgrounds or dark text on light backgrounds?

If you’ve set your device to night mode then it’s probably light on dark. I personally find these easier too. But for older generations (the pre-baby-boomers) dark on light is what they’re used to. So if you’re building a website for elderly people to access, make sure they can read it easily.

What are your favourite colours, are there any websites you’ve been on that have hurt your eyes or any that have used colour in a surprisingly cool way?