12 colours and the emotions they evoke (2022)

12 colours and the emotions they evoke (1)

Did you know that one of the lesser-known ways to invoke emotion is through colour? It's well-known that poetry can make people swoon and a shocking image can enrage people into action, but the right use of colour can be equally as powerful. You only need to look at the world around you to see, and feel, its impact.

Colours elicit unique responses in the viewer, and a savvy web designer (or any visual professional, actually) will be well versed in the effect of each individual colour, plus how and when to use each.

The discipline of colour theory may be broad (find out more about colour theory here), this article will teach you the fundamentals in a single quick-reference source. However, before we delve into the emotional nuances of 12 separate colours, we need to add a quick note about vibrancy. Want more? Explore these uses of colour in branding.

12 colours and the emotions they evoke (2)

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.

Below, we'll explain all the noteworthy differences between a colour's shades, and consider their impact on web design. As a general rule, though, brighter shades tend to be more energetic, while darker shades feel more relaxing. The brighter shades of calls-to-action attract the eye, while the darker shades in backgrounds help create an immersive effect.

Now on to the impact of different colours on viewers...

01. Red

12 colours and the emotions they evoke (3)

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 meanings, 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 used excessively it will inhibit relaxation. Lighter shades emphasise the energetic aspects of red – including youthfulness – while darker shades emphasise power, and even durability, such as a brick wall.

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

02. Orange

12 colours and the emotions they evoke (4)

Playful, energetic, cheap

(Video) Color Psychology - How Colors Influence Your Choices and Feelings

Sharing red's energising 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.

Creative agency Epic (opens in new tab) uses orange as the highlight colour on its website. The choice emphasises the team's playfulness and youthfulness.

03. Yellow

12 colours and the emotions they evoke (5)

Happy, friendly, warning

Yellow is a strange colour: it is often associated with happiness, but also activates the anxiety centre of the brain. Like red and orange, it's able to stimulate and revitalise – 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.

The bright yellow-dominated colour palette on the Post-it (opens in new tab) website is synonymous with the product itself. It creates an energetic vibe, and is instantly recognisable as that particular brand.

04. Green

12 colours and the emotions they evoke (6)

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), green 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.

The site for game Sanhok (opens in new tab) uses green to emphasise being outdoors and in the wild, with different subtle hues used throughout.

05. Blue

12 colours and the emotions they evoke (7)

Serene, trustworthy, inviting

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 and Barclays, for example, all use blue. 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 – and can be even energising if bright enough, while still retaining that reliable calm.

Darker blues tend to be more sombre, heightening the security aspects, which makes them an excellent choice for professionalism. Trust is essential for financial advisors such as Evolve Wealth (opens in new tab), so most of its site is designed in varying hues of blue.

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.

06. Purple

12 colours and the emotions they evoke (8)

(Video) How filmmakers manipulate our emotions using color

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 – especially lavender – bring to mind spring and romance. Darker shades add more mystery, and can even symbolise creativity. Darkening the shade will also turn the romantic elements more sensual.

With its ties to personal wealth, WooCommerce (opens in new tab) chose purple as the colour to represent its 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: 6 more colours and the effects they have on viewers

07. Pink

12 colours and the emotions they evoke (9)

Feminine, young, innocent

Pink is a specialist colour that won't work for a lot of websites, but will work perfectly with the right audience. Because most people interpret pink as feminine, the colour is popular for targeting female users. However, don't overdo the pink-femininity connection, or else you're walking a fine line between appealing to users and pandering to gender stereotypes.

Its links with childhood and with sugary treats give pink a sweet, sometimes innocent appeal (not surprisingly a self-perpetuating cycle). It is also traditionally used with love and romantic themes, alongside red and light purple.

Rental service Rentberry (opens in new tab)'s website uses pink as its key colour. In this case, it creates a soft, safe vibe, and intentionally distances itself from more corporate, traditional rental services.

08. Brown

Earthy, sturdy, rustic

While not a popular choice in web design, brown can, under the right circumstances, be effective nonetheless. As the colour associated with the earth and trees, brown can add an outdoorsy feel, maximised by a pairing with green. The tree connotations also give a sturdy and reliable feeling.

In web design, brown is often used in conjunction with wood texturing, giving the same old-fashioned and rustic atmosphere of a wooden cabin.

While tech websites are typically dominated by stronger, bolder shades, the microsite for B&O Play used brown to great effect. The muted tones suggest a classier, more human side to the technology on offer. Natural connotations also remain: wood and leather feature prominently in the hero video, while a marble effect is used in the background.

