Close
Close

The Psychology of Color: Is Your Color Choice Making or Breaking Your Website?

This is a guest contribution from Thai Nguyen, of The Wantrepreneur Journey.

Image by Flickr user Kari

Image by Flickr user Kari

Along with the human emotional response to music, perhaps there is nothing more universal in experience as the human response and perception of color (of course unless you are color-blind). Despite the ubiquitous nature of color in reality and indeed our daily encounter with different colors, the concept and understanding of color psychology seems to be somewhat lacking and even esoteric in practice. So much so, that when we choose colours for our website, we may not have thought about what effect it can have on our readers.

Many ancient cultures have practiced forms of color therapy, otherwise known as chromotherapy, light therapy, or colourology. Even today there are groups practicing such therapies as part of holistic and alternative treatments. Artist and interior designers have long understood the relationship between color and human emotional response.

Some of the most intriguing research on color response has included:

  • students exposed to the color red prior to an exam having negative effects- reducing scores and grades.
  • wildlife and park rangers have planted red flowers to deter people from entering into certain areas.
  • sports teams dressed in black are more likely to receive penalties.
  • warm-colored placebo pills get more of a response than cool-colored placebo pills.
  • the installation of blue-colored streetlights have suggested a reduction of crime in those areas.

Here is a breakdown of the major colors and their parallel emotional response:

RED
Positive: courage, strength, warmth, energy, excitement
Negative: defiance, aggression, danger.

BLUE
Positive: intelligence, trust, serenity, calmness, coolness, reflection.
Negative: distance, aloofness, emotionless, unfriendliness.

YELLOW:
Positive: optimism, confidence, self-esteem, extraversion, friendliness, creativity.
Negative: irrationality, fragility, depression, anxiety.

GREEN:
Positive: harmony, balance, refreshment, love, restoration, equilibrium, peace.
Negative: boredom, stagnation, blandness, enervation, envy

VIOLET
Positive: authenticity, truth, quality, awareness, attunement, luxury, royalty,
Negative: Introversion, decadence, suppression, inferiority.

ORANGE
Positive: comfort, security, abundance, fun, passion, stimulation/hunger/food.
Negative: deprivation, frustration, immaturity, frivolity.

PINK
Positive: tranquility, nurture, femininity, sexuality, love, delicate.
Negative: inhibition, emasculation, weakness, fickle, claustrophobia.

GREY
Positive: grey is psychologically neutral.
Negative: lack of confidence, lack of energy, depression, hibernation, reclusiveness.

BLACK
Positive: sophistication, glamour, security, emotional safety, efficiency, substance.
Negative: opression, coldness, menace, heaviness, intimation.

WHITE
Positive: purity, cleanness, simplicity, sophistication, efficiency, clarity.
Negative: elitism, sterility, distance, isolation, coldness.

BROWN
Positive: earthiness, connectedness, reliability, support, grounded, stable.
Negative: heaviness, lack of sophistication, lack of humor, dullness.

In light of the impetuous development of technology in our current day and age, and life becoming more online, perhaps nothing could be more pertinent than the need to consider not only what our choice of color conveys about our personality, but what kind of a response is evoked from the color we use on a website layout.

Some considerations in choosing color schemes for your website:

What is the nature of your work?

Media? Environmental? Music? Business? Religious? If your theme is environmental and you are heavy on the use of red and orange, this would produce a conflict in the reception of your message. In like manner, if you are a religious organization, then a dominant use of pink might not be very appropriate.

What is the purpose or mission statement of your business or website?

What kind of a response are you trying to elicit from your audience? Once they spend time on your site, think of some words to describe the way you would like your audience to feel. Inspired, encouraged, relaxed, at peace, energized? Match up these responses with the color and response list.

What artwork or photographs are featured on your site?

Do these match up also with the message that you are trying to convey? You may have chosen great colors but you can easily undermine your color/message synchronicity with a photograph or piece of art that is not in line with your color scheme.

