The power of color in web design is well-established. Most of us know the basics of color theory already: Blue is soothing. Red is passionate. Orange is energetic. It bears repeating, but it’s not earth-shattering news.
What’s more interesting to us than color psychology is how you can leverage this psychology to drive on-site behavior. Can you use specific colors to influence action?
The most obvious target for this, of course, is your website’s CTA.
Does CTA Color Matter?
As the conversion gatekeeper, your CTA is a prime target for optimization—and its color is no exception. There are different schools of thought behind this issue: Is it better to use bold colors that encourage attention? Or is it better to use cool, soothing colors that give users confidence in their decisions?
HubSpot did an experiment on this very question. They compared the impact of a green CTA with a red CTA; the psychology of “Go” versus “Stop”, as it were. They found that the red CTA outperformed the green option by a full 21 percent. Not bad for a palette swap that takes only seconds to do.
Of course, there were plenty of other elements at work during this test, such as how each option fit into the website’s overall color scheme, so take the results with a grain of salt. It’s just an interesting example of how significant a single color swap can be for your conversion rate.
It’s Less Significant Than You Think
In truth, there’s no perfect color for your CTA. Any color can do the trick. While it might make sense on paper that high energy colors like reds and oranges encourage action, they’re arguably less “trustworthy” than cooler tones like blues and greens. Is the trade-off worth it? Ask ten different people and you’ll get ten different answers.
Don’t get too caught up picking colors that you think will increase CTA engagement. What matters more is how you use color as a design tool to draw attention to the CTA. Let’s review some ways you can use color—any color—to your advantage.
Create Contrast
There aren’t many universal truths out there in web design, but there’s at least one: Your CTA needs to stand out. It needs to be visible at a glance, and it can’t be the same color as your background layout. Choose a color for your CTA that will make it pop on the page. If you have a busy background with lots of images, you can even use flat grays to make this distinction—check out Opus Grows for an example. We wouldn’t call it elegant, but it gets the job done.
Play to Your Audience
One area in which color does matter is in how you speak to your market, particularly for brands that cater primarily to either women or men. Research on color preference by gender shows that women prefer blue, purple, and green tones. Men also enjoy blue, but dislike purple. Along the same lines, while both genders show a distaste for brown, women dislike orange by a far bigger margin than men.
Based on this research, it would make sense for a cosmetics company to stick primarily to cooler tones—and avoid an orange CTA at all costs! It’s not an ironclad rule, but keep it in mind.
Don’t Assume Anything
While it’s important to tailor your design to your audience, don’t assume that certain colors will elicit the response you think. The above color associations may hold true for western audiences, but research suggests that international audiences may have completely different associations for each hue. For example, the color white suggests purity and cleanliness in the west—but in Chinese culture, it’s associated with death and mourning.
Distinctions like these have become important for online brands that sell to international markets, so do your research ahead of time.
Test Your Audience’s Response
With so much variance in how people respond to color, the only way to know for sure which colors will work best for your CTA is to test, test, and test again.
Regular A/B testing of your CTA should be part of your ongoing web optimization efforts anyway, so it’s easy enough to incorporate color styles into the mix. Do as HubSpot did in the above example and compare options to see which resonate best with your established markets.