The Psychology of Colors: How Does Color Affect your Conversion

Have you ever wondered why Facebook is Blue? How the color of a website affects reader experience? Be it a blog or an e-commerce site, the color of site makes a lot of difference.

This guide is for all those bloggers, entrepreneurs & webmasters who understand that design thinking is the way to progress. You would learn how color affects sales of your site & how readers perceive certain colors.

In a study conducted by Dr. Andrew Elliot at the University of Rochester, simply placing a thick red border around a photo of a person increased how attractive a stranger perceived the person in the photo?

According to Psychologists, it’s because humans often flush red when they are attracted or interested in someone. In other words, red is the color of romance.It stimulates us unconsciously.

Color has an enormous psychological influence on human brain and is the most powerful visual cue for drawing immediate attention. Scientists have long found out that color affects the mood, personality and the perception of a brand.

Did you know 92% of the people say that visual dimension is the #1 influencing factor affecting their purchasing decision (over taste, smell, etc.)?

Or that color increases a brand perception by 80%.

For instance, Coca-cola has red as their signature color, as red has been scientifically proven to increase your heartbeat and raise your blood pressure. It instills excitement.

Similarly HP that has blue in its logo. Blue is a cool, clear color which has a feeling of trust and dependability.

Till now, it’s clear that color has a profound effect on us but how can we effectively utilize it to capture other people’s attention.

What Colours Mean For your Readers?

All of the colours have different psychological connotations and will affect people in various ways. Colours have meanings for people which have been evolutionarily and socially enforced. These colours have just as much influence on the internet as they do in real life.

psychology of colors in Webdesign
  • Save

For example the most powerful psychological colour is probably Red.

Red has connotations of blood, violence, passion, love, stimulation, anger and aggression and you can use this to encourage people to take action on your blog. If you think about it all of these emotional responses require you to take action like anger requires you to either fight or to take flight both of which are very definite actions. So you should use red on areas where you want your visitors to do something, places like the sign up box ‘enter your email’ or perhaps near your Facebook like button have a red arrow pointing to it.

Suggested Niche for Red Colour Scheme – Relationship advice or dating website.

Blue –

In general blue tends to have connotations of calm, trust, coolness and intelligence. All of these things are character traits that you would probably want to have as well as emotions and so a great place to use this as a colour scheme would be your about page. Putting people at ease and projecting an image of intelligence and trust is usually what you are trying to do with the words in an about page so why not use colour to emphasise these features.

Suggested Niche for Blue Colour Scheme – Sales or sign up pages and Water sports.

Colors effect in Web-design
  • Save

Yellow –

The effects of yellow are things like confidence, optimism, friendliness and extraversion. That would mean that this colour scheme would go well with a health and well-being blog or perhaps even a fitness blog. Anything where you are trying to encourage these traits from your readers. Also if you have any quizzes or questionnaires that you would like readers to complete, using yellow to instil confidence could help them to complete it.

Suggested Niche for Yellow Colour Scheme – Flowers, cleaning tips, health and fitness and quiz.

White

When you see white you will often think of things like cleanliness, purity, efficiency and clarity. This is the colour that you will want to use to focus a reader’s attention on your content area. Not only do readers expect words to be written on a white background but it is also a clean area where the focus is on the words and nothing else. It can also give the impression of added space and you might know from people painting the walls white in houses to create the illusion of space. This can also work on your blog showing that the content is taking priority on your page.

White is also good on pages of your site where you are simply trying to get information across to your readers as directly and efficiently as possible so things like the contact page will really benefit from the white background.

Suggested Niche for White Colour Scheme – Company, e-commerce and profile websites.

How can we leverage or use it as a tool to market our brand. For that, let’s first understand the basics of color.

The Concept of  Colors in web conversion:

Color is broadly divided into three categories: Primary, Secondary, and Tertiary. Primary colors are red, blue and yellow.

These can be mixed to create secondary colors that are purple, green, orange. Lastly, there are tertiary colors that are combinations of primary and secondary colors.

There are six tertiary colors; red-orange, yellow-orange, yellow-green, blue-green, blue-violet, and red-violet.

For example, tertiary color produced when mixing the primary color blue with the secondary color green is called ‘blue-green.

You can create different tint (add white), shades (add black) and tones (add White + Black) using the above colors.

Color Wheel
  • Save
Thus, on the right-hand side, you can find red, orange and yellow which are warm colors and on the left-hand side are the cool colors: blue, green, purple.

Different Cultures drives different color emotions

A single color can have different meanings across different cultures. White may not be a wedding color in India.

It is a color of mourning. However, in western cultures, it is a color of celebration and wedding. Similarly, red which is associated with romance, excitement, thrill is a color of death in certain parts of Africa.

