How to Choose the Right Color For Your CTA Buttons

Build Your Audience Monetize Your List Take Yourself Pro

What are your brand colors? I’m sure you know them off the top of your head (maybe even have those hex codes memorized, right?), but do you know what kind of feelings they evoke?

When I bought my first house back in 2007, every single room needed to be painted before we moved in. Well, they didn’t need to be painted, I suppose, if I wanted a baby pink dining room and a dark purple (including the ceiling) guest room. But I didn’t want that so off I went to buy rollers, paint trays, and several gallons of paint.

Along my drop cloth covered path, I did a little research into the colors I was choosing for each room. Red for my dining room was ideal – that color “stimulates the appetite, and is often used in restaurants, and is an excellent choice for dining rooms in the home”, according to Sherwin-Williams. Perfect. Those same paint pros also told me that green has a “calming effect” so that one went in the home office.

When it comes to brand design, many people take a similar approach. There’s the “what’s your favorite color?” set – those who choose brand colors based on their wardrobe or home interiors, and there’s the “what colors do my ideal customers love?” set – those who tap into their ideal customer even if it’s outside of their normal comfort zone.

Naturally, after toiling over your brand colors and finally(!!!) making a choice, you want to slap those bad boys everywhere you can. Website, office supplies, Twitter homepage, phone case– you name it and it gets branded.

But when it comes to the buttons on your website and inside your emails, do your brand colors matter as much as you think they do? Are your customers just as likely to click on a button that is your brand color versus an alternate color?

How different colors affect feeling and choice online

In this post, I’m sharing 18 examples of buttons that encourage clicks so that you can compare, contrast, and get the most out of your own buttons. You’ll find real-world examples of companies that are doing buttons well, and some who might be missing a beat.

Of course, a click of a button is only the first step in your journey with your readers before they become customers. But with a little care, some focused testing, and a few tips from those who have come before you, your buttons could become the best buttons on the virtual block.

Some of these buttons are for free items (like PDF downloads or deeper information on a sales page). Others are more transactional, and your click equals putting money down for a product. No matter the type, if you treat your buttons as “just another thing to brand”, you might be missing an opportunity to truly connect and convert.

kissmetrics color chart to know how color affects choice

 

Blue

A color that we're fond of here at ConvertKit, blue is an easy color to find on websites and software. For good reason, too. Blue stands for trustworthiness, loyalty and sincerity. It’s seen as an intellectual color that also has associations with communication, logic and coolness. (hey, thanks, blue!)

Crazy Egg

If you're going to install a software onto your own site, you want that built in trustworthiness, right? Crazy Egg makes use of the color blue with their call to action button and even outlines the box where you put your URL before clicking that button in the same color. Since blue isn't one of their brand colors, it stands out from the green around it on the rest of the page. By having a light blue background, Crazy Egg ties the color into the graphic and shows you that the sky is the limit when it comes to their heatmaps.

crazy egg blue button to evoke trustworthiness
Laura Belgray

Laura uses ConvertKit to handle her email marketing for Talking Shrimp, her brand dedicated to content and copywriting. Instead of using her pink and orange brand colors splashed all over her emails, Laura keeps her call to action button simple with our standard ConvertKit blue and, like a good little copywriter, she focuses on the words within the email.

laura belgray convertkit standard

 

Yellow

Yellow might remind you too much of that famous PayPal “Buy Now” button but it's effectiveness there is for good reason. According to Unbounce, yellow is seen as a youthful, optimistic color that grabs attention. It’s also associated with emotions, self-esteem, creativity and friendliness.

Moz

Rand Fishkin and the fine folks at Moz know a thing or two about online visibility and their homepage button is no exception. Not only are blue and yellow complimentary colors (one cool and one warm), the yellow button really stands out in a dark header. It's a bit of light in the dark and it invites you in to see more before ever scrolling down the page.

moz uses a yellow button to highlight the CTA
LeadPages

Using yellow buttons inside emails works for LeadPages too. Another example of partnering this bold color with our friendly pal Blue, LeadPages gives exact instructions on the button copy and helps it stand out in an otherwise jam packed email.

leadpages email uses a yellow button to highlight the CTA
Brian Tracy

