Colours on your website

You don't think about it every day, but every colour on your website has a meaning. Subconsciously, we associate a colour with a feeling, with an emotion. In this website, you will find the colour yellow as a supporting colour to the predominantly black and white. Yellow is a colour associated with something positive (besides Easter, of course, but that's a whole other story).

When I analyse a website, I mainly look at wrong use of colours. Is that possible? Yes indeed. For instance, red quickly makes us think of an error message, and green is that fine colour that accompanies a successfully submitted form.

It's not set in stone. But check the notifications on your website during and after a form is submitted. Chances are they are roughly in these colours:

Actually quite logical, right? Just think of a traffic light. They are the colours we are used to. They work that way on your website too. If, to emphasise a text, you turn a sentence red, it will trigger a reaction. Your brain sees an error message. So red (and shades of red) as a text colour is something you want to avoid.

Positive and negative associations with colours

Let it be clear that a colour can have both positive and negative associations. I mentioned positivity as an association with yellow, but you might also recognise the overexcitement (nervousness) association. Both Zwitsal and I chose to gamble on the positive association.

Overview of colour meanings

In many cases, of course, it is a combination of two or three colours, but usually one predominates. Do you understand why the companies above chose those particular colours in their logo?

Sometimes you have to "think around". You can consciously choose cheap (orange) and or the overpricing of yellow. That Jumbo commercial with Snollebollekes? Right. Rabobank uses blue and orange. Wibra has a yellow/red logo, as does Lay's. Sometimes certain combinations are chosen precisely for the combination of positive and negative attributes.

Complementary colours

Colour psychology can sometimes go far. You choose your house style colours based on what you want to radiate. You go for recognition. That sometimes makes you dependent too. You can read here how companies did or did not change their logo and sometimes colours (and sometimes changed back). In most cases, the colours still provide recognition even if the logo changed completely (see BP, Converse).

On a website I look always to colour use. One of the most common mistakes is taking the house style too far. It's nice that green is your house style colour, but if you make everything green, nothing stands out. Especially your call-to-action, the action on the page that you hope people will do (e.g. click on a button), should stand out.

One way to do that is to use a complementary colour for that button. Then you can be sure the button will stand out!

Complementary colours can be found in the colour wheel. The colours that are opposite each other are complementary. So if you have a predominantly blue website, an orange button will stand out the most. Yellow is opposite purple.

Just a side note: It doesn't have to be so black and white, of course. Your own opinion and preference counts too.

I definitely wanted dark yellow, but definitely not purple. In the colour wheel, blue sits opposite those transition colours from yellow to orange, and I chose to use blue for the first button on my homepage. They are guidelines, not laws.

A very important note here is that complementary colours are together, are not necessarily a good combination. If you use one colour as a background, and the other as a text colour, unreadable text may result:

Doing it now: check out your website!

The main lesson is that it's okay to be critical:

1. The look and feel of your logo and corporate identity. Do the colours match the image you hope to have or achieve?
2. The various call-to-actions on your website. Do they stand out enough? By using a complementary colour, can you make the most important elements on your site stand out even more?

I would just do it.

---

Sources:
linku.co.uk/colour-psychology
colourharmony.co.uk/colour-and-significance
colour-affects.co.uk/psychological-properties-of-colours

Handy:
Colour picker
Colour generator