Colours do not only give a pleasant appearance to your website but they also talk to your visitors in unconscious ways. Your visitors can associate certain meanings and are even emotionally evoked by the colours you use on your website. Researchers have found that colour cans actually a primary reason why they make a purchase from your website.
You may ask –
- Why fast food companies like Coca Cola, McDonalds, Pizza Hut and KFC always use red as the primary colour on their websites?
- Why IT companies like Microsoft, Infosys and Dell use more of blue colour on their pages as well as logos?
- Why black is never missed by brands like Nike, Adidas and Reebok?
- Why pink is always seen on female fashion magazine websites like Femina, Vogue and Elle?
- Why Amazon uses orange colour on their marketplace?
If there are common patterns then there are common reasons. Can you tell which the most used colour for company logos is? It is Blue – the safest colour of the world to use on websites.
How colours work on your website?
So what functions do colours play on your website? Colours communicate your brand image to your website visitors and several different ways.
Create a mood: Every colour has some psychological impact on the viewer and brands wants this impact to match with their objectives and offers to engage consumers on the web pages.
|Colour||What it says|
|Red||Passion, Energy, Danger (HackerNews), Aggression (Malboro)|
|Orange||Fun (Nikelodeon), youth (Fanta), innovation (Google in Logo), affordability (Amazon)|
|Yellow||Warning (traffic signs) , friendly (UPS), optimistic (Best Buy)|
|Green||Ethics, environment (GoFresh), freshness (Dettol), peaceful (Animals Planet)|
|Blue||Professionalism (LinkedIn), serious(Microsoft), sincerely (Infosys) , integrity, calmness|
|Purple||Loyalty (Halmark), Luxury (The Leela), creative (Yahoo)|
|Black||Power (Formula 1), sophistication (Mercedes)|
|White||Simplicity (Apple), purity (Dove), cleanliness|
|Brown||Masculine, rural, outdoor|
|Pink||Fun (BabyOye), female(Vogue)|
|Grey||Balance (Wikipedia), calm (Apple)|
Create associations: What makes choice of colour combinations for web designing difficult is the fact that a website is exposed to the entire world that is formed out of combinations of variety of geographical regions and cultures. These colours may talk one language in one place and other in a separate geography. For instance, a single white shade can be associated with purity in India but death in Japan. If you use orange in India, it may reflect celebration or of wedding rituals which may go well with a luxury garments brand selling expensive Lehengas but when you use orange colour in USA, it says that your product is inexpensive.
Some colours are safe to use and have similar meanings in almost all countries such as red signifying joy or celebration and blue considered professional throughout the world.
Some colours in some regions may even have crazy connotations and thus, must be avoided. For instance, rainbow signifies homosexuality in USA. In China, green represents a woman cheating on her man.
Enhance content readability: Use of sharp contrasts between background and foreground such as Newsvine Green over Magnolia yellow enhance readability of text to a great extent. A webpage using monochromatic colours are more readable than those using bright colours. And when complementary colours are used, the readability is even more enhanced. High contrasts on the other side can actually reduce the readability of your website content. How often do you think of readability when deciding colours for your website?
A big bold font text put over a very simple graphic can highlight the message making it look prominent without affecting readability or making it appear gaudy.
Improve legibility: Use of different colours and fonts on your text may sound like an exciting experiment to one but in practice, more variations get you less ratings. A font colour can affect the legibility of your text. Your website should have a consistency in the font colours and you may use variations only when highlighting links. When choosing links, one must ensure that they go well with the background and not blend into it appearing less pronounced.
Figure 1: Worst use of font colours
Establish consistency: Consistency in the use of colours throughout different platforms of promotional formats you use is essential as your users would start to associate your brand with some quality in response to the use of colours. What if you use one theme on website, another on hoarding, yet another on packaging and logo is a completely different package? Will your audience not get confused?
Think one the brand – BMW – can you see a consistency in the use of colours in different advertising formats?
Figure 2: BMW Digital Ad
Figure 3: BMW on Hoarding
Figure 4: BMW in Magazine Ad
Figure 5: BMW website
Increase accessibility: While choosing colours for your website, do you consider that some of your visitors can be colour blind? Some simple considerations in the choice of colours can actually help them long way such as:
- Use of bright and strong contrast between background and foreground
- Instead of using colours in special areas of the page or picture such as graphs and maps, use different shades of same colours
- Use blue, black, white or yellow colours to create differentiation