See that tiny bit of yellow in Brian Tracy's logo? Brian's actually able to incorporate his brand color here by choosing a yellow button for his goal-setting guide on his homepage. This time, yellow is partnered up with red – another hot color – to entice action out of the reader.

brian tracy uses a yellow button to highlight CTA

Red

Red, the color of my dining room back in my first home, is a very physical color which quickens the heart rate and promotes urgency. It stands for energy, courage, strength, excitement and defiance. Warmth is also a key association. When used in small doses, red can really pack a punch.

StitchFix

Taking a more understated look with the rest of their branding, StitchFix is all about the clothes and the focus on their site is clear. A red button in the center of the header invites the reader to take action with their service and start down the path to getting their fix every month.

stitchfix uses a red button to entice the reader to get started

Acuity Scheduling

In 2014, Acuity Scheduling worked with Joanna Wiebe's team to optimize their website, including their buttons. By changing the button color (shown below), Acuity saw a 94% lift on clicks of that single button. “We made that one outside of the brand color, so different from the palette, and that was the point with making it really stand out,” Joanna said on The Lede Podcast. You decide – does the red button stand out to you?

acuity used a red button because it was different from the rest of the palette

Kyla Roma

Another happy ConvertKit customer, Kyla decided to swap out her button color inside her incentive emails to match her branding. With simple text and a clear call to action, the red button ties back into the website the reader just visited and also inspires a sense of urgency.

Want to learn how to change your own incentive email button colors? Click here to learn all about customizing your incentive emails with ConvertKit.

kyla roma used a red button to tie back to her brand coloring

Green

The color of money, green seems like an obvious choice for banking and financial websites. After all, as Josh Pigford reminds us, this is often seen as the color of wealth. It’s a relaxing color which is the easiest one for the eyes to process. It promotes balance, health, refreshment and restoration, and is often associated with the environment.

Xero

As an accounting software, money is the center of the Xero world. And this brand makes the most of the relaxing color by pairing it with the word “free” in their button text. They've also chosen an image that ties in the blue of their logo and the green of the button, helping the eye move along the page to that ever-important button to click (Clever, Xero. We see what you did there.)

xero uses a green button because they are in the financial realm.

Copyhackers

Using a popup in the middle of a blog post is a common known tactic (love 'em or hate 'em, popups convert). But common tactics are only successful if they're done well and Copyhackers is making the most of theirs with this color combo one-two punch of Trusty Blue and Refreshing Green.

copyhackers green button

Orange

Long known as a popular color for buttons, brands tend to shy away from this exciting color lately. But orange deserves a second look: it's an aggressive color that creates a call to action. It is associated with fun, warmth, passion and security. Hmmmm – maybe we should consider using some orange buttons…

Mint

Mint is about money, yes, but their mission is more than just dollars and cents. It's about getting closer to your goals through better money management. It's about freeing up your time and mind space so you can make the most of your days. And it helps that the color they chose for their buttons is associated with security and fun. After all, if Mint is out to do anything it's to make you feel secure while making managing your money a bit more fun.

mint uses an orange button for energy

Social Media Examiner

One of the industry's leading authorities on all things social, Social Media Examiner takes a strong approach with their call to action in orange. Their brand color of green (a cool color) sits opposite the warm color of orange making them ideal to support each other on their website – like this call to action for their industry report.

social media examiner uses an orange button to offset their green

Pink

“Pretty in pink” has never been truer than online. Pink is generally seen as a romantic, feminine color. It stands for love, warmth, nurture, tranquility and sexuality and it's used in many women-focused brands across industries. Pink can be a power play when used well and it reinforces a warm and loving message for the right brands.

Gala Darling

Dedicated to living a life full of self love, Gala Darling speaks to the feminine mystique and her audience revels in all of the pink girlyness of her site. Even her invite in her popup is to “get love letters in your inbox” so a pink button is a natural choice here.

gala darling uses pink button to evoke love

A Little Creative

Enveloping those big-hearted entrepreneurs in a massive hug, Morgan at A Little Creative uses pink as a standout color on her more neutral background. In conjunction with yellow (remember – that warm/cool color combo works everywhere), this site draws your eyes and your clicks right down to that bright pink button.

a little creative uses a pink button to standout from her yellow

