Conversion Rate Optimization University: the Science of CTA Color

For the longest time, I thought the right way to choose a color for your “Buy Now” or “Add to cart” button was just to guess randomly and a/b test until you found a winner. So much wasted time!

Angie Schottmuller, Forbes Top 10 Online Marketer (and an hero to me) taught me how to choose the proper CTA color with !!science!!. This Slideshare presentation, Usability Conversion Optimization for the Eye, delivers the goods.

(If you haven’t figured this out by now, let me warn you: I’m not just interested in things that work. I always wanna know why they work. Major geekery ahead.)

Here’s the summary:

Human eyes (presumably even yours!) are packed with sensor nerves called rods and cones. Rods detect low light, not color, and don’t provide a lot of detail. (Which is why cats are functionally colorblind, though greatly superior to humans at night hunting.)

Cats have enhanced peripheral vision as well, but lack human visual acuity at the center of focus — and can’t see as well too closely or too far away. But since they are almost never our target demographic (insert joke about mice), we don’t need to spend any more time on them.

The cones in our eyes detect one of three of the primary colors of light: red, green, or blue. Probably because we evolved to detect whether or not fruit is ripe enough to eat — whereas cats evolved to eat mice whether or not they are ripe.

Here’s the thing about eyes: when you see a color, a series of cones flashes its tiny electrochemical spark emailing your brain “Red!” Know what happens then? That poor little individual cone gets tired. So it takes a break. Fortunately you have lots of cones for each color, so your tired little cone’s pals take up the chant.

So when you look at a super-delicious apple, your brain’s getting:

Red! Red! Red! Red!

Stare at that yummy apple long enough, though? Your brain’s getting:

Red! Red! Red! Red! Red! Red! Red! Red! Red! Red! Red! Red! ... ... ...

… because all your red cones are taking a nap.

(That’s why some cool optical illusions like the McCollough effect work.)

Complementary colors are those that tickle the other flavors of cones — in this example, blue and green. Your eyes jump around constantly in search of new stimuli — so if all the red cones as taking a break, anything in blue or green jumps right out at you.

(Presumably this is one of the reasons ripe fruit changes color? So primates can easily identify it among the shifting green backdrop of leaves?)

So, that’s why it works.

Okay, so once you have your website’s primary and secondary colors sorted, how do you learn which color is highest-contrast?

What’s your website’s color scheme?

This is fairly simple. Most websites use a fairly limited color palette — just one or two at most real colors. The rest are super neutral shades like white, black, and a variety of grays.

So when we’re talking about a website’s color palette, we mean specifically non-neutral shades. You’re unlikely to see more than two.

Picking the proper CTA color (with !!science!!)

I use Paletton. Here’s how.

CTA color for a simple site design

Most sites have a two-color scheme (one shade plus black or white). In that case, do this:

Select “Monochromatic”
Select “Add complementary”
Edit “Base RGB” (get it from the code if you’re l33t — I use this Chrome plugin)
Et viola — Paletton picks the perfectly opposite color for you.
Select “Tables / Export”
- Copy/paste the hex codes for your shiny new CTA color!
- Or select “Color Swatches” and export a PNG for your graphic designer
- Or select “HTML” for a cool page like this one

I ran through this exercise with my pals at DKHardware.com (#f83507 red is the main color, white background, black text and accents) and came up with the perfect CTA color of — drumroll — #05b24b!!

Which they almost nailed…

CTA color for a more complex design

If you’re working with a design using 2 real colors (we’re pretending black and white aren’t colors) like, oh, Nature Gnaws, things get a little more complicated…

Select “Triad”
Enter one of your two primary colors as “Base RGB”
Change “Dist:” from 30 to 60

Now, if you’re lucky, both of your design’s colors will appear in the palette like this:

…which is shockingly similar to their packaging.

I know the guy who designed the packaging — he did a damn fine job.

This makes sense because complementary colors are nice together, the same way as chords are made up of notes that are nice together. Good graphic designers know this and choose complementary colors, in this example the light green and royal purple, in their designs. (Yes, the folks who crank out WordPress and WooCommerce and Shopify themes know this, too.)

The website, though — yes, their graphic designer didn’t quite get the memo on CTA colors. Let’s take a look at a product page:

If “ick” was a color, it’d be you, ce763f

Alas, this kinda makes sense, considering Paletton tells me the optimal CTA color is #ce763f, which is just — ugh.

I mean, what do you do when you’re stuck with a CTA color like this? (Even worse, this is pretty much the color bully sticks are. Do you know what bully sticks are made of???)

Oy. Maybe the graphic designer saw Angie Schottmuller’s presentation, and tried really hard to follow instructions like this — and saw the results and shuddered and thought, “Never freaking mind!” and just completely gave up on the whole concept of a call to action color?

So here’s what you do:

Select “Free style”
Grab the colors in the middle of the circle and start dragging them around (altering saturation and intensity) until you get a color that you think might work.

In practice, what you’re doing is changing the input — and if you’re staying true to the original color notes, our green and purple, you’ll get an acceptable CTA color. This isn’t scientifically precise and you probably shouldn’t use all the !!science!! above to sell it if you’re going to fudge like this. But that’s up to you.

I came up with #FF9200, which looks like this:

Do you know where to look now? Hell yeah you do!

Even though #FF9200’s not the precise CTA color calculated to entice the viewer, it sure as hell has a better chance of seeing production than ick.

Now you have a perfect (or at least acceptably perfect) CTA color!

Reserve your CTA color for calls to action

Okay, now you have your color scheme singing in harmony! You may be tempted to do something like this…

This homepage nailed a high-contrast CTA color and then put it everywhere (including the logo!). In the screenshot above:

5 instances of CTA color
3 of which are legit calls to action
only 1 of which is actually usable on desktop (the “Call us now” phone numbers might be tel: links usable on mobile devices)

Here’s the take-away:

Reserve your CTA color for actual calls to action. Don’t use it as a design element (logo, “lasting recovery”).

Schottmuller goes even further, recommending you reserve analogous colors as well, so as not to confuse the eye.

Angie Schottmuller, Usability Conversion Optimization for the Eye, slide 69

(That concept gets a little hairy when you’re using a big colorful background photo on your homepage — which, well, you probably shouldn’t be doing anyway (unless you’re using filters and opacity to screen back the CTA-analogous colors?))

Call-to-action color selected and implemented sparingly — what now?

Achievement unlocked! You’ve used !!science!! to determine the best possible call to action color. The answer to “What’s next?” is the same as it always is:

A/B test to prove it works

Don’t ever make the mistake of thinking best practices will work out of the box. Best practices are a starting point and will not outperform every time, with every website.

They almost always do — but the space between “almost always” and “always” is big enough for your dreams to slip through.

So when it comes to best practices (and ALL advice from self-proclaimed gurus), trust but verify.