colours in culture
  • Save

According to a study by N.Yoshioka, Blue is the color of calm across all cultures. With all that said, there are some general rules for applying color universally.

In a study published in the Journal of Experimental Psychology: General, Patricia Valdez, and ULCA’s Albert Mehrabian found that Blue, blue-green, green, purple blue, red purple and purple were perceived as the most pleasant colors while green yellow and yellow as the least pleasant. The relations were “highly consistent”, and the relationship between colors and their emotional reactions were “highly predictable”.

Color influences Men and Women Differently

Depending upon the gender your website is targeting, research has shown that women choose softer colors over brighter color while men choose otherwise.

According to a study by Hallock, Blue is favored by both Men (57%) and Women(35%) than rest of the colors. Here is the detailed analysis of the same:

Color Psychology across gender
  • Save
What’s most notable above is both men and women dislike Orange and Yellow. However, women prefer yellow over orange while men prefer orange over yellow.

According to Kissmetrics, Men prefer achromatic colors like shades of gray or pure colors while women preferred tints.

Men Women Color Tints
  • Save
Given how the taste of men and women is different, you should choose the color carefully by understanding that gender makes the greater percentage of your target audience or customer.

If your audience is men, try using green or shades of green.

Color Impacts Emotions and Behaviors

Color can make us feel happy or sad. It can make us feel hungry or relaxed. As a brand, it’s crucial for you know the psychological effect color has on an individual or your Client.

Let’s take a closer look on how color drives emotions and behaviors.

emotion and Colors
  • Save

According to the chart above by CoSchedule, Orange portrays energy yet is inviting and friendly. It is balanced color. Similarly, yellow is associated with happiness, sunshine and hope.

It can make your design user-friendly by making the reader feel more cheerful and optimistic. This explains why yellow and orange against the white or gray backgrounds are the most used website buttons and gets maximum clicks in a majority of websites.

Remember, Amazon.in product page where you find the yellow “Add to Cart” and Orange “Buy Now with 1-Click” buttons.

Note: Orange and Yellow buttons should be on contrast background; if it would have been on any other background say red, it will create the same result. This is because color contrast is how our brain finds and attend to relevant stimuli.

How Color Contrast Increases the Conversion?

To check how color contrast works, let’s look at ShoutMeLoud Home Page at different sizes.

ShoutMeLoud Home Page
  • Save
 
Shoutmeloud Home page
  • Save

Shoutmeloud Color Scheme
  • Save

Shoutmeloud Color Scheme gray
  • Save

Did you notice that the gray Call-to-Action button still stands out?

This is the effect of contrast, makes the most significant actions pop out increasing the conversion rates.

Studies suggest that people make a subconscious judgment about a product within 90 seconds of initial viewing. Up to 90% of that assessment is based on color alone.

I think now you know, what you need to do if you want to capture the attention of your customers by utilizing colors.

If you want people to notice you at the bar, wear bright colors which contrast with the dark background of bars. If you want to people to buy your stuff, choose a color that is opposite of your website’s background.

There are different online tools to measure color contrasts. WebAIM is a color contrast checker tool for checking the ratios of two different colors and whether they are according to Web content accessibility guidelines.

You can also use the following formula suggested by the World Wide Web Consortium (W3C) to determine the difference between two colors.

(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2)) The difference between the background color and the foreground color should be greater than 500.

Case Studies which shows how color affects conversions

1. CareLogger: A health app that allows you to keep track of your diabetes. They had a green Call to Action (CTA) button that they wanted to test with a new red one. After 600 signups with the exact same CTA and just a different button color, the red button saw 34% more conversions than the green.

Care blogger button call
  • Save

Similarly, Unbounce changed a dark blue “Add to Cart” button on a gray background to bright green. It improved its conversions by 35.81%.

2.  UK Airline BMI – It had an urgent CTA that read “Hurry! Only XX seats left.” When they added a red background to the CTA, they increased their conversions 2.5%. Thus, Colors that coordinate with the message may increase conversions. Consistency among text and colors can help reinforce the message you want to instill in visitors.

3. Performable: Performable wanted to learn how changing the call-to-action button color would affect the site’s overall conversions. Changing the CTA button color from green to red Performable was able to increase its click-through rate by 21%

Performable Color Conversion
  • Save
4.  Heinz: Heinz changed their signature ketchup color from red to green. Result: More than 10 million bottles were sold in the first seven months following its introduction,$23 million in sales [the highest sales increase in the brand’s history]. All because of a simple color change.
Heinz Red to green
  • Save

Conclusion:

