12 colours and the emotions they evoke

22/06/15 18:1412 colours and the emotions they evoke | Web design | Creative Bloq

Page 1 of 16http://www.creativebloq.com/web-design/12-colours-and-emotions-they-evoke-61515112

>Comments (http://www.creativebloq.com/web-design/12-colours-and-emotions-they-evoke-61515112#disqus_thread)

Jun 11, 2015 14:29 pm

421

TweetTweet

1.4k

LikeLike

34

WEB DESIGN FEATURE

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

12 colours and the emotions theyevoke

>

121

Share



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

Discover these outstanding uses of colour in branding(http://www.creativebloq.com/branding/amazing-uses-colour-6133196)

The psychological effects of colours have been studied by scientists sincethe Middle Ages (http://en.wikipedia.org/wiki/Chromotherapy), butyou only need to look at the world around you to see and feel their

Image courtesy of Brett Jordan, www.flickr.com/photos/x1brett/(http://www.flickr.com/photos/x1brett/)

>



impact.

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

DON'T MISS THIS

(http://bit.ly/1HrJ8dx)

While the discipline of colour theory is broad, this article will teach youthe fundamentals in a single, quick-reference source. If you'd like tolearn how to use colour and contrast to make strong first impressionson users, check out our free e-book Web Design for the Human Eye(http://www.uxpin.com/visual-web-ui-design-colors-space-contrast.html).

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 noteabout 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 colourhas its own properties, so does each shade of the same colour.

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

Below, we'll explain all the noteworthy differences between a colour'sshades, 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 helpcreate 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.

Image courtesy of Jocelyn Kinghorn,www.flickr.com/photos/joceykinghorn(http://www.flickr.com/photos/joceykinghorn)

>



As a dominating colour, red adds gravity and heightened awareness(http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/) quite literally, as the colourincreases blood circulation, breathing rates, and metabolism. Red cantake on a variety of meaning, associated with both love and war, but theunifying factor in all meanings is a sense of importance. Think of the redcarpet.

Red is a colour best used cautiously. Its knack for attracting attentionmakes it a priceless tool for designers, but excessively it will inhibitrelaxation. Lighter shades emphasize the energetic aspects of red including youthfulness while darker shades emphasize power, andeven durability, such as a brick wall.

01. Red>Passionate, Aggressive, Important

Image courtesy of www.playtika.com (http://www.playtika.com)>



The landing page for the game design company Playtika(http://www.playtika.com/) has an aggressive but potent flair. Playfuland stimulating, the red suits the cheetah logo, a powerful icon itself,softened by the cartoonish qualities and anthropomorphic smile.

Sharing red's energizing aspects, but to a safer degree, orange is a goodway to add excitement to a site without severity. It is generally playful,and some claim it creates haste and plays on impulse(http://www.playtika.com/). It can even signify health, suggestingvitality and vibrance.

The interactive newsletter for the Epic Creative Agency(http://epic.net/newsletters/2015-epic/) is written and drawn inorange, emphasizing their playfulness and youthfulness and coincidingwith the fun themes and content of the art.

02. Orange>Playful, Energetic, Cheap

Image courtesy of Epic Creative Agency>



Yellow is a strange colour: it is often associated with happiness, but alsoactivates the anxiety center of the brain. Like red and orange, it's able tostimulate and vitalize it's the colour of warning signs and taxis butuse bright yellow sparingly because of the potential negativeconnotations.

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

The yellow background in Lunar Gravity (http://www.lunargravity.be/)creates a light-hearted mood, accentuated by the quirky animations andplayful scrolling effects. The anxious side effects of yellow are muted bythe colour's softer tone, keeping all the good aspects without the bad.

03. Yellow>Happy, Friendly, Warning

Image courtesy of Lunar Gravity>



Green mostly represents the environment and outdoors, for obviousreasons, making it the clear choice to suggest nature and an organicquality.

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

Massis Tea (http://www.massistea.com/#about-us) plays on its naturalqualities with the green scheme for its site. The green top navigationbar, green logo, and photograph of greenery all work together to accents

04. Green>Natural, Stable, Prosperous

Image courtesy of Massis Tea>



the brand's ties to nature.

As we first described in Web Design for the Human Eye(http://www.uxpin.com/visual-web-ui-design-colors-space-contrast.html), 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 thecolour of trust. Blue is the colour of calm and serenity, and as suchinspires security and a feeling of safety. For this reason, blue is a colouroften used by banks: CitiBank, Chase, Capital One. However thecalming effects also make blue a friendly and inviting colour, whichexplains its adoption by Facebook and Twitter.

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

05. Blue>Serene, Trustworthy, Inviting



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, studiesshow that the colour actually acts as an appetite suppressant(http://www.colormatters.com/color-and-the-body/color-and-appetite-matters).

Trust is essential for financial advisors like Evolve Wealth(http://evolvewealth.co.uk/), so most of their site is designed in varyinghues of blue.

Image courtesy of Evolve Wealth>

06. Purple>Luxurious, Mysterious, Romantic



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

Lighter shades of purple bring to mind spring and romance, especiallylavender. Darker shades of purple add more mystery, and can evensymbolize creativity. Darkening the shade will also turn the romanticelements more sensual.

With its ties to personal wealth, WooCommerce(http://www.wooviewapp.com/) chose purple as the colour to representtheir WooView app, playing on themes like royalty and panache that fitthe function of checking how much money you're making in real time.

Next page: six more colours...

Image courtesy of WooView App>

1

2 (/web-design/12-colours-and-emotions-they-



Tags: Web design (/tag/web-design), netmag (/tag/netmag), Feature (/tag/feature)

2 (/web-design/12-colours-and-emotions-they-evoke-61515112/page-2)

>

YOU MAY LIKE

(//www.taboola.com/en/popup?template=colorbox&taboola_utm_source=futureplc-creativebloq&taboola_utm_medium=bytaboola&taboola_utm_content=ab_hybrid-thumbs-2r_international:Below Article Thumbnails:) (//www.taboola.com/en/popup?template=colorbox&taboola_utm_source=futureplc-creativebloq&taboola_utm_medium=bytaboola&taboola_utm_content=ab_hybrid-thumbs-2r_international:Below Article Thumbnails:)

(http://www.top10bestwebsitebuilders.com/how-to-create-a-website/business/webcom-vs-godaddy?

utm_source=taboolaNI&utm_medium=futureplc-creativebloq&a=2967)

Top 10 Best Website Builders

(http://www.top10bestwebsitebuilders.com/how-to-create-a-website/business/webcom-vs-godaddy?

utm_source=taboolaNI&utm_medium=futureplc-creativebloq&a=2967)

(http://themoney.expert/tech/save-money-by-building-your-companys-website-on-wix-com?utm_source=taboola&utm_campaign=90438)

Wix.com

(http://themoney.expert/tech/save-money-by-building-your-companys-website-on-wix-com?utm_source=taboola&utm_campaign=90438)

(http://goodtips4men.com/index.php/15-reasons-you-must-visit-brazil-if-you-are-a-single-man/?utm_campaign=TB-brazil-

butt&utm_term=futureplc-creativebloq&utm_source=taboola&utm_medium=cpc)

GoodTips4Men

(http://goodtips4men.com/index.php/15-reasons-you-must-visit-brazil-if-you-are-a-single-man/?utm_campaign=TB-brazil-

butt&utm_term=futureplc-creativebloq&utm_source=taboola&utm_medium=cpc)

(http://travel.amerikanki.com/worlds-weirdest-hotels/?utm_source=taboola&utm_medium=referral&utm_campaign=tabtravel)

Amerikanki

(http://travel.amerikanki.com/worlds-weirdest-hotels/?utm_source=taboola&utm_medium=referral&utm_campaign=tabtravel)

(http://wmnlife.com/beauty-fashion/10-things-men-find-unattractive?utm_source=taboola&utm_medium=futureplc-

3 Best Sites to Build Your Own Website

Build Your Own Website In Only 10 Minutes !

15 Reasons You Must Visit Brazil if You Are a Single Man

10 Worlds Weirdest Hotels



creativebloq&utm_campaign=taboola-fashion-

int&utm_term=10+Things+Men+Find+Unattractive&utm_content=http%3A%2F%2Fwmnlife.com%2Fmedia%2Fk2%2Fitems%2Fcache%2Fa9ccd7cd1c4267a50c67ac0bd7180172_M.jpg)

WmnLife.com

(http://wmnlife.com/beauty-fashion/10-things-men-find-unattractive?utm_source=taboola&utm_medium=futureplc-

creativebloq&utm_campaign=taboola-fashion-

int&utm_term=10+Things+Men+Find+Unattractive&utm_content=http%3A%2F%2Fwmnlife.com%2Fmedia%2Fk2%2Fitems%2Fcache%2Fa9ccd7cd1c4267a50c67ac0bd7180172_M.jpg)

(http://www.tenetnews.com/india-fishes_91.html?utm_source=taboola&utm_medium=futureplc-creativebloq)

TenetNews.com

(http://www.tenetnews.com/india-fishes_91.html?utm_source=taboola&utm_medium=futureplc-creativebloq)

(http://goweloveit.info/lifestyle/10-forgotten-truths-to-help-you-get-through-hard-times/?utm_source=taboola&utm_medium=referral)

GoWeLoveIt.info

(http://goweloveit.info/lifestyle/10-forgotten-truths-to-help-you-get-through-hard-times/?utm_source=taboola&utm_medium=referral)

(http://www.diabetescare.net/authors/megan-day/coffee-and-the-diabetes-risk?

utm_source=taboola&utm_medium=referral&utm_term=futureplc-creativebloq)

Diabetes Care

(http://www.diabetescare.net/authors/megan-day/coffee-and-the-diabetes-risk?

utm_source=taboola&utm_medium=referral&utm_term=futureplc-creativebloq)

(http://topmensmagazine.com/10-gadgets-to-have-in-2015/?

utm_source=taboola&utm_medium=referral&utm_campaign=gadgetsallcountries&utm_term=futureplc-creativebloq)

TopMensMag

(http://topmensmagazine.com/10-gadgets-to-have-in-2015/?

utm_source=taboola&utm_medium=referral&utm_campaign=gadgetsallcountries&utm_term=futureplc-creativebloq)

(http://www.carophile.com/10-cars-men-lust/?utm_source=taboola&utm_medium=referral)

Carophile

10 Things Men Find Unattractive

Top 15 Fishes of India

10 Forgotten Truths to Help You Get Through Hard Times

Coffee Effects on Blood Sugar

10 Crazy Futuristic Gadgets in 2015

10 Super Cars Every Man Wants



LinkedIn Is Now A Strong Buy: AnAlgorithmic Analysis (TalkMarkets)

8 Unique Fortunes You Wouldn't ExpectFrom A Cookie (All My Faves)

Essential SEO guide for web designers1 comment 11 days ago

librid Awesome Article !!!http://www.foynd.com

Good typography is not always clear5 comments 6 days ago

Brandon Buchanan *typography nottopography in the James Joyce's Ulysess

ALSO ON CREATIVEBLOQ

5 Comments CreativeBloq Login!1

Share Sort by Best

Join the discussion

Reply

Andre 10 days agoHello , congratulations for the article. I leave as a suggestion applying colors according to theculture of each country, continent and society. After all, the reddish sun Brazil is not the same asEngland. rs

1

Reply

Jonathan Patterson 5 days agoInteresting read. I employ a generous and atypical use of color on my website.

Reply

Simon Charwey 9 days agoGood post! We can learn much more too by passionately (or deliberately) observing nature natural colours that surround us and we engage with each day can teach us so much, especiallyas this very post have given us some key notes to observe in each colour. Thanks for sharing.

Reply

Hadrian Embalsado 10 days agoI love this!

Reply

Jerry Cao 10 days ago> Hadrian EmbalsadoThanks Hadrian!

WHAT'S THIS?

Recommend 3

Share

Share

Share

Share

Share

(http://www.carophile.com/10-cars-men-lust/?utm_source=taboola&utm_medium=referral)



Advertising (/Advertising) About Us (/About-Us) Contact (/Contact)

Future is AOP & PPA Digital Publisher of the Year and BMA Media Company of the Year.This site is part of Future plc, an international media group and leading digital publisher. We produce content across four core areas:

TechRadar (http://www.techradar.com/)

Maximum PC (http://www.maximumpc.com/)

Mac|Life (http://www.maclife.com/)

T3 (http://www.t3.com/)

Digital Camera World (http://www.digitalcameraworld.com/)

Gizmodo UK (http://www.gizmodo.co.uk/)

Lifehacker UK (http://www.lifehacker.co.uk/)

Technology

GamesRadar+ (http://www.gamesradar.com/)

PC Gamer (http://www.pcgamer.com/uk/)

Kotaku UK (http://www.kotaku.co.uk/)

Entertainment

MusicRadar (http://www.musicradar.com/)

Music

Creative Bloq (http://www.creativebloq.com/)

Creative

About Future (http://www.futureplc.com/home/about-us/) Jobs (http://www.yourfuturejob.com/) PR (http://www.futureplc.com/home/news/)

Advertising (http://www.futureplc.com/advertising-solutions/) Digital Future (http://www.digitalfuture.com/) Privacy Policy (http://www.futureplc.com/privacy-policy/)

Cookies Policy (http://www.futureplc.com/cookies-policy/) Terms & Conditions (http://www.futureplc.com/terms-conditions/)

Subscriptions (http://www.myfavouritemagazines.co.uk/) Investor Relations (http://www.futureplc.com/home/investors/)

Contact Future (http://www.futureplc.com/home/contact-us/)

Future Publishing Limited, Quay House, The Ambury, Bath BA1 1UA. All rights reserved. England and Wales company registration number 2008885.

http://www.foynd.com topography in the James Joyce's Ulysesscaption.

These illustrated notebooks are a thing ofbeauty1 comment 7 days ago

Hannah These look great! The cable cardesign is my favourite.

Font of the day: Monday1 comment 7 days ago

Guilherme Bauer That`s not free... again!

Subscribe Add Disqus to your sited Privacy)

12 colours and the emotions they evoke

Documents