It is also important to have consistency if you are going to use a variety of colors, keep in mind that colors are grouped and divided into primary, secondary, and tertiary colors, and work best when used in these relations. Variations are perhaps best used in individual blog posts when you are writing on a specific topic and trying to bring about a certain response- this is very important when you are choosing photographs to be incorporated into the post.

Thai Nguyen is the founder of www.wantrepreneurjourney.com the site dedicated to inspiring people to step out build a business around their passions- to make a living, living the dream. Thai has been a successful chef and athlete, and now teaches on the topic of personal growth.

About Guest Blogger

This post was written by a guest contributor. Please see their details in the post above. If you'd like to guest post for ProBlogger check out our Write for ProBlogger page for details about how YOU can share your tips with our community.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. I Love Blue

  2. Kent Sanders says:

    Thai, thanks for this insightful article. Is there any research about the appeal of certain color schemes if you’re trying to attract either male or female audiences? Are guys attracted or repelled by certain colors?

    Additionally, how important would you say color is, compared to the design/layout of the blog itself?

    • Thai Nguyen says:

      Thanks for the kind words Kent. Graham gave some great insights into the complexities of colour psychology below. While there are many definite correlations that can be made between a specific colour and an emotional response, the lines can get a little blurry when you introduce elements such as context, sex, personality, culture. But we certainly can’t let all the nuances pull us away from the very objective truths.

      In general, men are attracted to bolder and darker colours, then you have some gender neutral colours such as red, green, and orange. Women are said to be drawn toward softer, tertiary colours.

      A simple but insightful introductory book I’d recommend is: The Beginner’s Guide to Colour Psychology by Angela Wright.

      Also, you can download a pdf of this great journal article: http://cdp.sagepub.com/content/16/5/250.short

      In terms of importance vs. layout, I think Problogger is a perfect case study- great clean layout, now consider if Darren decided to remove ALL the orange. Huge difference.

  3. Interesting and informative article. The psychology of colour is both fascinating and infuriating. Just when you think you know the answers, along pops new research which suggests what we know about colour is incorrect. There is some good advice here, but nothing beats testing in your particular circumstances. As I highlight in my book, “Click.ology: What Works in Online Shopping”, reliance on colour psychology without testing can cause problems. For instance, red is actually perceived as an “urgent” colour. It is a colour we need to take notice of quickly – hence it is used on traffic signals. It is not perceived as “stop” but actually as “this is urgent, take notice”. That suggestion has been used by many websites as an idea to make shopping cart buttons red. And indeed, there is research that suggests that red shopping cart buttons increase sales. However, there is a twist to this piece of psychology. Those extra sales are almost entirely from males. It turns out that red is a turn off for women. So if you have a website that is predominantly visited by females, red would not work in increasing sales. It is an example that basic colour psychology can often lead to the wrong results, Similarly there are cultural differences – what we might think of as the meaning of one colour can be a completely different meaning in another part of the world. With global websites, colour is not as simple as you might think. So, even though this article has good suggestion, nothing will beat proper testing and analysis in each individual situation. Relying on basic colour psychology could cause you problems.

    • Thai Nguyen says:

      Great insights Graham. You said it well, it can be both fascinating and infuriating! This topic could have easily been diced up into a few more sub-categories- particularly on the subjective elements of colour psychology. Context is huge; red can convey danger in one setting, passion and lust in another, and elicit hunger in yet another instance.

      It was certainly challenging to present the whole concept of colour psychology and yet make it as applicable and specific to the web design as possible.

      I guess, with all pun intended, I wanted to paint it in broad strokes.

  4. Subham says:

    I think its a kind of fun , to associate your blog colors to your habits and thinkings . Though mine blog uses red , white and black . So what conclusion you make about me :)

  5. Fascinating Thai.

    I blog about making money online, sharing tips to help you live the happy internet lifestyle. I go with a neat shade of green to mimic/symbolize the US Dollar. I also go heavy on whitespace to make my travel images stand out from my content.

    Coloring plays a huge part in your blog or website. That’s why black or grey backgrounds are all but doomed; few dig such dark, negative-feeling-inducing colors. Go with lighter shades to lift the mood.

    Picture yourself walking inside of a dark room. How do you feel? Your website is a room of sorts. Make it bright.

    Thanks for sharing!

  6. Phuong Le says:

    Beautiful infographic and very valid points. Colour, shape, feel and mood all affect the way in which a customer will perceive your product or service. We try and explain that to clients when trying to help them increase sales

    • Thai Nguyen says:

      Definitely a ton of subconscious cues that are triggered off whenever we make decisions. Great to see you leveraging that knowledge with your customers Phuong!

  7. R says:

    While I like the topic and I agree that it is a valid idea to explore, I cannot say that this article was well written enough to provide information or even provoke thought on the subject. Rather, it is such a poorly crafted article that all one can do when reading it is hope that it ends. Word choice, confusing phrases and not much else. That is what I am left with.

    For years, I have truly enjoyed Problogger, I am sorry to see that no one is there when it comes to editorial review. For an online publication to tout its quality content, its dedication to quality content and then to publish this article is silly.

  8. Ragnar says:

    My main colors are a combination between blue and violet, so if it helps convey a message of authenticity, trust, intelligence and reflection, then I’d be happily embrace the negatives as well. It’s interesting to study the logos of big brands and see how the color often changes along with their target markets. Now I have a reference point to help me interpret exactly what signals they are sending. Thanks!

    • Thai Nguyen says:

      You’re very welcome Ragnar! The FedEx logo is very interesting, not only with its primary colours but also with the subliminal arrow.

  9. As a constant visitor of different sites, color does make a difference in attracting or repelling visitors. But I didn’t actually realize the deeper meaning of different colors. Thanks for this wonderful information.

  10. Oliver says:

    Nice one! Colour is probably a science in itself… There’s actually a marvellous resource or better say source of inspiration when it comes to colours and design: http://www.colourlovers.com/
    Some great palettes and certainly gives you a few ideas to start with and fiddle around with combinations a bit. Yours might be a good indicator for their monochrome effect, but combining two or more colours put some weights onto the scales of perception…

  11. Don P says:

    I’ve often considered redoing my site and changing the overall color theme. Since I’m just starting out (this is my 4th month writing on my new blog), it might be hard to gauge the impact though.

  12. sameer says:

    hi,
    Very informative article.website color also affect on audience because as you explained colors are related to psychology.Do we have to wise in color choice of website.

  13. Marija says:

    I love purple and that’s the color I instantly chose for my blog’s header and links. Later I read that according to Feng Shui color purple is perfect for businesses related to sports and my blog happens to be about tennis. I have always been happy with the choice I made and my blog will be 7 years old in a month.

    • Thai Nguyen says:

      Hi Marija,

      Purple is a great colour- it represented royalty in many ancient cultures. You should check out the colour relations with chakras also. Very interesting.

      All the best,

      Thai.

  14. Connie says:

    Interesting. I picked pink for my new blog, and I think I chose right according to what you said about the color (minus the part about claustrophobia).

    • Thai Nguyen says:

      Hey Connie,

      I think your colour choice will definitely attract the audience you are looking for. All the best!

      Thai

  15. Gayla Baer says:

    More than a decade ago, I served on a web advisory board for a major pharmaceutical company. I was given access to massive studies, one of the most impressive was the psychology of colors. Since that time, I can generally tell in a short time if the content is going to appeal to me. Not only do the colors need to appeal to the visitor, but they need to reflect the host as well. You only get one chance to make a fiI rst impression and showing your “true colors” on that first click can go a long way in reader retention :)

    Great article Thai! I love the way you’ve broken the colors down in the positive/negative – so much easier to find a near-perfect-balance that way.

    • Thai Nguyen says:

      Hi Gayla,

      Glad that you found the article helpful. Indeed, first impressions are crucial. And yes, your “true colours” probably tell you more about yourself than you realise!

      All the best,

      Thai.

  16. Jason says:

    The amazing thing is that you just have to change a couple of numbers in the CSS code to totally change the side, which can make all the difference in the world.

    Might be cool to change the colors weekly and keep track of the numbers to see which works best.

    Just because it works for you, other may not like it. Test, test and then test

  17. Nisha Pandey says:

    Quite correct Thai Nguyen,
    The visual appeal and attractive look can make the visitor fan of it. Particularly the websites that are designed keeping in mind this design psychology, are more visited than the others.

  18. Jonathan says:

    Great article. I would be interested to know how people perceive colour combinations. Do opposing colours cancel each other out of do some pull rank over others?

    • Thai Nguyen says:

      Hi Jonathan,

      Colour combinations are very interesting, if you look on one of those colour wheels you will see the divisions between the primary and tertiary colours. Primary colours are: red, blue, and yellow, most people will say that you should stick with the variances between two primary colours. For example, the variances between blue and red include indigo, purple, and magenta- any of these can be used with blue or red. Same applies to red and yellow. Of course, rules are always broken- sometimes it works, other times it does not. The whole fashion industry is intriguing in the ways they use colour combinations.

      In terms of cancelling out, I think if you are projecting conflicting signals with colours that is in effect cancelling each other out. I think pulling rank has a lot to do with how your use your colours- although the primary colours ‘speak louder’ than secondary ones, you could strategically use a subtle colour in a powerful way.

  19. Alam Maya says:

    I blog about make money online. Thank for sharing…

  20. Anchalee says:

    Dear Thai,

    Thanks for great article! This is what I’m looking for. However, I still a bit confuse as every color has both good and bad effects, so I don’t know what is the best choice for me. I’m planning to create a blog about depression, name “Goodbye Depression”. It will not be too formal (like health organization) but should looks professional and I want the reader feel cozy like they are talking with someone they know and understand them, not talking to the big health organization.

    Do you have any suggestion what is the best color combination I should use?

    Thanks a lot :)

    • Thai Nguyen says:

      Hi Anchalee!

      It is helpful to keep in mind that colour psychology is always interwoven with context- that is why there are the positive and negative divisions. So, if a person is hungry and they see red, they are going to get hungry. If you are tense and you are surrounded by red, you will most likely become anxious. The colours will magnify and bring out whatever disposition you are favouring at a certain point. With that said however, colour can also have the reverse effect- someone hungry being shown green may all of a sudden feel less hungry; someone tense who is exposed to sky blue or white will relax.

      It is a two-way street depending on context, disposition, and external influences. That is why you have both positive and negative effects.

      I hope this helps!

  21. Brian says:

    Big fan of testing, but don’t ignore the wealth of testing that’s already been done and available right in front of your eyes without spending a dime of your own money.

  22. Scott Ewart says:

    Great read, this is very informative. I learned a lot and the color combination is good. I like how you indicate positive insight and negative in every color. Thanks for sharing your post.

  23. Jeff Beeman says:

    Just got done with a color change to my blog before finding this article…I think I’m on the right track Shooting for that BLUE “cool and calm” look but added a little splash of red here and there to draw attention.

    Coming from a Advertsing back ground RED is how you set yourself apart from the crowed or direct attention to a blurb in the ad copy you want noticed. Walk into a big mall and what store do you normally notice first in your line of sight?? Might be one with a Red Logo or Marquee.

    Thank you for your Tips and keep them coming!

  24. Dehradun Diary says:

    Interesting and informative article I learned a lot and the color combination is good. I like how you indicate positive insight and negative in every color……

  25. David says:

    I try and be fairly neutral but sometimes I worry my sites are a bit too bland. Are there any issues with mainly greyscale sites?