What Color Should My Buttons Be?

Want to get in an animated discussion with a conversion optimization expert?

Start talking about button color. It’s a polarizing and fascinating topic.

Some people have very strong opinions on the issue of button color, swearing by their ancestors that only one color boosts conversions.

I’ve written on the subject of color before. My article was published by Entrepreneur, and portions of it used in Neil Patel’s webinar marketing on the psychology of color. This alone demonstrates the fascination we have with color — its interplay with psychology, and its impact on conversions.

Unfortunately, however, color is a topic that is often abused. By asserting all manner of universal absolutes about certain colors, conversion experts and their disciples are in a state of confused hysteria about color.

I won’t pretend that this single article will halt the confusion and bring order to the universe. Other capable writers have remarked on the subject before.

I do, however, want to assert that 1) while button color is important, 2) it’s not all-important.

We must be cautious and strategic in selecting CTA button color. Let’s not get swept away by hysteria, but let’s not totally neglect this critical component of conversion optimization.

Button color is important.

Your CTA buttons are the most valuable feature of your entire website.

The CTA is where it all happens — all the conversions, all the revenue, all the action. You can’t afford to blow it.

It logically follows that every change to your CTA button is a significant one. Everything about the CTA affects conversions — color, font, kerning, size, layout, position, copy, etc.

Adjusting button color is one of the quickest and easiest ways to increase your conversion rate.

HubSpot conducted a basic test on button color.  They ran the test over a few days, and had around 2,000 visits to the page. Here’s what they tested — green button vs. red button.

Hubspot conducted a basic test on button color

As it turned out, the red button won.

The red button gave them a 21% increase in conversions. HubSpot wrote,

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.

Exactly. One little change, and 21% improvement in conversions. Not too bad.

In conversion optimization, small changes can have big impacts. One of those small changes is button color

But button color isn’t that important.

Now that I’ve given you the good news about button color, I want to take a step back. This is my disclaimer section.

Yes, button color is important. But it’s not that important. You can waste a lot of time testing every single possible color and color combo, only to overlook more significant features of your landing page.

Button size is more significant than button color.

Consider size for a moment. It matters. A lot. Maybe even more than color.

Fitt’s Law, a bedrock principle in UX and web design, states that the bigger the button, the easier it is to click on. When target size and usability are plotted on an XY axis, it looks like this:

Image from Smashing Magazine. Fitts Law

(Image from Smashing Magazine)

The likelihood (usability/ease) that a CTA button will get clicked on is nonlinearly related to the size of that button. Button expansion has a diminishing usability return. The truth holds, however — the bigger the button, the better.

This law holds true regardless of the color of the CTA button. You can test every possible color in the Benjamin Moore paint idea book, and gain only incremental percentage increases. But try making your CTA button 20% bigger, and you’ll likely see a big jump in conversions.

Button placement is more significant than button color.

Fitt’s law also has something to say about placement. The statement of the law goes something like this:

 The time required to rapidly move to a target area is a function of the distance to the target and the size of the target.

Placement of the CTA, then, has a massive impact on its usability and clickability. Every page has a logical, spatial, visual and cognitive flow. Placing the CTA button directly in the flow path is a major way to improve conversions.

Taken together, these two features — size and placement — are the most influential factors in creating compelling buttons.

That’s why I’m cautioning you to avoid the black hole of color obsession. You can waste a lot of time and testing resources by rolling out subtle iterations of color variation.

Should you test color? Absolutely. But should you also test size, layout, copy and other significant features of button color? Yes.

Beware the overplayed button color card.

Warning:  Many conversion discussions may cause you to think that button color is the issue, when it’s actually more complicated than that.

One oft-cited button color study comes from Wider Funnel. Their conversion work on a SAP landing page led them to design a button that was orange. When they created the orange button, the page gave SAP a 32.5% lead-generation conversion rate lift, and a 154% return on investment.

Wider Funnel later raved over the power of the big orange button. Chris Goward wrote,

“Have you tested a Big Orange Button? We call him BOB. He works hard.”

What should we do? Let’s all make big orange buttons right away!

Hold on a sec. Let’s look at the study.

Here is the control:

Business Object control page

And here is the variation that gave them the increase.

Business Objects. And here is the variation that gave them the increase.

Can you tell what changed? A heckuvalot!

The entire layout had a complete refresh. There’s the implementation of urgency; a stronger value proposition; increased trust signals, like user reviews; more copy; and a total eradication of the capture form. Of course conversion rates went up!

It wasn’t a button-color issue. It was a total revamp!

With respect to Wider Funnel, they were in no way positing that button color alone made the difference. They were merely providing a tutorial walk-through for a very good landing page redesign. But this is a sample of what goes on in the conversion community. Somebody shouts, “Holy cow! Wouldjalookatdat! Conversion rates went up by 890% after I made an orange button!”

And so everyone scurries off to make orange buttons. They don’t ask questions — Did anything else change? What is your color scheme? What was the CTA? Etc.

Button color deserves its place in part of a bigger discussion of visual hierarchy.

