12 colours and the emotions they evoke

Jerry Cao offers a web designer's guide to conveying emotions through colour.

Image courtesy of Brett Jordan, www.flickr.com/photos/x1brett/

Poetry can make people swoon, and a shocking image can enrage people to action. But one of the lesser-known, but no less powerful, ways to invoke emotion is simple, everyday colours.

Discover these outstanding uses of colour in branding

The psychological effects of colours have been studied by scientists since the Middle Ages, but you only need to look at the world around you to see – and feel – their impact.

Every colour elicits a different and unique emotional response in the viewer, and the clever web designer (and any visual professional in that regards) will know the effect of each colour, plus how and when to use each.

While the discipline of colour theory is broad, this article will teach you the fundamentals in a single, quick-reference source. If you'd like to learn how to use colour and contrast to make strong first impressions on users, check out our free e-book Web Design for the Human Eye.

But before we delve into the emotional nuances of 12 separate colours (then explain a quick case study), but we need to first make a quick note about vibrancy.

A note about vibrancy

Simply put, a colour's vibrancy is how dark or light it is.

The tricky part about vibrancy is that, just like each individual colour has its own properties, so does each shade of the same colour.

While light green and dark green have more in common than green and purple, they will still have smaller, more subtly different effects on the user.

Image courtesy of Jocelyn Kinghorn, www.flickr.com/photos/joceykinghorn

Below, we'll explain all the noteworthy differences between a colour's shades, regarding their impact on web design.

As a general rule, though, brighter shades tend to be more energetic, while darker shades more relaxing. The brighter shades of calls-to-action attract the eye, while the darker shades in backgrounds help create an immersive effect.

Picking the right colour is not enough – you must also consider hue. Keep this in mind when reading about each colour below.

01. Red

  • Passionate, Aggressive, Important

As a dominating colour, red adds gravity and heightened awareness – quite literally, as the colour increases blood circulation, breathing rates, and metabolism. Red can take on a variety of meaning, associated with both love and war, but the unifying factor in all meanings is a sense of importance. Think of the red carpet.

Red is a colour best used cautiously. Its knack for attracting attention makes it a priceless tool for designers, but excessively it will inhibit relaxation. Lighter shades emphasize the energetic aspects of red – including youthfulness – while darker shades emphasize power, and even durability, such as a brick wall.

Image courtesy of www.playtika.com

The landing page for the game design company Playtika has an aggressive but potent flair. Playful and stimulating, the red suits the cheetah logo, a powerful icon itself, softened by the cartoonish qualities and anthropomorphic smile.

02. Orange

  • Playful, Energetic, Cheap

Sharing red's energizing aspects, but to a safer degree, orange is a good way to add excitement to a site without severity. It is generally playful, and some claim it creates haste and plays on impulse. It can even signify health, suggesting vitality and vibrance.

Image courtesy of Epic Creative Agency

The interactive newsletter for the Epic Creative Agency is written and drawn in orange, emphasizing their playfulness and youthfulness and coinciding with the fun themes and content of the art.

03. Yellow

  • Happy, Friendly, Warning

Yellow is a strange colour: it is often associated with happiness, but also activates the anxiety center of the brain. Like red and orange, it's able to stimulate and vitalize – it's the colour of warning signs and taxis – but use bright yellow sparingly because of the potential negative connotations.

Lighter shades play on the happiness aspects, reminding users of summer and the sun. Darker shades, including gold, add more weight and give a sense of antiquity.

Image courtesy of Lunar Gravity

The yellow background in Lunar Gravity creates a light-hearted mood, accentuated by the quirky animations and playful scrolling effects. The anxious side effects of yellow are muted by the colour's softer tone, keeping all the good aspects without the bad.

04. Green

  • Natural, Stable, Prosperous

Green mostly represents the environment and outdoors, for obvious reasons, making it the clear choice to suggest nature and an organic quality.

As the bridge between stimulating warm colours (red, orange, yellow) and calming cool colours (blue, purple), it is the most balanced of colours, lending it an air of stability. It's also a popular choice as an accent or for calls-to-action because it stands out, but more softly than the warmer colours. In Western Culture, it also represents money and financial safety.

Image courtesy of Massis Tea

Massis Tea plays on its natural qualities with the green scheme for its site. The green top navigation bar, green logo, and photograph of greenery all work together to accents the brand's ties to nature.

05. Blue

  • Serene, Trustworthy, Inviting

As we first described in Web Design for the Human Eye, blue is one of the most popular colours in web design – and for good reason.

You see blue on a lot of websites because, to put it simply, it is the colour of trust. Blue is the colour of calm and serenity, and as such inspires security and a feeling of safety. For this reason, blue is a colour often used by banks: CitiBank, Chase, Capital One. However the calming effects also make blue a friendly and inviting colour, which explains its adoption by Facebook and Twitter.

As if that weren't reason enough to use it, blue is also incredibly versatile; its vibrancy has more drastic effects than other colours. Light blue is the colour of water and the sky, so it generally has a refreshing and free feeling – even energizing if bright enough, but still retaining that reliable calm.

Image courtesy of Evolve Wealth

Darker blues tend to be more somber, heightening the security aspects, which makes them an excellent choice for professionalism.

All this comes at a small price, though: blue shouldn't be used for food-related sites. Because blue foods aren't common in the wild, studies show that the colour actually acts as an appetite suppressant.

Trust is essential for financial advisors like Evolve Wealth, so most of their site is designed in varying hues of blue.

06. Purple

  • Luxurious, Mysterious, Romantic

Long associated with royalty, purple creates an air of luxury, even decadence. Using a purple dominantly is a quick way to create a sense of elegance or high-end appeal, even if your product is budget-minded (an “expensive” effect that's quite the opposite of orange).

Lighter shades of purple bring to mind spring and romance, especially lavender. Darker shades of purple add more mystery, and can even symbolize creativity. Darkening the shade will also turn the romantic elements more sensual.

Image courtesy of WooView App

With its ties to personal wealth, WooCommerce chose purple as the colour to represent their WooView app, playing on themes like royalty and panache that fit the function of checking how much money you're making in real time.

Next page: six more colours...