Empathizing Color Psychology in Web Design

Posted in Tips, Web Design4 years ago • Written by 24 Comments

The way different colors influence our mood, state of soul and body is really exciting. Most of us do not realize how it works and only a few probably pay attention. Though the influence of the colors may be some what overestimated, we can obviously feel it in some situations (imagine yourself in a dark red room or in the room in the sky colors). Today we’ll be speaking about color perception and color psychology in website design, the way different brands use colors and what’s their message.

The colors are divided into two basic groups – colors in the red area of the color spectrum known as warm colors (red, orange and yellow) and colors in the blue area known as cool colors (blue, purple and green). The warm colors evoke emotions ranging from feelings of warmth, comfort and coziness (the fire burning in the rainy cold evening) to anger and aggression. Cool colors are as a rule described as calm and tranquil but can also be associated with sadness (being in blues) or indifference.

In the ancient times people believed that colors can cure from different diseases. This science was called Chemotherapy, and some of the basics were as following:

  • Red increases blood circulation and thus stimulates the body and mind
  • Yellow stimulates the nerves and purifies the body
  • Orange increases your energy
  • Blue treats pain
  • Indigo alleviates skin problems

Though the majority of psychologists take color therapy sceptically big brands don’t seem to agree with that. They create huge marketing campaigns based on the way we perceive the colors and make people buy. Below is the table with the colors and emotions/feelings they are widely associated with. Let’s try to analyze the websites of some world-known companies and see how they implement color techniques.

Color Emotions
Black Symbol of menace or evil, popular as an indicator of power. Associated with death and mourning, unhappiness, sexuality, formality, and sophistication.
White Purity or innocence. Cold, bland, and sterile.
Red Evokes strong emotions, associated with love, warmth, and comfort. Still considered an intense and angry color that creates feelings of excitement, intensity, sexuality.
Blue A favorite color for many people and the color most preferred by men. Gives the feelings of calmness or serenity. Described as peaceful, tranquil, secure, and orderly.
Green Symbolizes nature and the natural world. Represents tranquility, good luck, health, and jealousy. Symbol of fertility, has a calming effect and relieves stress.
Yellow Cheery and warm, but can also create feelings of frustration and anger. Most fatiguing to the eye (that’s why you’ll rarely see a bright yellow website or a room painted with yellow with the exception of playrooms for kids) yet most attention-getting color (so great color for important details or calls to action- remember the yellow stop/caution color).
Purple Royalty and wealth, wisdom and spirituality, sex and relationships, exotic and special.
Brown (all of us love wooden backgrounds). Natural color that evokes a sense of strength and reliability, warmth, comfort, and security.
Orange (banner color of the counter-culture). Blatant and vulgar color, makes you feel excitement, enthusiasm, and warmth. As a combination of red and yellow it’s often used to draw attention.
Pink Associated with love, romance, youth, freshness and may have a calming effect. Pink effect depends on the type of pink (strong, light, deep etc).

Now when we know what colors mean and what feelings they evoke, let’s try to make a simple analysis of the color schemes used by 20 world-known brands on their corporate websites. That’s really exciting and you start taking things differently.

1. Coca-Cola


Primary color is red on a white and light gray background for better visibility and contrast. The red is supposed to create the feeling of excitement and energy. “Open happiness” text in the main menu corresponds to the color perception.

Though the white is probably used to make an accent on red, as a cold color it’s supposed to give the feeling of coolness “For refreshing ideas” as they say in the moto. An excellent job!

2. McDonalds


Though the McDonalds restaurant colors we are used to are yellow and red (to cause children excitement, a bit of irritation and craziness), the website looks pretty formal in black and white. And no wonder, being visited by parents who would like to know what their kids eat and how fat is that, black and white is the perfect solution to make the website look strict, formal, informative, clean and somewhat sterile.

Now imagine it would be mainly in yellow and red (causing excitement and the most fatiguing to the eye)- that would make parents mad. Frustrated parents = Less money