There is no sure shot solution or one right color that will work across all platforms. So, the question is how do you pick the right color? Here is my suggestion:

  1. Study the market you want to attract based on age, gender, culture and the color language they will respond best to.
  2. Do thoughtful A/B testing to determine which color combinations and positions will work best for you to generate maximum leads and conversions.
  3. Apply it on your website and keep reinventing and experimenting with colors and color contrast, brightness and saturation.

So, which Color attracts you the most. Have you done any interesting A/B testing on your website or product?

Subscribe on YouTube

  • Save
Authored By
Editorial Staff at ShoutMeLoud is a team of writers led by Harsh Agrawal.

19 thoughts on “The Psychology of Colors: How Does Color Affect your Conversion”

  1. Really, Color Matters so much everywhere. Such an Incredible Post. Learned a lot of new thing about the psychology of Colors. Thank you very much for sharing such an amazing posts along with the niche posts. 🙂

  2. Krishna Moorthy D

    Hey Shallu,

    Amazing article, really amazing one indeed. I’ve experimented this earlier and found many useful points to implement in our website to improve conversion rates. For me, Flat UI colours do all the perfect job and I’ve heard that Flat UI colours are improving trust and conversions as well. Great to see your Wife writing killer article Harsh (You’re lucky).

    Keep writing Shallu and make sure you’ve filled the Author bio too 🙂

    Regards

    Krishna

  3. Hi Shallu,
    Such a great post, you share very helpful post for increase visitors by colour psychology. Thanks for sharing, please keep posting……..

  4. Wow. . Very detailed description & supporting proof. Very authentic, luckily my blog is Red in color. … I will make some changes to the conversion bar based on your suggestions.

    Thanx for such a wonderful post.

  5. I find color and conversions fascinating Shallu. Fab finds. My blog is easy. I blog from paradise. I blog from the tropics. So plenty of green – palm trees and jungles and lush tropical environments – and then from there, plenty of white space to make my green and content pop. I use a few colors – literally – on my blog so my few colors match perfectly with my brand. Any more colors and I could dilute my brand message. All about the green and all about the tropics for me. Thanks so much for sharing with us Shallu.

    Ryan

  6. Great Post!
    I also take colors very seriously on my blog and have found to have it work very effectively.

  7. The problem with colours and colour variation is that you always have to keep testing. You can guess, but testing makes sure you are using the right ones!

  8. Adesanmi Adedotun

    I am kind of colour freak and I find it extremely difficult to differentiate between few colours, few of my colleague called it colour blindness, of course it is not but with this post, I think I have gained more insight about different colours and how I can easily identified them without any hiccup.

  9. Colors really play a vital role! Thanks for demonstrating it via a real live example.
    We need to know target audience and then decide colors used in website.
    Thanks for writing such a nice article.

  10. Vishwajeet Kumar

    Thanks for this great post shallu. I actually never imagined how colors can put dramatic effects on a blog’s reader. After reading this I will surely work on my blogs colors management. Thanks again for this great article.

  11. When it comes to designing a website, banner, logo or anything, colors play a vital role in success of these designs. Color choice may vary according to age groups and gender. Your post is really helpful to understand it in more better way.

  12. Wow Shallu Yaar, I never think about color-emotions with site-design.
    Previously I thought color emotions belong us occasionally but not by business view.
    I read this awesome article with lot of interest.
    Now in my mind is one word “focus on color with it’s emotion also”
    Thanks Shallu

  13. @Shallu

    Thanks for sharing valuable article. You explained very well how colour magic work. I learnt lots of things. I will definitely apply on my blog site. Thank you so much.

  14. I have been thinking about applying colours in my blog appearance for quite some time now. I have observed one thing. If coloured fonts are used in one’s text, it looks appealing. I don’t know if that is allowed. But above all, it looks very good. Can anyone please give clarification if the same is permitted by Google.

    1. Harsh Agrawal

      Hey Barnali,

      Using of colors has nothing to do with approval from Google. It all depends on what design and theme you want for your blog.

  15. Raheem Tabet

    I never thought before, that color can affect the traffic a blog, Very interesting this article, thank you very much

  16. Thanks for this detailed post! I’ve read so many answers to these quetions, from various sources, and I have yet to “get it”. Ha! However, I have two sites which use the same theme, but one is grayed aqua and the other a deep coral. I do not especially like the coral color, but combined with a light yellow contrast, it is satisfactory. I did not like the aqua at all, until I found the perfect watercolor painting for the header, and it made all the difference. I think that was because the painting contained a lot of barn red, cheering the whole look some.
    As for action buttons, I am right now experimenting with not using them, but just staying more conversational with my audience (wounded women). So far, that is not harming my conversions any, and I like it better than push-button responses.
    Nevertheless, we all make changes, eventually, and this post has been great preparation for me!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
3.2K Shares
[i]
[i]
[i]
[i]
Share via
Copy link