09. Black

12 colours and the emotions they evoke (11)

Powerful, sophisticated, edgy

As the strongest of all colours, black is often used only sparingly – such as for text – but it works quite well as a primary colour element (like for backgrounds). Much like purple, black adds an air of sophistication and elegance, and also mystery, though with much bolder confidence.

The heavy use of black for the Cartelle (opens in new tab) creative agency creates unquestionable impact on its homepage and subsequent animations.

10. White

12 colours and the emotions they evoke (12)

(Video) The colours:- The atmosphere:-The emotions they evoke✔️#shorts #trending #naturephotography #live

Clean, virtuous, healthy

Literally the opposite of black, white pairs well with just about anything, making it ideal as a secondary colour. In a supporting role, white draws out the elements of more stimulating colours, and can even guide your user's attention if you know how to use it (check out UXPin's Zen of White Space in Web UI Design (opens in new tab) guide to learn more).

As a primary colour, though, white gives off an impression that is both clean and chaste. White has that 'spotless' feeling that, for the right site, feels completely effortless. Its association with purity can make it seem virtuous, but also sterile and cold.

To soften this feeling of sterility, some web designers will tend towards an ivory or cream instead. These offshoots of white are softer and even less noticeable, but with the same minimalist and complementary aspects. They are the more comforting and less stark alternatives to white.

The shoe company ETQ (opens in new tab) uses a dominant off-white background to keep the users' attention where it belongs: on the shoes.

11. Grey

12 colours and the emotions they evoke (13)

Neutral, formal, gloomy

As the intermediary between black and white, grey exudes neutrality, or a lack of any particular sensation. However, in the hands of an expert, this intermediary position can be a powerful tool.

By varying the vibrancy, grey can take on the properties of either black or white – attention grabbing or repelling – to specific degrees. That means if black is too powerful for your design, try dark grey. If white is too bland, try light grey.

On its own, though, grey is rich with individual characteristics. It is the colour of formality, so sites aiming to look traditional or professional tend to favour it. It can also give a depressing vibe, as it's the colour of gloomy, rainy days. When used dominantly, it can be somewhat subduing, for better or worse.

You can tell the Italian furniture company Galvan Mobili (opens in new tab) uses grey well because you don't even notice it. The grey background gives a professional air, and keeps attention on the pictures and bright red logo.

12. Beige

12 colours and the emotions they evoke (14)

Accentuates surrounding colours

Beige may not be a primary colour, but it's worth mentioning because of its accentuating effects: it takes on the characteristics of the colours around it. While dull on its own, its enhancing effects make it a powerful choice as a background or secondary colour.

The use of beige for the aptly named Tokyo restaurant Beige Alain Ducasse (opens in new tab) creates a calming, comfortable backdrop to the more relevant elements such as clickable text and photos.

Read more:

  • The best colour tools for web designers
  • What is colour grading? Here's all you need to know
  • Web design tools: Work smarter this year

12 colours and the emotions they evoke (15)

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

(Video) Does Color Really Affect How You Act?

*Read 5 free articles per month without a subscription

12 colours and the emotions they evoke (16)

Join now for unlimited access

Try first month for just £1 / $1 / €1

Jerry was a content strategist at wireframing and prototyping app UXPin, where he developed in-app and online content. Sadly, he passed away in April 2018.

Related articles

  • 20 must-see optical illusions that will blow your mind
  • The best online coding courses in 2022
  • Best external hard drives and best external SSDs in 2022
  • Why Apple's next iPad Pro could look absolutely stunning

FAQs

What are the different colors and how it stimulates emotion? ›

Warm colors – such as red, yellow and orange – can spark a variety of emotions ranging from comfort and warmth to hostility and anger. Cool colors – such as green, blue and purple – often spark feelings of calmness as well as sadness.

What Colour is happy? ›

Yellow is usually the color of happy, joyful emotions.

What does each color make you feel? ›

Warm colors like red, yellow and orange evoke higher arousal emotions, such as love, passion, happiness, and anger. Cool colors, like blue, green and purple are linked to calmness, sadness and indifference. Colors can trigger these arousal states and emotions.

What Colour is jealousy? ›

“Green” “Green” was indicated among the top three colors for two emotions, envy and jealousy (Figure 2).

What colors make a person happy? ›

