Deep dive: the 'red button beat green' case — and why the color was never the point

Deep dive: the 'red button beat green' case — and why the color was never the point

The question: does CTA button color move conversions? A famous test, popularized through HubSpot's own experiment, pitted a red button against a green one on an otherwise identical page. Red won by about 21%. The headline traveled the internet as 'red converts better.' The actual lesson is the opposite.

The mechanism isn't color preference — it's visual contrast and isolation. The page in question had a green color scheme. The green button blended into its surroundings; the red button broke the pattern and became the single most visually distinct element above the fold. What won wasn't 'red,' it was the only thing that didn't match the page. Pre-attentive processing — the visual system's instant, pre-conscious sweep — flags the element that contrasts most with its neighbors. On a red-themed page, a green button would likely have won.

This connects to the Von Restorff effect: the item that stands out from a group is the one we notice and remember. A CTA's job is to be that item. When designers pick a 'high-converting color' from a blog post and apply it to a page where that color already appears, they erase the contrast and the effect with it.

The practical implication for affiliate landers: don't choose a button color in isolation. Choose the color that has the highest contrast against your specific palette, and reserve that color for the primary action only. If your accent color appears on five elements, the CTA is no longer special. Contrast is the variable; color is just how you achieve it.

TL;DR
— A documented red-vs-green test showed red winning ~21% — but the page was green-themed, so red simply had the most contrast.
— The real driver is pre-attentive contrast and the Von Restorff effect, not any 'high-converting color.'
— Pick the button color with maximum contrast against your palette, and use it for the primary CTA only.