The Objeqt Optimization Blog:

Actionable Posts to Help You Improve Your Conversion Rates

Whether you’re just getting started with conversion rate optimization or you’re an old pro, check out our library of how-to-posts, guides, and more. Click the topic you’re interested in now!

Colors & Conversions in eCommerce Design

Colors and Conversions in e-Commerce Design

The psychology of color is a subject of strong disagreement in marketing and ecommerce design. We know we need it, and we’d like there to be a list of rules to follow that remain the same in all instances – but there isn’t. Color preference, associations, and color cause and effect, vary widely between individuals and cultures.

So, what we’re left with is what we’ve always been left with…

We have to design based on close research of our target audience – and that goes for colors too.

That’s not to say that there aren’t valuable guidelines for color selection that are grounded in science – there are (and they’re outlined below).

Here is what we know, what we think, and what has been proven to work when it comes to color and conversion in e-commerce design.

Psychological Underpinnings: Why are colors so important to conversion?

Studies show that humans understand visuals faster because they affect us both cognitively and emotionally.

According to visual communication consultant, Mike Parkinson:

“Cognitively, graphics expedite and increase our level of communication. They increase comprehension, recollection, and retention. Visual clues help us decode text and attract attention to information or direct attention increasing the likelihood that the audience will remember.”

“Emotionally, pictures enhance or affect emotions and attitudes. Graphics engage our imagination and heighten our creative thinking by stimulating other areas of our brain (which in turn leads to a more profound and accurate understanding of the presented material).”

When your purpose is to persuade, your best bet is to leverage emotion. And nothing, not words or entire images, appeals faster, or more powerfully, to people’s emotions than color.

According to Kissmetrics, 85% of shoppers place color as the primary reason for why they buy a product and color increases brand recognition by 80%. People are also said to make subconscious decisions in under 90 seconds, and color is a great way to trigger action. – Conversioner

Colors and Conversions in e-Commerce Design
Colors and Conversions in e-Commerce Design

If you’re in doubt that color has any real bearing on human emotion and ensuing behavior, consider this:

When the University of Iowa painted the opponent’s locker room at their football stadium Pepto Bismal pink (also known as “drunk tank pink”, or Pantone Baker-Miller Pink), they did so because research had shown that particular hue caused muscles to weaken and moods to calm in people who were exposed to it for a long time.

And, in the 1970s, Alexander Schauss noted that starting at Pepto Bismal pink made his heart rate slow, which prompted him to suggest that Naval correctional prison cells be painted pink from floor to ceiling. It sounds like the result of losing a bet, but the Navy did it, with these results:

“Since the initiation of this procedure on 1 March 1979, there have been no incidents of erratic or hostile behavior during the initial phase of confinement.”

Pink isn’t the only effective color for influencing emotion and behavior. Traditionally, certain colors are associated with certain emotions.

Emotional Color Chart
Emotional Color Chart

Research into human emotion has come a long way since the 1970s. In fact, a 2014 study from Glasgow University suggested that human beings really only have four emotions:

  1. Happy
  2. Sad
  3. Fear/Surprise
  4. Anger/disgust

Those four basic emotions can be blended to create the variations we all feel, like bittersweet or “happy tears.”

Furthermore, emotions are hard-wired to generate actions.

Happiness, for example, makes us want to share. Just look at the “mirroring” behavior that happens when you smile at someone – they’ll most likely smile back. Even newborn babies do this. It’s called “social smiling.” In social media, positive articles are more likely to be shared than sad ones (but articles that provoke anger and anxiety are also shared at a higher rate).

Fractl published a list of “The Emotions of Highly Viral Content,” and all of them – ALL of them – are related to happiness.

  1. Amusement
  2. Interest
  3. Surprise
  4. Happiness
  5. Delight
  6. Pleasure
  7. Joy
  8. Hope
  9. Affection
  10. Excitement

Interestingly, the image they chose to display each emotion in their study was a color chart based on Robert Plutchik’s “wheel of emotions.

Wheel of Emotions
Wheel of Emotions

Don’t be fooled into using this chart as your guide to marketing magic, however. Green does not inspire terror and purple does not disgust the populace.

Colors by Target Customer

Colors affect emotion and emotion spurs us to action. But the question remains: How can we find the right color for our target audience that will produce a conversion?

We’re not limiting the discussion here to CTA button colors (though we’ll get to those). But rather the overall color story of an e-commerce website.

And which colors you use depends on your target customer.

What Women Want

According to research from Sherwin-Williams, colors that appeal most to women are blue, purple and green; while orange, brown, and gray are least appealing. But, once again, don’t be fooled by this generalization, because choosing paint colors for your home is a lot different than selecting a car, your wardrobe, or your next laptop.

If the Sherwin-Williams research was the absolute last word, why would women’s clothing designer Dorothee Schumacher have her website professionally designed in black and neutrals (with just a pop of green)?

Dorothee Schumacher Website Color Scheme
Dorothee Schumacher Website Color Scheme

The Dorothee Schumacher website color scheme is a user-focused design decision that deliberately attracts customers who prefer high-end fashion to cheaper fast-fashion. The color story here is one of high cost, high quality, luxury and sophistication – all attributes associated with black.

If you look at the websites of high-end cars, this theory bears out.

Website Colors High-end Cars
Website Colors High-end Cars

In another user-focused design decision, Conversioner made a prom dress site pink “to project calm, hopeful and positive feelings.” Pink was very much part of the emotional story they wanted to tell.

The color pink was introduced to more than just the banner or background; the images on the page were given a pink hue and were all directing to a certain type of experience – our goal was to help women (mothers and daughters) experience the delight of shopping online in a world of calm and positive emotions. These changes and others increased revenues by 86%.

