The use of different colours plays an important role in the design of a website, going as far back as the identity of a brand, becoming more significant than an aesthetic aspect of the design. 

If you're designing a website or in the midst of branding, it's important to set aside personal preference on colour and delve into research of colour psychology, so you can enhance the user experience for your target audience. In this post, we'll get you started on some of the basics.

The colour wheel
The colour wheel

What is colour psychology?

Colour psychology is the study of how colours can affect human behaviour and emotions. Many factors can come into play in the effects of a particular colour on an individual, such as their culture, expectations, the context and the brand as a whole. This can make definitive blanket statements about the effectiveness of one colour over another impossible to make; however knowledge of the general theory can be a useful tool when creating a new website.

Colour associations

Some colours have near universal mental associations and physiological responses due to how they appear in nature. For example, the sunlight can appear warm during the day which can lead us to associate red, orange and yellow with energy and action; cooler tones in the evening and night can lead us to associate blues and greens with calm, restfulness and thought.

Bright, saturated colours also have associations with youth culture and contemporary companies, whereas darker, more subdued colours inspire feelings of trust, experience, and sophistication.

These responses are also shaped by cultural associations - for example, white can symbolise purity and cleanliness in Western cultures, whilst in China it represents death and mourning.

Some common colour associations in Western cultures:

  • Red - energy, excitement, action, passion, love, danger, anger, warning, heat
  • Blue - masculinity, trust, authority, conservativity, calm, corporate, depression, sadness,
  • Green - luck, growth, wealth, fertility, nature, environmentalism, go, jealousy, greed
  • Yellow - joy, sunshine, hope, optimism, warning, cowardice
  • Pink - femininity, romance, nurture, softness
  • Purple - royalty, spirituality, wealth, femininity
  • Black - power, sophistication, death, mourning
  • White - cleanliness, purity, peace, simplicity, blankness

Whilst these colours associations can be challenged when used in a particular context, care should be taken to base colour choices on the brand identity and preferences of the target audience. For example, bright pink might be an unlikely choice for a very traditional law firm targeting conservative clients; however it might be bold choice for a modern law firm aiming to disrupt the market.

Colours and calls to action

Colours associated with energy and action, such as red, orange or yellow tend to be inviting to click on and take the next step. This has been the subject of much research and A/B split testing, with most results indicating higher conversions with a red/orange button over a green one.

The answer, however, is far more complex than suggesting that any and all calls to action should be red or orange. More important than the exact hue of your button is the styling and the contrast to create a strong visual hierarchy within the context of your page
Reserving one high-impact colour or style for calls to action can be a great way to make them stand out from the rest and reinforce to the website visitor the colour they should look for.

A bright red button for example, will have far more impact when placed on a white background than it would on orange, where the contrast would be far lower.

Example of colour contrast in calls to action
Which colour does the red button stand out best on?

Summary

The use of colour psychology in visual identity and website design is an elaborate process which should be carefully planned out and researched, even before creating any concept. The representation of your brand to your target audience could be the difference between encouraging conversion with the use of colour, or creating a dissociative experience causing users to leave, without engaging with your website.