Usage of colour on websites

Colours on websitesOr 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.

If you’re thinking of getting into writing code, there’s a great app called Mimo which gives simple and straightforward lessons in HTML, CSS, Python and MySQL. I’ve been refreshing my 24 year old knowledge of the web and learnt some new things, and lots changed in that time. 

Back to colour…

What springs to mind when writing about colour is when people use unnecessarily bright background colours on website pages (or any 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.

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 greys can work too. 

As long as you’re consistent it flows and makes the site much more user friendly. For example, have all your headings the same colour, don’t vary the colours of 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.

Colour meanings 

Colour has a massive effect on psychology and how much of it you use. Masses of pink might feel overpowering but having just links or icons on a website in bright pink 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 or 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 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 but steadfast. Can be overpowering depending on the brightness. 

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.

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.

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? 


We adhere to GDPR using double-opt-in.
Your personal information will of course and as always be respected and not used for any other purpose than to send you this newsletter.
Are you interested in
Where did you hear about us
How would you prefer to be contacted