The issue of button color is simply a small area of a field called visual hierarchy. Visual hierarchy affects the way that humans look at and process information on a screen.

Image from coetail.com

(Image from coetail.com)

Hack Design defines visual hierarchy as “the organization and prioritization of content as a means to communicate a message.” An effective hierarchy is way more than just color. In fact, color is only one of many techniques for achieving hierarchy.

Other methods of creating hierarchy are size, weight, style, case, scale, shape, weight, white space, texture, tone, typography, contrast, alignment, rectilinearity, curvilinearity, contrast, pattern, hue, saturation, value, complexity, repetition, proximity, density, etc.

That’s quite a list. And color is only one of the features in that list.

If you have your hierarchical ducks in a row, you’re free to go all out on testing color. But view things in priority. Color is one of many CTA features that will affect your conversions. And it is by no means the most important.

But that’s not all …

There’s no such thing as one best button color for conversions.

The conversion optimization community loves to talk about which CTA color is best for conversions.

A few years ago, Oli Gardner of Unbounce raved over the rise of the BOB (big orange button). His verdict on the color was this:

According to Wikipedia, Orange represents energy, enthusiasm, and a ‘get-it-done’ attitude. Sounds like a call to action to me.

In spite of his very true assessment of orange, it does not logically follow that everyone needs to use an orange button.

It works for Unbounce. Orange matches. It fits. It works.

Unbounce CTA Unbounce CTA confrence CTA

But another company tested orange vs. blue. Here are the two buttons that made up their A/B test:

But another company tested orange vs. blue

The blue button won. The 9% lift was enough to provide a boost in conversions.

You’ve just got to test.

Some Tips on Changing Your Button Color

So, let’s bring it home. Want to change your button color? Take these tips.

Don’t change your button color simply because some research declares that a certain color converts best.

What the research shows is that a certain color converted best for a certain website with a certain color scheme in a certain situation. It might not work for you. You have to test.

A/B test every change you make.

This is the main thing I want you to remember. Test, test, test. Every new color change is a new A/B test. Just do it.

Change your button color according to the surrounding color scheme.

There’s no such thing as a universal best color for conversions. As we’ve discussed, buttons fit within an overall web page. They do not appear as standalone entities. They are surrounded by other features of a website.

The significance of color, then, is dependent upon the other entities on that website.

Consider contrast, flow, hierarchy and other factors when you select a strategic button color change.

Make color changes in isolation from other button changes.

Don’t mess up your A/B tests by creating other button changes when you switch colors. If you change more than one thing, you’ll have no clue what your best converting color is.

Many CRO tests go awry when they work on optimizing button color, but change some words and stuff while they’re at it.

Change your button color according to general observations from color psychology.

Do yourself a favor and learn a little bit about color psychology. The lessons you learn can affect your color choice and conversions.

My cautionary disclaimers still apply. Color is not the conversion optimization silver bullet. It does, however, have an impact. Choose colors that resonate with your users and work well within your existing layout and/or color scheme.

Make your button color stand out.

When you choose a color, choose one that contrasts with the surrounding color scheme.

Soldiers and hunters wear camouflage clothing because they don’t want to be seen. Camouflage clothing is designed to mimic the color and texture of the surrounding environment — tan desert sand, or mottled green forest. They want to blend into their surroundings.

You don’t want your button to blend into the surroundings. You want it to stand out. Don’t camouflage your buttons.

In the section above, I discussed all the rave about orange buttons.

But what about a site like HubSpot? HubSpot knows CRO, color psychology, and CTA buttons. Their primary brand color is orange. If you’re familiar with HubSpot, you’re familiar with their logo.

Hubspot's primary brand color is orange

It’s got a big orange thingy. Their website and landing pages have a lot of orange, too.

Their website and landing pages have a lot of orange

For this reason, HubSpot uses very few orange CTAs. Why? Because orange CTAs don’t stand out on the HubSpot website as well.

Instead, they use blue buttons. Notice the screenshot above.

And the CTA below…

Hubspot uses very few orange CTAs

HubSpot has some orange CTAs, but their most important ones are blue. Blue is the color opposite of orange. Therefore, a blue CTA on HubSpot’s orange-themed pages will stand out better.

Colorwheel

One HubSpot reader made this connection as his/her comment on the article indicates:

One Hubspot reader made this connection

The color tip here is contrast and balance. Here’s what the web design blog Tympanus.net had to say:

Choose colors for your design carefully using principles of the color wheel. Colors that will create the most contrast and drama in a color scheme should be paired from opposite sides of the color wheel – that green button, for example, will really pop when paired with a red. Other opposite pairs on the wheel include yellow and purple and blue and orange.

Another way to make your button stand out is to make it bigger. Remember Fitt’s law, and follow it. Big buttons are easier to click. That makes it easier for users to convert.

Conclusion

I suggest we all just take a deep breath, step back and rub our eyes for a minute. Button color is a thing, but it’s not THE thing that will solve all woes and banish all sorrow from the world of conversions.

I’m still a sucker for great conversion stories on color changes, so if you have any great button color stories, I’m all ears.