3. M&M’s


The M&M’s colors that we usually see in the TV/bigboard ads are yellow and red (double excitement). The website itself is a mix of all possible colors, from light blue on the background to dark-blue, purple, green, yellow, orange, red in the banners and header area. The M&M’s guys are extremely smart, everyone can choose a candy to his liking :) There’s one problem though- the website looks very clumsy and kinda created from pieces that do not match.

4. Colgate


Red, white and blue- the colors of world-famous 3-colored toothpaste and the only colors used on the website (even mother and kid on the photo in the header area are dressed in red and white on the blue sky background!). Red for energy and happiness, white for shine and sterility, blue for cold freshness of stream water and confidence. Though I like the toothpaste, the website color scheme is not pleasant to my eyes. The abundance of bright red makes me feel uncomfortable and makes it almost not possible for me to focus on the texts and information.

5. Nestle


Nestle slogan says “Good Food, Good Life” and the white-gray-blue color-scheme makes you feel calm, secure and in some way sure that’s everything is gonna be okay. You will remember this feeling subliminally and buying something produced by Nestle next time you’ll be thinking “somehow I know this is a reliable company producing good products, I might have read this somewhere”. Another great example how marketing is closely connected with the color perception.

6. Nescafe


A product of Nestle company, Nescafe website is however designed in deep plum colors- a mix of red associated with the cozy warmth, energy and power and purple- making you feel so special, exclusive and unique. I love this color scheme, it’s not so annoying as red and not so exquisite as purple, it makes you feel special yet very comfy.

7. Cadbury


A website made of all shades of purple. I guess it is supposed to say that Cadbury products are very special, but it makes me feel playful for some reason. That’s an interesting approach, while the chocolate is usually associated with energy (like Snikers) or sex (dark black chocolate) the playful approach definitely makes the brand stand out from the crowd. Or am I the only one taking it like this?

8. Nokia


Blue, green, gray, white and a little bit of pink. Blue for serenity, green for tranquility and nature, gray to nicely mix blue and green, white for clarity, pink is probably to attract girls :) The website is designed in the colors to make you feel sure of the quality, yet they stay away from the standard blue-gray-white color scheme.

Green is knows to relieve stress and will have a calming effect on somewhat frustrated with daily heap of things to do business people who have come to check for the updates.

9. Kodak


Though the Kodak products are usually associated with yellow (yeah, they catch the attention) the website is designed in the classic gray-white-blue color scheme, so pleasant to the eye and allowing to focus on texts and information. You feel that you will get all the info that you need in a clear way, yet you do not feel too formal, just professional approach to things.

10. Gillette


Blue is the color most preferred by men and guys at Gillette perfectly know this. “The Best a man can get”- the favorite men color and a bit of red and orange on promotions to catch attention. They know what you like guys and they know how to sell their products to you.

11. Marlboro


Red, black and gray- power, sophistication, sexuality and strong emotions- features of a “real” man. However if you visit philipmorrisusa you will notice that the company corporate website is designed in blue color scheme- peaceful, tranquil, secure. That’s an excellent example how the colors work, if you still don’t believe it, let’s move forward.

12. Ikea


The header of the website is designed in bright colors- yellow, yellowish-green and sky-buy – which makes your feel somewhat excited (and willing to buy something?). The photos used in flash animation are bright as well which makes you even more excited. The website body is pretty simple- black and blue text on a white background to give you full access to the information.

The special offers page has a huge red banner on top and you can’t keep your eyes from it! That same moment your brain keeps reading “special offers” over and over again … and Ikea has you.

13. Budweiser


Same as the Marlboro the Budweiser website main promotional page is designed in red and black colors, meaning “Hey Dude- drink Budweiser and you’ll be a “Man”. The inside pages all have different backgrounds- white, red, black, gray. I don’t think that there’s some separate marketing campaign behind this but rather a non-standard design approach (though most of the pages still remain in red).

