The Emotion Of Color in Web Design

Last Update: November 27, 2018

Hey Folks,

As an addition to the Design in Wordpress WAbinar, I have created this color emotion guide for YOU. This is merely a guideline on how you can target the right emotion by using some appropriate colors for your site.

Just remember the KISS theory when creating your sites!

  • Gray -- unsettling, moody, dull.
  • Yellow -- cheerful, happiness, optimism, playful, sunny, warm.
  • Black -- authority, power, somber, evil, easy to overwhelm, bold, empty.
  • Red -- energy, excitement, symbol of life, aggressive, passionate, vigor.
  • Green -- conservative, wealth, nature, good luck, fertility, generosity, sickly.
  • White -- purity, clean, sterile.
  • Pink -- calming, gentle, delicate, feminine, tranquil.
  • Blue -- cold, uncaring, focused, dependable, loyal, serene, sedate, trustworthy.
  • Purple -- royalty, religious, superficial, spiritual.
  • Brown -- reliable, stable, earthy.

Join the Discussion
Write something…
Recent messages
WendaSue Premium
Hi Jay. Just wanted to say again that I really appreciate your help concerning colors within my website. I value your knowledge and experience. I wish I would have read this article before I built my site. I love it now, though.
I hope you have a great day.
All the best,
Wendi :)
Reply
KatyaColvin Premium
Colors rule the world and your post provide the guidance. Thank you Jay!
Reply
KAR1 Premium
What a visual! Great tip Jay! Way to go with real-life examples awesome!!!
Reply
Sibyll Premium
Your color emotion guide is fascinating, especially the logos of the different company. Nothing left is left to chance, everything is researched and evaluated! And these companies have paid maaany bucks to get it just right - do they?
Reply
Mikaeri Premium
Interesting, many look on black as a negative colour, yet it can still look really nice with what you're wearing and the occasion.
Reply
manatee13 Premium
This is very interesting. Thank you for sharing this color guide.
Reply
in-it-to-win Premium
Very cool idea!
Reply
AnnieB Premium
I love this. It is so handy to refer to from time to time.. Thanks for posting it.
Reply
jwilliamson3 Premium
Jay
Color is a large part of the decision making process. If it is implemented and married into the design process it will work for you or if not it will work against the sales decision process. Color is another piece of the puzzle that is going on in the subconscious mind all the time giving us subtle cues on whether to trust or not trust the message. The color should go with the theme and message. If it does not it gives a non congruent mixed message. Either swim with the current or against it! Thanks again for reminding me! Jim
Reply
MarvH Premium
Thanks Jay, Interesting to see what the Big Companys use.
Reply
WriterLynn Premium
What is the best color for hyperlinks? I have always read that the standard blue link is the best, but I wonder if people are blind to links anymore, especially since they recognize blue as a hyperlink.
Reply
Kyle Premium
Blue tends to be the most "acknowledged" as it is the most common.
Reply
Shields Premium
This is great and very stimulating (all those colors together). Next, check out your wardrobes!!!! and have fun with color.
Reply
thys Premium
Did you ever notice that most of the big social networking sites use blue as a theme? Think facebook, twitter and even linked in. Pinterest on the other hand uses red - excitement, perfect fit. Great infographic, thanks!
Reply
thys Premium
And a white and black color theme can be great to pull the attention to where you want it - your (colorful) ads for example
Reply
Shawn Martin Premium
Thanks Jay, very helpful. :)
Reply
Labman Premium
I typically will choose Blue as a background on my sites. I try to give my reader a sense of trust in my online sites. I do use Green on my dog site though since it is a natural color and fits nicely with my header pic.

Adding splashes of color in the focus picture can have a good effect on the tone of the article though.

This is just how I try to use color in my sites. I'm not finding it overwhelmingly effective though. Every little bit helps.
Reply
David_S Premium
I know colors can make a huge difference in conversions with your website as well. Nice to see an actual breakdown of the color scheme.
Reply
Kyle Premium
They absolutely can, button colors are a big one.
Reply
David_S Premium
Never thought of "button" colors of having any significance.
Reply
Kyle Premium
Yeah, red, orange and yellow can typically have some of the highest conversion numbers for call to action buttons.
Reply
Kyle Premium
I surely wasn't optimistic about my health last time I went to McDonalds!

Nice add Jay, this is great. I also read that Pink evokes laziness so if you are trying to get someone to take action, don't use pink.
Reply
Kathy1952 Premium
This is great, Jay. Thanks!
Reply
CAM76 Premium
This is great, thanks a lot Jay!
Reply
bleaf Premium
Thanks you very much Jay! Now I know the reason behind the colors. Blue is my favorite!
Reply
goodsuccess Premium
Great Stuff MagicStudios. But can you tell me why women tend to see brighter colors than men?
I also work in a Nursery...and women will usually view and pick brighter colors than men. This comes from my own day to day observance of people in general.
Reply
thys Premium
Interesting observation!
Reply
MarieC Premium
I've used color emotion guides to help me create optimal learning environments in my elementary classrooms. Now I get to use these same concepts to design the optimal IM website -- COOL! Thanks, Jay!
Reply
tommydillard Premium
thanks this is awesome
Reply
kaliinozarks Premium
Blue has always been my favorite color. It's what I select for about everything. Now I know, your chart says trustworthy, loyal, serene (then it says cold and uncaring). I'm not sure how the cold and uncaring fits in here but I like the rest and I really like blue!!! Thanks for the information.
Reply
scottdogg187 Premium
I agree I don't see how cold and uncaring fit in with loyal and trustworthy. I also am a fan of blue and I use it a lot in my sites. Good information here
Reply
Thank you Jay!
Reply