Empathy in web design: How to stimulate emotions using colour

Red, blue, teal, or topaz? All colours can create emotional reactions – we explore why colour is important when it comes to web design.

colour psychology and web design

Why does colour matter when it comes to web design?

To most people, colour can often seem like an afterthought – something based entirely on personal preference. If the managing director likes orange, orange is what colour the logo has to be. But there’s more to colour than meets the eye. Colour can make people sad, help build trust, and vitally, reflect the ethos of a brand.

What do different colours mean?

what colours mean in web design

A colour is a colour right? It’s personal preference, surely? Well, maybe not. Certain colours have emotional and societal connotations that can impact the way people feel.

Here’s a few examples of what connotations certain colours have in the western world:

RedRed is associated with youth, boldness and enthusiasm. Some of the biggest brands in the world use red logos, with Coca-Cola, Nintendo, Lego, Virgin, Canon and Kellogg’s to name a few.

Yellow There’s lots of preconceptions about yellow – there’s an urban myth that babies cry more in rooms painted yellow for example – but this hue has a plethora of complex and contradicting connotations. Yellow is strongly associated with danger (think signs on power stations, wet floor signs), but it’s also representative of vibrance, positivity and optimism.

Blue– Blue is a popular choice in web design, as blues are closely associated with peace, calm, serenity and trust (explored later in this post).

Green Greens are typically associated with nature, and conservation of the earth. Green is a perfect choice for a health food brand for example, as this colour is steeped firmly in concepts of health, growth and nourishment.

Black and white– Logos devoid of colour, such as Nike, Puma and Apple encourage feelings of clarity, neutrality and balance.

Black and white logos can often be a good idea when photography is the main strength of a brand (for example an events company), as this lets photography make the statement rather than competing for the eye’s attention with a brightly coloured logo.

Purple/pink Pink and purple logos are associated with creativity, imagination and youth – but not, it should stressed, limited to products aimed at women. This is a lazy stereotype and a study has shown that neither gender has a preference to pink, with blue being stated as the most common ‘favourite colour’ of both men and women.

Colour psychology in different cultures

colours and emotions in web design

It’s sometimes easy to see the world under western eyes. After all, most of the people reading this are likely to live in western countries and share many of the same cultural reference points.

But with the lines between east and west becoming ever more blurred and many brands seeking a global reach spanning continents and cultures, it’s worthwhile to know how something may be interpreted different in another part of the world.

For example, the colour white under western eyes may be associated with purity, cleanliness and innocence, while an eastern perception of white is more distressing, as white represents mourning and sadness. In the middle east white is also perceived as representing mourning, much like black in the western world.

It’s not just the east and west that can have massive disparities between their perception of colour. Sometimes within a single continent there are a myriad perceptions for a single shade.

Yellow in the UK can typically mean danger, liveliness and positivity, yet yellow is France is associated with jealously, and in Greece yellow is considered with sadness. In the eastern world yellow is connected strongly with the male gender (just like blue in the western world).

How to build trust using colour

paypal logo

It’s possible to create the feeling of trust using the colour blue. This is part of the reason that blues are so commonly seen in logos and brands relating to financial services (like PayPal, CitiBank, Barclays, RBS, Visa, and Bank of America).

The color blue is a color of trust, order, calmness and serenity. It’s often is described as peaceful, tranquil, perhaps due to associations with the ocean. Blue is also closely associated with security and safety.

This is perhaps why so many brands that put trust at the heart of their ethos (like financial businesses) choose blue.

How to create colour palettes that work together in web design

colours in web design

Sometimes, while we’re working out the right colour scheme for a website, we’ll get inspiration from the Adobe Colour Wheel – a brilliant resource which displays a range of colour collections that work well together.

Whether it’s subtle pastel tones that would suit a corporate site or a vibrant selection of tropical hues for an exciting new attraction, this resource collects a bunch of complimentary colours that can form a coherent, captivating colours scheme for a website or brand.

For everyday inspirations there’s also the Google Chrome plugin Palettab, which opens up with a new colour palette every time a new tab is opened.

Use colour wisely

Like anything in design, rules are there to be broken. Just because most people associate green with the natural world, doesn’t necessarily mean green is always the best choice for a branding job for a new health food shop. Subverting the traditional emotions associated with colours can be effective way of standing out and becoming a disruptive and recognisable brand within an industry.

Ultimately, as long as colours are carefully considered and backed up by studies and research into the emotional response created by them, any colour scheme can be a valid, effective choice.

A Marvellous blog by Simon

Simon co-founded Marvellous in 2005, with the aim of building a dynamic digital agency – combining the latest technology with cutting-edge visual design.

See all our Marvellous blogs