14. L’oreal


Not much to say about L’oreal website- being designed in all possible shades of purple it makes you feel really special. With L’oreal products you’ll be sexy, stylish, sure of yourself, and really-really special.

15. Kellogg’s


Since 1906 people have known Kellogg as a company they can rely on for great-tasting, high-quality foods. All the website speaks of fun and excitement (lots of yellow and red) and the smiling families on the photos in the header area make you feel even happier. Yeah, your kids gonna love Kellogg’s they are so fun and cool! Even the text on the website speaks about it “We’re excited to offer fun promotions related to our products.” It’s fun, fun, fun!

16. Gucci


Natural light brown colors make you think of the Gucci products as very natural (and in some meaning they are since they are made from leather). Similar to L’oreal, the website is designed in a single color where different shades are used to make accents. Though I’m against killing animals for fur and leather, I like Gucci website, it’s so exquisite and natural.

17. Heinz


The website home page has a huge photo used as the background, and you can see the sky, the field and tasty tomatoes- simple yet effective. The background of the website inside pages changes from page to page: brown which resembles of land, blue which resembles the sky and the gray like the sky before the rain. Heinz guys are using colors very effectively, since the core of their product is what they grow (or buy from third party) they use all the natural colors and photos to show that the product is the essence of what beautiful nature gives us.

18. Converse


While the converse products are available in all possible colors, the website is designed in grunge style and colors resembling the pavement and old jeans. The accent here is made not on the colors but the audience which should be attracted by the according design style, hand-drawn elements and the seeming carelessness.

19. Kleenex


Kleenex is another great example of the website designed in the natural blue/green colorscheme (to make you feel confident the product is natural and reliable) with the orange elements to grab attention. It’s pretty interesting that I have never paid attention earlier how many of big corporate websites are using this same colorscheme and still don’t resemble each other. Probably that’s because we do perceive the colors in some other way than just knowing and recognizing what color is that, I think that we see it as an integral part of some system.

20. Duracell


Duracell website is designed in 3 main colors and their shades: black, orange and green. Black- to make more contrast for the orange and to add some formality and solidity. Orange- power, energy, joy. Green is natural and works great with the orange. “Smart power” as they say in the product, and the whole website makes you feel as if Duracell products are just what you need, the batteries are powerful and you can rely on them in any situation. BTW, I do buy Duracell :)

What colors do you use in website design? What are your favorite colors? Waiting on your comments guys!

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

14 Written ArticlesWebsite

Project manager and usability specialist. Interested in SEO and marketing, friendly and always ready to discuss new opportunities. Now working in amazing SEO Company named WebPromoExpert.net and you are welcome to follow me and WebPromoExpert on Twitter

