Which Colors to Use for Your Call to Action Buttons

A call to action, as the name suggests, means when you call out to your audience to perform a particular action. For example asking your audience to subscribe to your newsletter, follow you on Facebook, or purchase your e-book are all examples of call to actions. Sometimes call to action is briefly referred to as a CTA.

You can use simple hyperlinked text for your CTAs but why would you want to do that when you can use a stylish button? Text like “Click here to subscribe. It’s free” may look nice when it is a hyperlinked text but it will definitely look nicer if you present it on a button.


Image courtesy – Ratchapon Yanyongdecha of Depositphotos

That is not to say that you should use all your CTAs as buttons. If you would do that, you’ll end up cluttering your entire website with buttons here and buttons there and buttons everywhere. What you should do is that use buttons only for your most important call to actions. For example when you want your site visitors to buy something from you, a button is the way to go.

But you can do a lot with buttons. What should be its color? Which shape should you use? What should be its size? Where to place it?

Unfortunately it’s not possible to answer all these questions in a single article. Here I’ll only be dealing with the issue of coloring.

So let’s begin.

First things first.

According to KISSmetrics:

  • 93% of customers place visual appearance and color above other factors while shopping
  • 85% place color as the primary reason for why they buy a particular product
  • 80% of brand recognition comes from color

So don’t take color as something for granted.


HubSpot did a very interesting test on Performable’s home page.

They first created the home page with the green buttons. Then they only changed the color of the buttons to red. The screenshot above shows the two pages.

They performed this test for 2,000 visits and recorded the data. The result?

Those who think such matters are insignificant and the only significant thing is content should listen intently: The red button page received 21% more clicks than the green button page!

I reiterate that HubSpot had only changed the color of the buttons and the code for the rest of the page was left unaltered.

In fact Dmix found something similar.


They changed their green button to red, as shown above, and for 600 participants they found the conversions increased to 34%!

Why did the red button perform better than the green? Well we don’t know for sure and that’s not important. The important thing is the result. The red button was found to work better and hopefully it should work on your website too.

But if you are a purist and insist on a proper reasoning then my assumption is this. Green is usually concerned with nature, prosperity, and relaxation while red connotes to energy, blood, and urgency. By this we can say that the more active aspects of red may have propelled more readers to click on the red button. But that’s just my guess.

Of course these results cannot be generalized and it would be wrong to say that all websites in all kinds of niches will increase their click through rates after inserting red buttons. It worked with two particular websites and with two particular audiences.

Then there are infinite shades of red (just as of any other color). As you can see from the images above HubSpot used a redder button but Dmix used a shade more towards orange.

Also, many people want to use only those colors which match with their overall website’s theme.

So if you don’t feel satisfied with the above test results or maybe you are satisfied but don’t know which shade of red should you use, here is further information for you.

The purpose of a CTA button is that it must be eye catching. And hence it is a wise thing to use a color which contrasts highly with the background.

Ever heard of complimentary colors?

Complimentary colors are a pair of colors which produce maximum contrast and reinforce each other when placed next to each other.

In the image below the two colors at the opposite ends of the wheel are complimentary colors. For example red and cyan are complimentary and so are magenta and green.


Image courtesy – Wikipedia

So if your website has a green background, you may try magenta, or red with a shade of magenta for your button.

If your website has a violet background, try chartreuse green. Of course red doesn’t come with a shade of chartreuse green so you can’t use that.

And if your website already has a red background, I don’t think you should use red on your buttons too as it will mix your button with the background and defeat the very purpose of having a button.

Before ending this article I must say that there are some high profile blogs about blogging i.e. those bloggers must be aware all these color codes but still they are not using it. Yet their e-mail list is massive.

This is how Copyblogger, a blog with over 1.5 lakh subscribers has built their “Join Us” button. A yellow button on a black background. Nothing of the sort which I’ve preached above.


And this is how Problogger’s e-mail opt in form looks like, a green button on a gray background.


The point that I’m trying to make is this. The above mentioned strategies are just rough guidelines for you to use. There are exceptions. I can’t tell you which color button will work the best for your website. You will have to find it on your own through split testing which means keep playing with different color buttons on different backgrounds and see which ones convert the best.

Use the guidelines mentioned in this article but feel free to depart from them if you don’t see good results.

Which color button do you use on your website? How well does it convert? Let me know in the comment below.
Author Bio – Laxman Papineni is an experienced business development guy, Entrepreneur and presently co-founder at Giveaway.ly – World’s first advertising platform that helps advertisers to promote products / services through Giveaways. Bloggers make money and Advertisers build buzz. You can catch him on Facebook or Twitter

via Web Design Blog, Web Designer Resources http://www.2expertsdesign.com/web-designs/which-colors-to-use-for-your-call-to-action-buttons?source=rss