The Importance of Colours

We all know that we are influenced by colours because they can invoke certain associations hence feelings, and make us like or hate something, buy or not, etc. - there's plenty of research about it.

Colours have meanings. However, color associations and meanings vary from culture to culture. And all the more true for the web.

Sibagraphics ☍ have a good piece of comparison of different colours across cultures and religions: Europe, USA, Asia, China, East Indies, Hinduism, Islam, Feng Shui, Catholocism, Judaism, etc. Mixing, combining certain colours can boost specific culture, religion or gender associations, while avoiding certain colours and combinations of colours can neutralise inherent negative cultural connotations.

Web design which is sensitive to its target audience achieves the best results. Web design guidelines have borrowed from other areas of life.

How many colours?

It is hard to give an exact answer to this question, but in general one can say that the risk of using too many colours is greater than the risk of using too few.

Too many colours will make the page feel too busy and it usually makes it harder for the viewer to find the information he or she wants. It is also more tiring to the eyes.

A page with too few colours, on the other hand, risks being seen as a bit boring, but this need not always be the case.

One commonly used rule in these matters is to use three colours.

Primary colour:
This is the main colour of the page. It will occupy most of the area and set the tone for the design as a whole.
Secondary colour:
This is the second colour on the page, and it is usually there to "back up" the primary colour. It is usually a colour that is pretty close to the primary colour.
Highlight colour:
This is a colour that is used to emphasize certain parts of the page. It is usually a colour which contrasts more with the primary and secondary colours, and as such, it should be used with moderation. It is common to use a complimentary or split-complimentary colour for this.

Now, you have to make your choices. Mind that the same color looks totally different when used as 1px border, 100x100 block, and full background. And bear in mind your audience - European, North American, Asian, etc.

I try to follow the guidelines when designing. It may seem, to some people, a bit too much of a trouble, but it's my choice.

Here are some things of mine I have adopted for an EFL project. Look at the screenshot below and my implied meaning. Audience is primarily thought of as European.

level 1 screenshot

Grammar section
Baby blue background, darker blue navigation
I'd like to convey: Be serious about grammar; and You can trust grammar.

Reading section
Baby/Pale green background, darker green navigation
Reading a screen is tiring for the eye, so I'm conveying: (green relaxes the eye). Calm, easy read.

Vocabulary section
Pale gray background, darker red navigation
Vocabulary is plenty; you need energy, so I use red to "energize".

Listening section
Pale yellow/corn, "gold" navigation
I want to convey: Be "sunny" about listening, cheerful, and optimistic.

All exercises are:
Black text on white background, with a black border - the association is with text on paper.

Now colour-code your pages. Good luck!



Tweets Collection