24 Comments Best Comments First
  • Diogo Rodrigues

    Thursday, April 1st, 2010 13:11

    1

    Hello!

    Congratulations on your blog, and the article.
    Can I translate this article for my blog in Portuguese?

    http://www.ladodesign.com.br

    Big hug!
    , D

    +1
  • Media Maven

    Monday, April 19th, 2010 11:05

    13

    Really detailed and useful article on the psychology and function of colour in web design. It’s difficult to find such informative articles on the Internet these days. Really appreciate the examples given and thanks so much for sharing!

    0
  • Morten Bech Nielsen

    Sunday, April 4th, 2010 18:02

    9

    Very nice article..

    Is it possible you could tell what your sources are for the colour theory?

    Thanks

    0
  • paul

    Sunday, April 4th, 2010 14:51

    10

    Chemotherapy is a cancer treatment, I think you meant chromotherapy.

    0
  • Trent Shields

    Friday, April 2nd, 2010 22:06

    7

    Nice Article,
    I really like the inclusion of the site examples. Colour is super important to design.
    Keep up the good work.
    Cheers

    0
  • RobbyAnz

    Friday, April 2nd, 2010 12:47

    6

    Really really great article!
    Congratulations!

    Colors in webdesign is often underestimated.
    This top sites show it’s importance!

    0
  • Zoe Feast

    Thursday, April 1st, 2010 19:32

    2

    Interesting article. While a single color definitely had emotions attached to it most web sites use a palette of colors, not the monochrome approach. Here is where color can get even more interesting, the emotions associated with a color can drastically change depending on what colors you pair it with.

    I recently wrote a blog post that delved into just this phenomena.

    http://www.indigoimage.com/blog/2010/02/color-palettes-and-web-design.html

    I’d love to hear your comments on this.

    And on the subject of color have you come across the impossible colors – bluish yellow or reddish green?

    See if you can see them here
    http://www.indigoimage.com/blog/2010/02/can-you-see-bluish-yellow-or-reddish.html

    0
  • Kristie

    Thursday, April 1st, 2010 15:40

    3

    I have to say, I’m not digging Cadbury’s playful approach as much as you are. I like the idea of the purple, but the bright shade speaks more to kids toys and cartoons than ‘special’ to me. The colour scheme sort of tells me that this stuff is for kids, and I should look elsewhere for something of actual quality that I’ll enjoy. Great post, I like thinking this way.

    Thanks!

    0
  • Lena Tailor

    Thursday, April 1st, 2010 15:56

    4

    Really cool! psychology… will definitely help me in my new work.!
    Nice descriptions for colors.
    Thanks for sharing.

    0
  • Terri Lockerridge

    Friday, April 2nd, 2010 06:47

    5

    From a personal viewpoint, color has everything to do with the amount of time I spend on any website. Yellow and the green that makes me feel paranoid that something is about to bite me, and the brilliant neon fast flashing graphics… I can’t concentrate on the product they are trying to sell me at all! I have a hard time navigating on a site with glaring yellow backgrounds. Must block some kind of connector between eye and brain! lol

    Why don’t you like the M&M site? I love it! It reminds me of good times when I was a small child and I can almost taste the chocolate from remembering. Love the picket fence and the grass.. it is … cute… but not too cute.

    Gucci is just as you would expect Gucci to be.. elegant wealth is what it portrays. The kind of class and style brought on by true old money wealth of those who can afford “real” Gucci.
    Thanks again for the fun, great post today!

    0
  • Peter

    Monday, April 19th, 2010 01:55

    12

    Thanks for sharing. I’ve just spend whole week playing with colors for my website.

    0
  • Kate

    Thursday, May 20th, 2010 18:09

    14

    I disagree with Nestle’s approach. Looking at their website, I don’t think “wow I really feel the need to buy Nestle candy”. Overall I think the color scheme is too dull and unexciting. It doesn’t really make for good marketing. Instead of just white the background should be a pale yellow or red, colors that have been proven to stimulate appetite.

    0
  • James Stanislawski

    Saturday, March 12th, 2011 18:43

    20

    Great Article!! There should be a online webdesigners handbook that lists websites like this… Maybe call it “The webdesigners Bible” or something… Half of the websites on here that claim to have information for webdesigners are just web design companies "Blog" that they are using for SEO purposes in which all the info is bs. This seems raw & legit to me…

    James
    em4b.com – Milwaukee, WI

    0
  • Basheerak

    Monday, May 23rd, 2011 07:52

    21

    Interesting design and thanks for the Color and emotions table.

    0
  • Rebecca Smith

    Friday, June 10th, 2011 11:00

    22

    Nice and informative article. Thanks for sharing :) I’ve also considered the “color topic” and write an article about colors in Web Design.

    0
  • Cia

    Sunday, October 30th, 2011 18:21

    24

    Its really nice and intersting post. I learned a lot…thnx

    0
  • Caverta

    Thursday, July 21st, 2011 13:51

    23

    oh! it is so good for sharing an nice post
    thank you

    0
  • Jose Tapia

    Wednesday, February 2nd, 2011 00:02

    19

    I love it, great article, brilliant, thanks for sharing

    0
  • Sylvie Durand

    Friday, July 9th, 2010 16:23

    15

    Very interesting. Thank you.
    Can someone tell me what colors to use if you don’t want to irritate the parents but also intrigue the kids to explore the site with educational fun products?

    :)

    0
  • Mali

    Thursday, August 19th, 2010 16:35

    16

    Amazing tutorial! What do you think is the mood created by the Instantshift website?

    0
  • Kevin

    Friday, December 10th, 2010 06:59

    17

    I am interested in blogs that talk about color and how similar they are and yet how different they are. This topic is controversial and I would be interested in knowing if anyone has any links to surveys that have been taken on this subject?

    0
  • Brett Widmann

    Tuesday, December 14th, 2010 15:59

    18

    Color is a very important part of design because it sets the mood and feeling for the whole design piece. Thanks for sharing this great article.

    0
  • Justin Carroll

    Sunday, April 4th, 2010 04:07

    8

    I’m calling bullshit. I don’t buy into this stuff. Color is a tool to incorporate into the design solution. Great article, though!

    -1
  • Jason Rudland

    Thursday, April 8th, 2010 00:26

    11

    A really helpful guide…It also explains the explosion of orange website (of which mine is one!)

    -1
  • Cia

    Sunday, October 30th, 2011 18:21

    24

    Its really nice and intersting post. I learned a lot…thnx

    0
  • Caverta

    Thursday, July 21st, 2011 13:51

    23

    oh! it is so good for sharing an nice post
    thank you

    0
  • Rebecca Smith

    Friday, June 10th, 2011 11:00

    22

    Nice and informative article. Thanks for sharing :) I’ve also considered the “color topic” and write an article about colors in Web Design.

    0
  • Basheerak

    Monday, May 23rd, 2011 07:52

    21

    Interesting design and thanks for the Color and emotions table.

    0
  • James Stanislawski

    Saturday, March 12th, 2011 18:43

    20

    Great Article!! There should be a online webdesigners handbook that lists websites like this… Maybe call it “The webdesigners Bible” or something… Half of the websites on here that claim to have information for webdesigners are just web design companies "Blog" that they are using for SEO purposes in which all the info is bs. This seems raw & legit to me…

    James
    em4b.com – Milwaukee, WI

    0
  • Jose Tapia

    Wednesday, February 2nd, 2011 00:02

    19

    I love it, great article, brilliant, thanks for sharing

    0
  • Brett Widmann

    Tuesday, December 14th, 2010 15:59

    18

    Color is a very important part of design because it sets the mood and feeling for the whole design piece. Thanks for sharing this great article.

    0
  • Kevin

    Friday, December 10th, 2010 06:59

    17

    I am interested in blogs that talk about color and how similar they are and yet how different they are. This topic is controversial and I would be interested in knowing if anyone has any links to surveys that have been taken on this subject?

    0
  • Mali

    Thursday, August 19th, 2010 16:35

    16

    Amazing tutorial! What do you think is the mood created by the Instantshift website?

    0
  • Sylvie Durand

    Friday, July 9th, 2010 16:23

    15

    Very interesting. Thank you.
    Can someone tell me what colors to use if you don’t want to irritate the parents but also intrigue the kids to explore the site with educational fun products?

    :)

    0
  • Kate

    Thursday, May 20th, 2010 18:09

    14

    I disagree with Nestle’s approach. Looking at their website, I don’t think “wow I really feel the need to buy Nestle candy”. Overall I think the color scheme is too dull and unexciting. It doesn’t really make for good marketing. Instead of just white the background should be a pale yellow or red, colors that have been proven to stimulate appetite.

    0
  • Media Maven

    Monday, April 19th, 2010 11:05

    13

    Really detailed and useful article on the psychology and function of colour in web design. It’s difficult to find such informative articles on the Internet these days. Really appreciate the examples given and thanks so much for sharing!

    0
  • Peter

    Monday, April 19th, 2010 01:55

    12

    Thanks for sharing. I’ve just spend whole week playing with colors for my website.

    0
  • Jason Rudland

    Thursday, April 8th, 2010 00:26

    11

    A really helpful guide…It also explains the explosion of orange website (of which mine is one!)

    -1
  • paul

    Sunday, April 4th, 2010 14:51

    10

    Chemotherapy is a cancer treatment, I think you meant chromotherapy.

    0
  • Morten Bech Nielsen

    Sunday, April 4th, 2010 18:02

    9

    Very nice article..

    Is it possible you could tell what your sources are for the colour theory?

    Thanks

    0
  • Justin Carroll

    Sunday, April 4th, 2010 04:07

    8

    I’m calling bullshit. I don’t buy into this stuff. Color is a tool to incorporate into the design solution. Great article, though!

    -1
  • Trent Shields

    Friday, April 2nd, 2010 22:06

    7

    Nice Article,
    I really like the inclusion of the site examples. Colour is super important to design.
    Keep up the good work.
    Cheers

    0
  • RobbyAnz

    Friday, April 2nd, 2010 12:47

    6

    Really really great article!
    Congratulations!

    Colors in webdesign is often underestimated.
    This top sites show it’s importance!

    0
  • Terri Lockerridge

    Friday, April 2nd, 2010 06:47

    5

    From a personal viewpoint, color has everything to do with the amount of time I spend on any website. Yellow and the green that makes me feel paranoid that something is about to bite me, and the brilliant neon fast flashing graphics… I can’t concentrate on the product they are trying to sell me at all! I have a hard time navigating on a site with glaring yellow backgrounds. Must block some kind of connector between eye and brain! lol

    Why don’t you like the M&M site? I love it! It reminds me of good times when I was a small child and I can almost taste the chocolate from remembering. Love the picket fence and the grass.. it is … cute… but not too cute.

    Gucci is just as you would expect Gucci to be.. elegant wealth is what it portrays. The kind of class and style brought on by true old money wealth of those who can afford “real” Gucci.
    Thanks again for the fun, great post today!

    0
  • Lena Tailor

    Thursday, April 1st, 2010 15:56

    4

    Really cool! psychology… will definitely help me in my new work.!
    Nice descriptions for colors.
    Thanks for sharing.

    0
  • Kristie

    Thursday, April 1st, 2010 15:40

    3

    I have to say, I’m not digging Cadbury’s playful approach as much as you are. I like the idea of the purple, but the bright shade speaks more to kids toys and cartoons than ‘special’ to me. The colour scheme sort of tells me that this stuff is for kids, and I should look elsewhere for something of actual quality that I’ll enjoy. Great post, I like thinking this way.

    Thanks!

    0
  • Zoe Feast

    Thursday, April 1st, 2010 19:32

    2

    Interesting article. While a single color definitely had emotions attached to it most web sites use a palette of colors, not the monochrome approach. Here is where color can get even more interesting, the emotions associated with a color can drastically change depending on what colors you pair it with.

    I recently wrote a blog post that delved into just this phenomena.

    http://www.indigoimage.com/blog/2010/02/color-palettes-and-web-design.html

    I’d love to hear your comments on this.

    And on the subject of color have you come across the impossible colors – bluish yellow or reddish green?

    See if you can see them here
    http://www.indigoimage.com/blog/2010/02/can-you-see-bluish-yellow-or-reddish.html

    0
  • Diogo Rodrigues

    Thursday, April 1st, 2010 13:11

    1

    Hello!

    Congratulations on your blog, and the article.
    Can I translate this article for my blog in Portuguese?

    http://www.ladodesign.com.br

    Big hug!
    , D

    +1

Comments are closed.

54.243.14.193 - unknown - unknown - US