The myth of the magic button color
You've seen the headlines: "We changed our button to red and conversions jumped 30%." These case studies are real, but the lesson is almost always misread. The win didn't come from red being special—it came from the button finally standing out from everything around it.
Conversion is a function of visual hierarchy, not a specific hue. Your job is to make the primary action unmistakable.
Rule 1: Contrast beats color
The single most important factor is how different your CTA is from its surroundings. A green button on a page full of green blends in; the same green on a neutral page pops. This is the Von Restorff (isolation) effect: the element that differs gets noticed and remembered.
Practical test: squint at your page until it blurs. If your primary button is still the first thing you see, your contrast is working.
Rule 2: Use the color wheel for accents
If your brand is blue, the highest-impact CTA is often a warm complementary color—amber or orange—because it sits opposite blue on the wheel and maximizes separation. You don't have to abandon your brand color; you just need the action color to be distinct from your brand surfaces.
- Blue brand → amber / orange CTA
- Green brand → magenta / coral CTA
- Purple brand → lime / yellow CTA
Rule 3: One primary action per view
The fastest way to kill conversion is to give five buttons the same loud color. If everything shouts, nothing is heard. Establish a hierarchy:
- Primary: filled, high-contrast accent. Exactly one per screen region.
- Secondary: outlined or neutral. The "maybe later" action.
- Tertiary: plain text link. Low-commitment navigation.
Rule 4: Don't sacrifice readability for punch
A vivid CTA still needs legible label text. White text on a light orange button frequently fails WCAG contrast. Either darken the button or switch to dark label text. A button nobody can read is worse than a boring one. (More pitfalls in 5 common color mistakes developers make.)
Rule 5: Test, don't guess
Color psychology gives you a starting hypothesis, not an answer. A fintech audience may respond to trust-signaling blue; a gaming audience may convert on energetic neon. Ship a reasonable default based on contrast and hierarchy, then A/B test the accent—not the entire palette.
Putting it together
Start from a palette where the accent is already separated from the neutrals and brand surface. Our Marketing / CTA palettes are built for exactly this: high-contrast action colors on disciplined neutral backgrounds. Pair that with a clear primary/secondary/tertiary hierarchy and you'll get most of the conversion benefit before you ever run a test. For the psychology background, see color psychology in marketing.