Happy colors are bright, warm colors like yellow, orange, pink and red. Pastel colors like peach, light pink or lilac can also have an uplifting effect on your mood. The brighter and lighter a color, the more happy and optimistic it will make you feel.

What emotion does green evoke? ›

Green evokes a feeling of abundance and is associated with refreshment and peace, rest and security. Green helps people feel rested and secure. People are invited to wait in the “green room” before going on camera to relax. Many doctors even use green in their offices to put patients at ease.

What color means angry? ›

The color red was most associated with anger, green with disgust, black with fear, yellow with happiness, blue with sadness, and bright with surprise. These associations may be a result of various expressions containing color terms that are used in the English language—for example, “seeing red” or “feeling blue.”

What color is loneliness? ›

Gray Colors

It also evokes feelings of loneliness and isolation. Since gray is neither black nor white, it's usually thought of as the transition between two non-colors.

What color is anxiety? ›

The colors we use to describe emotions may be more useful than you think, according to new research. The study found that people with or anxiety were more likely to associate their mood with the color gray, while preferred yellow.

What emotion is white? ›

White represents purity or innocence. While a bride wearing white was often thought to convey the bride's virginity, blue was once a traditional color worn by brides to symbolize purity.

What colour means love? ›

Pink symbolizes love and romance, caring, tenderness, acceptance and calm.

What is the colour of love? ›

In western countries such as France and US, red is thought to be the colour that represents love and passion because it is the colour of blood.

What color is for peace? ›

White. Many internationally used signs and symbols of peace are rendered in white.

What is the color of kindness? ›

Psychology Behind the Color Green

Green is often associated with nature, health, healing, the environment, reliability, generosity, and practicality. It encourages generosity, kindness, and sympathy.

What is the most relaxing color? ›

Blue is the Most Relaxing Colour, Scientists Say
  • New research claims that dark blue is the world's most relaxing colour. ...
  • A new study of Leonardo da Vinci's earliest-known drawing has revealed that the Renaissance master was ambidextrous.
12 Apr 2019

What is the color of tired? ›

The color gray appears when the person is afraid, anxious or feeling exhausted.

What colors represent what? ›

Eastern World:
  • Marriage: White and pink are favorite just as in the western world.
  • Green: Eternity, family, harmony, health, peace, posterity.
  • Happiness: Red.
  • Helpful: Gray.
  • Wealth: Blue, gold and purple.
  • White: Children, helpful people, marriage, mourning, peace, purity, travel.
  • Gold: Strength, wealth.

What emotion does green evoke? ›

Green evokes a feeling of abundance and is associated with refreshment and peace, rest and security. Green helps people feel rested and secure. People are invited to wait in the “green room” before going on camera to relax. Many doctors even use green in their offices to put patients at ease.

What color is anxiety? ›

The colors we use to describe emotions may be more useful than you think, according to new research. The study found that people with or anxiety were more likely to associate their mood with the color gray, while preferred yellow.

What emotion is white? ›

White represents purity or innocence. While a bride wearing white was often thought to convey the bride's virginity, blue was once a traditional color worn by brides to symbolize purity.

Videos

1. Colors Psychology | What your favourite color Says about you? | Art Jalons
(Art Jalons)
2. Emotional Copywriting using The Wheel of Emotions [free download]
(Roy Furr — Breakthrough Marketing Secrets)
3. Nicole Lazzaro | Games and the Four Keys to Fun: Using Emotions to Create Engaging Design
(AIGAdesign)
4. Color Psychology. Do colors influence your feelings, choices, decisions and behaviour?
(Luxury Academy (Official Channel))
5. Cinematography Basics: The Emotion of Color
(Film Riot)
6. En Vogue - Giving Him Something He Can Feel (Official Music Video) [HD]
(En Vogue)

Top Articles

Latest Posts

Article information

Author: Fr. Dewey Fisher

Last Updated: 12/19/2022

Views: 6062

Rating: 4.1 / 5 (42 voted)

Reviews: 89% of readers found this page helpful

Author information

Name: Fr. Dewey Fisher

Birthday: 1993-03-26

Address: 917 Hyun Views, Rogahnmouth, KY 91013-8827

Phone: +5938540192553

Job: Administration Developer

Hobby: Embroidery, Horseback riding, Juggling, Urban exploration, Skiing, Cycling, Handball

Introduction: My name is Fr. Dewey Fisher, I am a powerful, open, faithful, combative, spotless, faithful, fair person who loves writing and wants to share my knowledge and understanding with you.