Color is an essential part of how we experience the world. But do colors really matter for conversion optimization? Can a button color guarantee better performance for a call to action (CTA)?
Everything in our world is made up of things that are of various color. Different colors can lift us up or bring us down.
There is also a psychological side to colors—certain colors are associated with different qualities and emotions.
In different cultures, different colors can mean contradicting things. For example, white is the color of mourning and death in Chinese culture, but the color of death in Brazil is purple. Yellow is sacred to the Hindus, but represents sadness in Greece and jealousy in France.
In North America, green is typically associated with jealousy. People from tropical countries respond most favorably to warm colors; people from northern climates prefer cooler colors, and so on.
It’s also said that, in North American culture, the color blue creates a feeling of trust, but also encourages appetite. Green supposedly means nature, freshness, growth, and money. Yellow brings with it sunshine and happiness.
There’s some truth to all this, but can we translate these supposed associations into conversion lifts?
(If you’re ready to move past testing button colors and get some real gains, enroll at CXL Institute to become a conversion optimization master.)
Experiments with color usage
Red can make you a winner…
Almost universally, red means stop. Red means danger. Red means hot. And by analyzing the results in the 2004 Olympics, researchers found that red also means dominance.
They examined boxing, taekwondo, Greco-Roman wrestling, and freestyle wrestling, basically all of the one-on-one sports. In those sports, competitors are randomly assigned red or blue outfits, so no rigging is possible.
In 16 of 21 rounds, those wearing red won. Similar tendencies were found in the 2004 European Soccer Championship. Researchers are careful to point out that the effect is subtle at best. And that red can be a deciding factor only among evenly matched competitors—but it still exists.
“We find that wearing red is consistently associated with higher probability of winning,” University of Durham researchers Russell Hill and Robert Barton wrote.
…or a loser
Researchers at the University of Rochester have found that the color red can also keep us from performing our best on tests.
In their experiments, they wanted to find out if the perception of red would have any effect on the results of important tests, such as an IQ test or a major academic exam. In an academic context, the color red is traditionally associated with marking errors on school papers.
Four experiments showed that just a brief perception of the color had a negative impact on the results. “It led people to do worse without their knowledge,” said Elliot, one of the authors.
The findings showed that “care must be taken in how red is used in achievement contexts,” the researchers reported, “and illustrate how color can act as a subtle environmental cue that has important influences on behavior.”
Color and the taste of hot chocolate
It turns out that the color of the container in which food and drink are served contributes to the perceived aroma and taste. That’s the conclusion in the case of drinking hot chocolate, explains Betina Piqueras-Fiszman, a researcher at the Polytechnic University of Valencia in Spain, and her colleague Charles Spence, from the University of Oxford.
The experiment involved 57 participants. They evaluated samples of hot chocolate served in containers of four different colors: white, cream, orange, and red. All were the same size, and all were white on the inside.
The flavor of the hot chocolate served in orange- and cream-colored cups was judged better by the participants. However, the sweetness and the aroma was judged to be similar no matter the color.
“There is no fixed rule stating that flavor and aroma are enhanced in a cup of a certain color or shade,” recognized Piqueras-Fiszman. “In reality this varies depending on the type of food, but the truth is that, as this effect occurs, more attention should be paid to the color of the container as it has more potential than one could imagine.”
In other experiments, it has been demonstrated that strawberry mousse appears to be sweeter and more intense on a white plate compared to a black one.
What’s the best color for CTA buttons?
Red might increase your chances of winning in sports. Your next hot chocolate may taste better in an orange cup. But what does this have to do with conversions on the web? Does red really give you an advantage for your CTA button?
Green vs. red: A call-to-action button war
There are also a number of interesting A/B testing case studies in which an orange or mostly red button was up against competition from various other colors, including green.
When you think about it, green is mostly associated with positive emotions. When the traffic lights turn green, it means you can drive. Vice-versa with red. The color is mostly associate with negative emotions.
So what you think? Which button color won?
Green or red, red or green? Read the following case studies and find out.
Case study 1
Dmix wrote about 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 a red button.
A 34% lift in conversions is impressive. One to nothing for red buttons.
Case study 2
The next test comes courtesy of HubSpot. They ran a similar test with green and red buttons on one of their client’s web pages. They ran the test over a period of a few days worth of traffic and, in total, had over 2,000 subjects visit.
Their result? The red button outperformed the green button by 21%. That makes it 2–0 in favor of red buttons.
Case study 3
The third test comes courtesy of VWO. Their client was an ecommerce site selling mobile phones and accessories. They tested “Buy Now” button colors on the site. The competition included a white button with green text, green button with white text, and red (darker orange) button with white text.
And the winner was—you guessed it—the red button, this time with a 5% conversion lift. That’s 3–0 for the red button.
Case study 4
So far, we’ve seen total dominance by the red button. So let’s change things up. This time, let’s see how it does against a blue button, courtesy of a study from Monetate. In their tests, surprisingly, the blue button won, producing a 9% lift.
Anyhow, the final from these studies favors red(ish) buttons, 3–1. So, red the best color for CTA buttons.
Or is it?
Didn’t Peep write the following about colors in web design in this post:
I liked this tweet by Naomi Niles:
I couldn’t agree more. This kind of narrative gives people the wrong idea about what testing is about. Yes sure – sometimes the color affects results – especially when it affects visual hierarchy, makes the call to action stand out better and so on. But “green vs orange” is not the essence of A/B testing. It’s about understanding the target audience. Doing research and analysis can be tedious and it’s definitely hard work, but it’s something you need to do.
In order to give your conversions a serious lift you need to do conversion research. You need to do the heavy lifting.
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.
The last case study
Let’s take a look at one last example, which will help this make a whole lot more sense. RIPT Apparel tested the color of their “Buy Now” button to see if it would make any difference to their bottom line.
This is the original version:
And this was the new button:
To no great surprise, conversion numbers went up. Looking at the previous cases, one could say that if they changed the button to red it might convert even better. Well, not quite.
Take a look at the original again. Do you see anything weird? Something that should be there but isn’t? The original is missing a button! The “Buy Now” CTA gets lost in the design. You can see the new button clearly, regardless of whether its green, red, yellow, or any of several colors.
This, unfortunately, is how the great controversy of button colors got started. You see amazing results that tell you that one color always converts the best. That is, until you look closer.
More often than not, these tests reveal that, previously, there was no button, or the button is just much more prominent. It stands out from the rest of the page and converts better because it’s a high-contrast color, not any single color.
Monetate, which ran the blue vs. orange button test, had this to say:
But, if you dig into the results, you’ll see that orange buttons were almost always tested against a control of no button at all. In cases like these, it’s hardly a surprise that orange buttons make a difference. Of course they do … when compared to no button at all! Practically any button will make a difference, regardless of color.
In the case of RIPT Apparel, they tested one final version, with a yellow button:
Conversions went up a further 6.3%. So yellow beats green? No, no, no.
Color makes little difference on its own
The color of the button has little-to-no effect on its own. What’s more important is how it changes the visual hierarchy of the page and how it makes the call-to-action stand out.
It also depends on what we’re used to seeing. Bing increased their revenue $80 million by finding the exact color of blue for their links. People are used to seeing blue links. When the World Wide Web first came to be, blue was the color of links. Microsoft engineers working on this also admitted that “…it was a shade of blue quite similar to the one used by Google.”
There is no best color for conversions. In the yellow button’s case, they also added urgency (“$10 only for 24 hours”), which has been demonstrated time and time again to lift conversions. In the case of Bing and blue, it was the power of convention in action.
Back to HubSpot
The same can be said for the HubSpot’s example. Take a look at it again:
Do you notice anything that might contribute to the red button being a better choice? Something in the overall design of the page?
Green is one of the main colors of the site! And what happens when you add a green button to the mix? It won’t stand out. They could have tested green against almost any other bright color and would have seen the same “amazing” results.
To HubSpot’s credit, they to say in the case study that they “cannot generalize these results to all situations.” But still, a green button on a page with a dominant green design? Really?
Color matters for your call-to-actions. But saying that one color converts better than another doesn’t hold. There is no universal best color. What works on one site doesn’t necessarily work on another.
Visual hierarchy matters. So does making your CTA buttons stand out with a high-contrast color. The “green vs. red” debate is less about color per se and more about whether the color helps the button stand out.