11/9/22, 5:45 PM The Button Color A/B Test: Red Beats Green

The Button Color A/B Test: Red Beats Green

Joshua Porter

Updated: February 01, 2017

Published: August 02, 2011

Button color is one of the longest standing debates in the world of conversion and
optimization. Everyone seems to have their favorite color. At different times in the last two
years, I’ve heard green, pink, red, orange, and even light blue as THE ONE COLOR that works
best. Obviously, this can’t be the case.

FREE MARKETING PLAN TEMPLATE

Fortunately, button color is extremely easy to test. Back in the day, we ran a button color
test on theOutline
home page of Performable's
your company's website
marketing , andinthe
strategy oneresults surprised
simple, coherentus.plan.
Button color
had a big effect on the overall conversion of the page.

DOWNLOAD FOR FREE

https://blog.hubspot.com/blog/tabid/6307/bid/20566/the-button-color-a-b-test-red-beats-green.aspx#sm.00015b181w1dqydi9u5fux5nktswn 1/6
11/9/22, 5:45 PM The Button Color A/B Test: Red Beats Green

The colors we chose to test were green and red. First, I created the normal home page with
the green button color I had originally designed. Then, I cloned that page (created an exact
copy) and changed the button color to red. I did not change anything else on the page. The
content, message, and graphics were exactly the same on each page variation. The only
difference was the hex value that determined the color of the button. If there was some
conversion difference affected by the button color, the idea was that we would see it in this
test's results.

You can see the two pages we tested below:

Each of the colors we chose -- green and red -- have interesting connotations.

Green
Green connotes ideas like “natural” and “environment,” and given its wide use in traffic
lights, suggests the idea of “Go” or forward movement. Green was also in Performable's
color scheme (along with black and gray), so a green button fit a bit more nicely into the
page design. Green is also heavily used at the moment, being the chosen hue of many web
2.0 websites. (Although I’m not sure how this happened.)

Red
FREE MARKETING PLAN TEMPLATE
The color red, on the other hand, is often thought to communicate excitement, passion,
blood, andOutline
warning. It is
your also used marketing
company's as the color for stopping
strategy in oneat trafficcoherent
simple, lights. Red is also
plan.
known to be eye-catching. Red, in general, is not used as a button color nearly as often as
green. DOWNLOAD FOR FREE

https://blog.hubspot.com/blog/tabid/6307/bid/20566/the-button-color-a-b-test-red-beats-green.aspx#sm.00015b181w1dqydi9u5fux5nktswn 2/6
11/9/22, 5:45 PM The Button Color A/B Test: Red Beats Green

Hypothesis
So, which color would convert more people to click? Would it be green, which connotes “Go,”
or red, which connotes “Stop”? Would those connotations actually affect whether or not
people clicked?

My hunch was that even if one color performed better than the other, the difference would
be small. I could imagine that one color might be more appealing or grab the user’s
attention better than another, but that the overall conversion numbers would be
overwhelmed by the overall message of the page. I assumed that the results of this test
would show what we’ve seen in testing before -- that the major difference between good and
poorly converting pages was the message the page was communicating.

Button Test Results

We ran the test over a few days of traffic. In total, we had over 2,000 visits to the page, and
for each visit, Performable recorded whether someone clicked on the button or not. (Using
Performable's tools , all analytics and conversion data were automatically gathered, so we
could watch along as the results rolled in.)

The result?  The red button outperformed the green button by 21% . 

21% more people clicked on the red button than on the green button. Everything else on the
pages was the same, so it was only the button color that made this difference. This was a
much larger difference that I expected. 

Consider this: a 21% increase in the conversion of this page is potentially a 21% increase to
all downstream metrics. So  by getting 21% more people to click at the top of this process,
we added 21% at the bottom as well. This is why optimizing pages is so valuable. We did not
have to increase traffic to the page to see improved results . Instead, we improved the 
efficiency  of the page. And by improving conversion on existing traffic, we thus added
considerable value.
FREE MARKETING PLAN TEMPLATE
Additionally, it is interesting to note that this is the sort of result you can’t easily find in user
testing. Because
Outlineityour
takes so many trials
company's to findstrategy
marketing a statistically
in one significant result (often
simple, coherent plan.
thousands of trials), it would cost a fortune in time and money to run the test with that many
DOWNLOAD
people face-to-face. In general, A/B FOR FREE
testing is great for quickly and easily running tests

https://blog.hubspot.com/blog/tabid/6307/bid/20566/the-button-color-a-b-test-red-beats-green.aspx#sm.00015b181w1dqydi9u5fux5nktswn 3/6
11/9/22, 5:45 PM The Button Color A/B Test: Red Beats Green

of individual variables on a page like this. That’s why its a good idea to use a balanced
approach when testing, using the appropriate test type to garner the results you want.

Marketing Takeaway
As always, we cannot generalize these results to all situations. The most we can say is that
they hold for the conditions in which they occurred: in this page design, on this site, with the
audience that viewed it. It could be that Performable’s audience happened to like red (or
dislike green) or that red happened to contrast nicely with the green in Performable's color
scheme. There are many possible reasons that could explain why this particular test resulted
in the way it did.

Therefore, do not go out and blindly switch your green buttons to red without testing first.
You should test colors on  your  page and with  your  audience to see what happens. You
might find something interesting in your data that we don’t have in ours.

What kinds of A / B tests have you run on your own website? What were the results?

Topics: Calls to Action

Don't forget to share this post!

FREE MARKETING PLAN TEMPLATE

Outline your company's marketing strategy in one simple, coherent plan.

DOWNLOAD FOR FREE

https://blog.hubspot.com/blog/tabid/6307/bid/20566/the-button-color-a-b-test-red-beats-green.aspx#sm.00015b181w1dqydi9u5fux5nktswn 4/6
11/9/22, 5:45 PM The Button Color A/B Test: Red Beats Green

Related Articles

21 of the Best Landing How the HubSpot Blog 12 Great L

Page Design Examples You Generates Leads [+ How Examples
Need to See in 2022 Yours Can, Too] Copy

Aug 26, 2022 Jan 08, 2021 Nov 09, 2016

Popular Features


Free Tools


Company


FREE MARKETING PLAN TEMPLATE

Customers


Outline your company's marketing strategy in one simple, coherent plan.

Partners


DOWNLOAD FOR FREE

https://blog.hubspot.com/blog/tabid/6307/bid/20566/the-button-color-a-b-test-red-beats-green.aspx#sm.00015b181w1dqydi9u5fux5nktswn 5/6
11/9/22, 5:45 PM The Button Color A/B Test: Red Beats Green

Copyright © 2022 HubSpot, Inc.

Legal Stuff
| Privacy Policy
| Security

FREE MARKETING PLAN TEMPLATE

Outline your company's marketing strategy in one simple, coherent plan.

DOWNLOAD FOR FREE

https://blog.hubspot.com/blog/tabid/6307/bid/20566/the-button-color-a-b-test-red-beats-green.aspx#sm.00015b181w1dqydi9u5fux5nktswn 6/6