Black, pink, blue, green? Women want them all. But not all the women at the same time, for the same products. And this is true for any demographic. You can’t say “men like earth tones, so my website will be brown” and expect that to work. The effect color has on emotion and action is more contextual than that.

The “right” color is the one that brings your target customer closer to their desired outcome, whether that’s to feel connected to their prom-going daughters, or be delighted by the heady luxury of high-end clothing or the purchase of James Bond’s favorite car.

Color by Desire

Ever wonder why so many BUY buttons are red? Because impulse shoppers, the quickest wins in e-commerce, gravitate towards orangey-red. Their desire for immediate gratification seems to get a boost from action-oriented red. In fact, research from the University of Rochester in 2011 showed that people who were exposed to the color red had faster reaction times in general.

Just look at fast food logos if you’re in any doubt of red’s ability to tip people over the edge into impulse-purchasing (yellow, incidentally, also makes people feel hungrier). Can red create desire? Probably not. But it can enhance a desire that’s already there, and possibly provide the tipping point from desire to action.

Fast Food Logos Colors
Fast Food Logos Colors

Environmentally-conscious buyers, who want to feel like their purchase decisions make a positive impact on the natural world, go for earth tones (greens and blues especially), and health-conscious purchasers will always go for a fresh-looking green.

Environmentally-conscious Buyers Prefer Green
Environmentally-conscious Buyers Prefer Green

A lot of this is common sense.

Some of it isn’t though.

Color associations vary depending on culture. In Chinese culture, white is the color of mourning; in Brazil, purple is the color of death; and Hindus hold the color yellow as sacred, while yellow makes Greeks feel sad and means jealousy in France.

So, when I tell you that the color you choose should be tailored to your audience – I’m very serious. Every audience is different, even if they share the same cultural background.

Color Association 101 for U.S. Audiences

Color Associations
Color Associations

RED – Stop. Danger. Hot. Urgency. Physical dominance. Errors (like your teacher’s red pen). Use for sales, promotions, and, of course, CTA buttons. Dmix wrote about one of their projects in which they tested green and red button colors. In their testing with 600 subjects they found that conversions increased by 34% when they used red button.

ORANGE – Urgency. Happiness. Energy. Optimism. Use for logos and CTA buttons. Unbounce says the color of the future for call-to-action buttons is orange.

YELLOW – Sun. Happiness. Optimism. Money. Encourages appetite (it’s a food color) and is often used by brick-and-mortar stores to grab attention from window shoppers.

GREEN – Go. Nature. Freshness. Progress. Relaxation. Use to set the overall tone of your eco-friendly or health-conscious website and landing pages (you can also use nature imagery – you’re not limited to flat colors!).

BLUE – Relaxation. Trust. Authority. Cleanliness. Cold. Fact: Blue is the #1 favorite color of all people and it’s the most commonly used color for corporate brands.

PINK – Calm. Joy. Femininity. Love. Romance. Use to foster feelings of sisterhood and connection.

PURPLE – Creativity. Spirituality. Calm. Classic. Often used in brands that cater to older women.

BLACK – Power. Luxury. Quality. Used most often to market luxury products.

WHITE – Clean. Modern. Simplicity. Order. Think Apple.

GRAY – Practicality. Neutrality. Contemporary. Always classy.

GOLD – The color of money. Use it as an accent to luxurious black.

Lamborghini Colors
Lamborghini Colors

5 Tips for Using Colors that Convert

  1. Keep it simple – don’t use more than 4 colors. Ever notice the color schemes of logos? They’re really simple. One, two, maybe three colors. Try to pile too many colors into a color scheme, and it will look amateur rather than elegant. And don’t forget about white. White always looks clean and modern, and it makes other colors pop.
  2. Match your colors to your target customer’s psychological needs. Do they need to trust you? Do they need to feel safe, secure and happy? Do they need warm fuzzy nurturing feelings about your product, or are they buying your product because they want to feel on the cutting edge of modernity (just look at Sony Vaio’s U.S. website for that color scheme: Black and white with a metallic accent).
Sony Vaio Website - Exemplify Success
Sony Vaio Website – Exemplify Success
  1. If your products follow trends, your colors should too – think in terms of Pantone’s color of the year and seasonal colors. In fact, just read Pantone’s color descriptions in their color report articles. They’re all about emotions.

    PANTONE 19-4045 Lapis Blue

    Conveying even more energy is Lapis Blue. Strong and confident, this intense blue shade is imbued with an inner radiance.

  1. Class up anything with gray. Grayscale photos, gray text (instead of black) – gray can be charmingly nostalgic or bracingly modern, but it’s always classy.
  2. Don’t just pick a color because it’s your favorite. Do you know how many amateur websites I’ve seen done in red, black and white? Because the owner liked the look? When it didn’t fit the brand, the product, or the customer – at all? Too many. Don’t do that. And, don’t choose a color scheme because it’s on a website you like. If the website is from a different industry, chances are their customers are entirely different from yours (so what works for them likely won’t work for you). And if the website is in the same industry, it’ll look like you’re copying.

Essentially, base your color choice only on what your target customers are looking to feel. Anything else won’t produce the conversions you want.

In the words of Peep Laja:

Serious gains in conversions don’t come from psychological trickery, but from analyzing what your customers really need, the language that resonates with them and how they want to buy it. It’s about relevancy and perceived value of the total offer.

And that goes for color choice too.

Published by

SaaS Consultant & Customer Success Evangelist. Founder at Authentic Curation. Moderator at @ProductHunt & @GrowthHackers. Previously: Growth at @Inboundorg. INFJ.