Purple

Historically known as a color of royalty, purple is a soothing color that has a spiritual element. It is associated with luxury, vision, quality and truth. Purple is also a rarely used color online, especially for call to action buttons, so why not stand out?

9to5 Chic

This brand happens to have purple in their brand colors, but 9to5 Chic makes the most of purple in an understated way. Highlighted against the otherwise mostly grey tone homepage, their purple buttons really stand out and keep you engaged with their site.

9to5 Chic uses a purple button to standout on their homepage

Wellness Mama

Sitting almost exactly opposite of one another on the color wheel, green and purple go naturally together for Wellness Mama. Not only that, but the purple color really stands out in this mostly green homepage and encourages the reader to take action right away.

wellness mama uses a purple button to standout with her green site

Black

It's hard to find a black button, and rightfully so. While black is a powerful color that exudes sleekness, sophistication and efficiency, it also has a tendency to blend in with the rest of the copy on a webpage. Shops like Sephora and luxury retailers such as Apple make the most of black in a meaningful way, but most bloggers, especially those who aren't experienced with button testing, are best advised to steer clear of black for their calls to action.

Ghost

Okay, “ghost” isn't a color, obviously but it's a button type worth examining. While having a standout button color can pay off, many sites are opting for these more understated ghost buttons (translucent backgrounds that pickup the rest of the site) and seeing big returns from them.

A word to the wise: much like black, ghost buttons should be used by the experienced brand builder and tested against color buttons to know what works best with your audience.

Stripe

Sure, Stripe is using a blue button to encourage you to explore more about them, but their Sign Up button is a ghost button right next to the blue one.

stripe ghost button

Wedding Wire

With many options on one page, Wedding Wire makes use of ghost buttons to segment their audience into next steps on their site. Knowing that their audience is highly interested in powerful imagery, Wedding Wire makes the most of that by continuing to show the image behind their ghost buttons.

wedding wire uses ghost buttons to continue showing the background image

And now it's your turn. What color will you use for your buttons?

Are you more willing to test out some options now that you've seen the power of each color in action? Tell us in the comments below if you see buttons in a different light now and what you'll do with your newfound knowledge.

Val Geisler

Val is a yogi, mom, military wife, and avid podcast fan. She is ridiculously obsessed with sharing and creating content that actually makes a difference in the world, connecting with her fellow bloggers, and doing more with less effort. Val is based on Columbus, Ohio (O-H!) and can often be found oversharing on Instagram at @lovevalgeisler.

  • Really helpful, Val. My colors are blue, and I like being trustworthy. 🙂 Say, do you think it make sense to match the button with the colors (assuming the color is good for your emotion of choice), or is it better to have a contrast?

    • I like contrast, @waynestiles:disqus, but it’s worth testing out on your audience to see what gives you the best return!

  • I use ghost and black buttons! They go with my branding.

  • Good read, very interesting!

  • Simone Montomery

    Great Article, Val! My brand colors are purple, red, and pearl silver. My concern was how to use my brand colors without over powering my site. I had read somewhere that you shouldn’t use red for call to action buttons. Apparently that was not necessarily true. I did like the look of the purple button because it’s different and looked good to me. So I think I am gong to build my site and make my CTA button purple. Love It! I would love to get your input once I have it up! Will you give me your input if I send you the link?

    • Absolutely, @simonemontomery:disqus! Feel free to post it here so we can check it out. Glad this was useful for you.

  • Selena

    Wow! I’m using purple and pink (though my product is not for a female segment) colors but will definitely test out some other colors. Such a great food for thought Val!

  • Hmm, well my button color is sort of a blue-green. Probably reads more as a green though. Based on this article, it seems like a good choice for my brand and audience. And it goes well with my main brand color which is a light beige/blush color. Who knows though, it’s so early in my business I may have to test other colors out. This gives me some good things to think about. Thanks!

    • Thanks for reading and commenting, @disqus_s6Rn85vbt4:disqus! The first step is awareness, right?!

  • I currently use a green button that is slightly blue. One of my key brand colors is purple, but I also love yellow, so I’ve got some experimenting to do! 🙂

See ConvertKit in action.

Join one of our experts on a live tour and get the answers you need.

Request a Demo