Colour psychology is everywhere. Official uniforms are often blue; inspiring calm and confidence. Prison cells are often painted in soothing colours to reduce aggression and promote peace. Hospital wards are often green to promote calmness among patients. The technique is not new but its use within web design is. Colour psychology has been both engaged with and maligned in equal measure, but having been accepted and used readily in product design and marketing, its use in website design is inevitable!
Industry papers published (Patel, 2008, Singh 2004) show that colours affect between 62 & 90% (depending on the study) of purchasing behaviours, yet the science is still sidelined by many website designers as a pseudo-science. The results suggest otherwise.
Within website design, colour is used primarily for three things. Firstly, it must look good. Secondly, it must hold the readers’ attention. Thirdly, it must subconsciously draw the reader towards certain places on the website, normally a call to action. Following a link to a poorly presented, unprofessional looking website will result in immediate bounces regardless of the buyer’s intention. A good colour scheme is the first step to prevent this.
How to use colour psychology in your website design
In general terms, colours trigger behaviours. More specifically, colours entering the eye are communicated to the hypothalamus, a part of the brain which sends signal direct to the pituitary gland and in turn to the thyroid gland, which is responsible for the release of specific hormones. These hormones contribute to behaviour. The complexity of the human body means that the science of colour psychology is more complicated than the ‘purple instructs purchase’ rules of colour use in website design that some web designers would have you believe.
Studies into colour psychology usually agree that the reaction to colour is a personal trait, based on personal experience, taste and culture. There are numerous studies (most notable Ciotti) that show it is the perceived ‘match’ of a colour to a product that sees international success for a colour scheme. As an obvious example, a pink martial arts gym might not generate the right image for attracting new fighters.
However, cultural differences in the use of colour must not be underestimated. The most straight-forward evidence of this is in grief. In the Western world, it is most usually black that signifies grief and mourning, whilst in many Eastern cultures, white conveys the same message. Western brides wear white, Chinese brides wear red. An interesting academic point maybe, but with little practical value to website design. The Eastern use of the colour red however, which signifies luck and financial success, provides a more useful insight into those markets. Knowing your main markets and their specific colour meanings is vital.
Colour Psychology – a useful tool in web design?
Regardless of your scepticism towards the subject, colour psychology is naturally used already; if you are expecting a child, the discussion for nursery wall colour undoubtedly starts on gender lines, with blue suggested for a boy? Pink for a girl? This is a very simplistic use of colour psychology, but highlights both the natural lure towards certain colours for certain settings as well as natural gender or cultural preferences towards colour.
Not that all colour psychology is instinctive. Pink is a feminine colour, but in studies, it is not often picked as a favourite colour by women. Instead, blue (35%), purple (23%) and green (14%) usually rank at the top, whilst orange almost universally comes in as the least liked (around 33%). A quick glance at e-commerce sites aimed at the female demographic will quickly confirm an influx of blue, green and purple with rarely a hint of orange or brown.
Men have also been shown to react positively to blue and green, whilst rarely showing a preference for orange. The same as women? Not entirely. Purple is a negative colour in marketing to men, who also lean towards dark colours, especially black. These generalisations are just that, generalisations. There is no exact science and little statistically significant data to prove that colours cause behaviours. Colour psychology has much to do with personal experiences and preferences, but general guidelines can certainly be found in a wealth of studies and articles online.
Specific Colours, specific results?
So that settles it? Blue with some green? Colour psychology for beginners articles lavish blues with praise as the colour of trust, loyalty and order; the colour of a corporate world. Blue conveys transparency and peace. Think PayPal, Facebook or big banks. However, the evolutionary association with blue as the colour of poisons in food means that it doesn’t work in the food industry! Such is the complexity of the science.
The more accepted colour of poison and warning is yellow. Health & Safety signage is yellow, poisoned animals often have yellow streaks, it is a colour that triggers alertness and danger. Emotions not particularly susceptible for a free flowing revenue stream… unless the required market is for those that seek danger via adrenaline sports. Know your market, find your colour scheme. Yet the accepted wisdom in colour psychology is that yellow triggers feelings of joy and excitement, and is therefore used throughout the entertainment and toy industries. These industries wish to communicate excitement and energy, rather than the solidity of blue financial services.
Some colours are more obvious in their use. ‘Green’ is not only a colour, but an ideology to many. Used intuitively in environmental or outdoor websites, green is actually a colour used by psychologists in increasing creativity. Some use green in all their calls to action, seen as trustworthy and positive.
Orange, a bright and ‘fun’ colour, encourages physical activity, competition and mental stimulation, and is used most often with games, sports or activity sites. Not only that, it can be used to create a sense of urgency – especially in time limited offers or promotions. Buy! Now! Hurry! When overused however, orange is very quickly transferred in the mind to denote cheapness or a lack of quality. If you are going to use bright, attention grabbing orange offers, be sure to use it sparingly, not just to increase the effectiveness of the colour, but to avoid tarring your product as cheap.
Black is an interesting colour. Used well, it can be elegant, sophisticated and luxurious, as can be seen in its use in many high end products, especially luxury cars. Used badly however, black becomes seedy and cheap. Black can be overwhelming too. This shows that there is no one-stop solution to getting the correct colours. Yes, colours do suggest certain intangible qualities. These qualities have been tested and confirmed through both academic and commercial tests, yet they must still be used correctly in order to glean the desired effect.
Using colours for effect in website design
Those are what the colours themselves mean, or can imply. How to use them? The Restorff Effect, or isolation effect, states that any item in isolation is likely to be more dramatic and be remembered more vividly than an item against a confused background. Simple common sense? It may be, but it is not remembered when designing most websites and their calls to action.
The Restorff effect also brings white into focus. Whether it is strictly a colour or not is not a relevant argument here. White creates space and reduces clutter. A white background focusses attention onto the use of colours elsewhere. It allows a colour to draw attention.
Calls to action must stand out. They must grab the attention and draw the reader. This is why many authors on the subject firmly suggest that bright, primary colours work for calls to action whilst darker colours produce statistically significant reductions in conversion.
Whilst colour is important, visual clutter is best avoided. The use of colour psychology should be targeted. Use it only where the site will benefit from a distinct draw.
Three strategies for using colour on your website.
There are three main strategies in using colour for web design; monochromatic colour schemes, complimentary colour schemes and triple colour schemes.
Monochromatic colour schemes are clean and professional. Using different shades of a single colour, a monochromatic scheme gives an uncluttered, smooth appearance, where a single colour dominates the feel of the page. Variations are used to draw the eye or engage with specific features.
Complimentary colour schemes purposefully uses the contrast of colours to influence the reader, but risks causing colour clutter and confusion, meaning that the copy, headers and call to action can be lost in a sea of colour.
Finally, and probably the most popular colour scheme used by web designers is the triadic colour scheme. This allows a compromise of the above schemes, where simple, uncluttered design is moulded with a sense of contrast, highlighting specific, valued parts of the page. In this scheme, many advocate the 60:30:10 rule. Use one colour 60% of the time, the second 30% and the final 10%, the important calls and actions, a third.
Do not contradict your brand colours. KissMetrics have shown that colours increase brand recognition by some 80%, so protect your brand identity – stay true to your brand colours. In testing, a green call to action may well work better than an orange call to action, but this does not mean that a green button is better than an orange in all situations.
Context is key. Set against a clear brand image, and colour scheme, the ability to test small splashes of colour against an established website design may bring surprisingly large financial gains. Be sure to test!