Spending a bit of time behind choosing colours for your website, which are just perfect, can provide many benefits.
Colour is everywhere around us and affects us in many ways. It influences our perceptions, physiological/emotional reactions and behaviour.
As a website owners, besides making our sites look good, colours can help us create a desired user experience and increase their trust, satisfaction and interactions. In the online world, where confidence is low and fragile, colour can play an important role in sending positive signals to users.
I’ve done a bit of fact-finding on the subject and would like to share what I’ve learnt. The insights are based on a few research studies and articles (listed towards the end), which I thought were particularly useful.
Let’s look at some questions that help cover different perspectives on colour.
What colours do people prefer/favour?
Blue is by far the most preferred colour, followed by green.
Orange, a colour which I love, is not liked by many people.
There are some interesting differences in colour preferences based on gender. Most notably:
- Men like blue more than women.
- Women like purple but don’t like grey.
- Men don’t like purple.
What messages and associations do colours convey?
Are there cultural differences in the way people perceive colour?
Yes. While there are many similarities, colours can mean different things, for people in different countries. Many of the studies on colour preferences and associations are keeping Western societies in mind and therefore depending on your target market, it could be important to consider cross-cultural/local nuances.
One study I came across, looked into the appeal of colours in a few countries. Just to give you a flavour of some of the observations:
- Canadians have a stronger preference for a grey colour scheme for an electronics e-commerce site when compared to Germans and Japanese. Germans, on the other hand, show a stronger preference for a blue colour scheme for this type of website and appear more sensitive to jarring, unnatural or unappealing colours.
- For Germans, prolonged exposure to colours was perceived as unpleasant and resulting in ‘hostility’ toward the website and waning trust. They prefer more neutral/bland colour schemes, including just black and white for example.
This illustrates how specific and nuanced cultural differences can be.
A great representation/overview of colour associations across cultures, has been compiled by Information Is Beautiful, using data from various sources.
To choose a great colour scheme for your website, what technical things do you need to know?
I found it quite interesting to learn about some of the terminologies and technical aspects of colour. As non-designers we don’t need to know too much about all of this stuff but I think a basic understanding can help us improve the way we choose colours for our websites.
Traditionally, colours are shown in the form of a wheel.
- The three primary colors are red, blue and yellow. These are the base colours that make up all other colours on the wheel.
- Mix the primary colours together, and you get the secondary colours, which are orange, green and purple.
- Tertiary colours are comprised of the middle colours like yellow-green and blue-green. They are created by mixing a primary and a secondary colour.
- Colours are often referred to as warm (red, yellow and orange), cold (blue, green and purple) and neutral (black, white, grey and brown).
- For website design, each colour has a specific code, which can be in two formats RGB (Red-Green-Blue) and HEX. For example, black is RGB 000, or HEX #000000.
Hue is like another word for colour and the properties of hues are described using the following terms:
- Chroma: Purity of a colour. A hue with no black, white or grey added to it, has a high chroma. Adding black, white or grey reduces chroma levels.
- Saturation: How strong/intense vs. weak/faded a colour is. Higher the intensity, more the saturation.
- Value: How light or dark a color is. Lighter colors have higher values. For example, light blue has a higher value than navy blue.
- Tones: Formed when grey is added to a hue.
- Shade: Formed when black is added to a hue.
- Tint: Formed when white is added to a hue.
There are a few standard and pre-defined colour schemes that are used often. These are especially useful for non-designers. The schemes are created by first selecting the hue(s) you will use and then creating a palate by varying the properties (shade, tint, value, etc.)
Monochromatic: Schemes which use the same hue.
Analogous: Using colors that are next to each other on the colour wheel.
Complementary: Created by using colours from opposite sides of the color wheel.
Split complementary: Schemes made by using colours on either side of the hue opposite your base hue.
Triadic: Formed by taking hues equally spaced around the color wheel.
As a ‘non-designer’ how can you use all of this information to choose your website colours and use them properly?
- Choose 1-3 options for the primary colour of your website, based on the associations and meanings you want to convey. [Once I decide on the primary colour (e.g. red) I still find it hard to pick the exact type of red that I want. To help with that I look at a few websites and/or pictures and if I like a particular type red, then I use Pictaculous or Color Combos to get the exact colour code].
- If relevant, do some research to take local/cultural preferences into account and make sure you’re not committing any blunders.
- Enter the primary colour(s) into a colour scheme generator (like Color Scheme Designer and Color Explorer ), which will create colour palates using several schemes.
- Pick 3-5 colours from a palette you like, to use on your website. A good number of designers recommend using just 3 colours.
- To decide on how much of each colour to use, you could try the 60 – 30 – 10 rule , which is often used by interior designers and works well in web design also (60% will be the primary color of your site and set the overall tone; 30% should contrast with the 60% to create a visually striking effect; 10% is an ‘accent color’ which should complement either your primary or secondary colour). Also keep in mind that it’s safer to make either the 60% or 30% a ‘neutral’ color (white, gray, beige, black) and that there should be enough contrast between your post background and text.
- To make things easier and get some inspiration, have a look at examples of how people have used your primary colour, or your colour combination successfully. Type something like “examples of websites with XYZ colour scheme” into a search engine and many examples should pop-up.
Play around with the colours, till you find a combination you really like. Make sure to get feedback from some other people as well. , especially if you’re anything like me and your design sensibilities are not the best 
.
Good luck and I hope this helps you choose the perfect colours for your website!
Sources & References:
- Colour appeal in website design within and across cultures: A multi-method evaluation.
- A Look into Color Theory in Web Design.
- JoeHallock.com.
- Birren Faber, Color Psychology and Color Therapy, Rockport Publishers, 2001.
