Blog · conversion

Color psychology in marketing, tested

Updated September 28, 2026 · about 18 min read

Forget the chart. Color does three jobs on a page, and none of them is "meaning." Here's what we found when we actually tested it — and a tool to test your own.

What the internet gets wrong about color

Search "color psychology marketing" and you'll find the same chart on a thousand pages: red means urgency, blue means trust, green means growth, yellow means optimism. It's confident, it's colorful, and it's mostly folklore.

The honest research is messier. Color associations vary by culture, by context, by the product, and by what's next to the color. A red button on a red page is invisible. A blue button on a blue page is invisible. The "meaning" of the color is doing almost nothing; the contrast is doing everything. Several well-known button-color case studies were later shown to be about contrast and placement, not hue.

So this article isn't about which color to paint your button. It's about the three things color reliably does on a page — and how we test them instead of guessing. The live test is below. Try it before you read on; your own eye is the best evidence.

Job one: attention follows contrast

The human visual system is a difference detector. It notices edges, changes and the thing that doesn't match its surroundings. That's why a single red element on a quiet page pulls the eye instantly — and why a red element on a busy, colorful page pulls nothing.

This is the actual mechanism behind "red buttons convert better." They do — on pages where nothing else is red. On a page with red headers, red icons and a red logo, the red button is camouflage. We've tested green, orange and black buttons that beat red on pages with a lot of red already, for exactly this reason.

Practical rule: pick one action color that appears nowhere else on the page. Every heading, icon and accent competes with the button for the eye; make them lose.

Job two: the eye follows hierarchy

Once a visitor's eye lands, it moves. Where it moves next is decided by size, weight, contrast and position — the visual hierarchy. Color is one of the strongest hierarchy tools you have, and the most misused.

A page with one brand color and one action color has a clear hierarchy: quiet everywhere, loud on the button. A page with five colors has no hierarchy; the eye bounces, the visitor works, and working is the thing visitors won't do. This is also why we hold the same action color on every page of a site: the visitor learns it in two screens and never has to relearn it.

The test we run: squint at the page until it blurs. What still stands out? If it's the button and the headline, the hierarchy is right. If it's a stock photo and a logo, it's wrong — and the customers are looking at the photo instead of calling.

Job three: one obvious action

The third job is the simplest and the most often broken. A page should have one thing it wants you to do, and color should make that one thing unmissable — by being the only thing that color.

Choice overload is one of the most replicated findings in behavioral science: more options, fewer decisions. Five buttons in five colors are five options. One filled red button and a quiet outlined secondary is one option with an escape hatch. The live button test on the marketing psychology page shows this in a second: flip the second button to the same color as the first and feel yourself hesitate.

What we actually tested, and what happened

Over the past several years we've run button and accent color tests across our own companies' sites — a bath remodeling business, a marketing agency, several local lead-generation sites — and clients' pages. A few honest findings, with the caveat that every site is different and you should test your own.

• Contrast beat hue every time. The winning button was whichever one stood out most from its page, regardless of the color's supposed meaning. Red won on blue and white pages. Orange won on a page with a red brand. Black won on a colorful ecommerce page.
• Consistency beat novelty. Sites with one action color across every page out-performed sites that "matched the button to the section," even when the individual buttons were pretty.
• The secondary button mattered as much as the primary. Turning a filled secondary button into an outlined one — same text, same place — moved conversion on two of three pages we tested, because it removed the competition.
• Backgrounds mattered more than buttons. Moving from a photo background to a plain one behind the same red button was the largest single lift in the set. The button didn't change; its competition disappeared.
• "Trust blue" did nothing measurable. Blue and green trust badges, blue headers, blue "secure" icons — no consistent effect on the pages we tested. Actual proof (a review, a photo, a credential) beside the button did far more than any color.

We won't publish exact percentages because they'd be presented as promises, and they aren't. The pattern is what matters: contrast, consistency, and fewer competing elements. Those transfer; the numbers don't.

Color and the words around it

Color gets the click; the words earn it. The two work together in ways worth naming.

Anchoring: the first number a visitor sees frames every later one. Show what the problem costs before what the fix costs and the fix reads as reasonable. We often set the "cost of waiting" in the attention color and the price in a quiet one, so the eye lands on the frame first.

Loss framing: "what waiting costs" moves more people than "what you could gain." Our tools show the loss, in the loud color, on purpose.

The decoy: three pricing options with a deliberately less attractive middle push choice toward the one beside it — good / better / best. Color the one you mean; leave the decoy quiet. Only do this when the highlighted option is genuinely right for most buyers; a decoy used to trick people wins a sale and loses a customer.

None of this is manipulation if the offer is honest. It's just not making people work to say yes.

How to test color on your own site

You don't need a lab. You need one variable at a time and enough traffic to tell signal from noise.

1. Pick one page and one action. The one that pays — call, form, purchase.
2. Change one thing. The primary button's color, or the secondary button's style, or the background behind it. Not all three.
3. Split the traffic. Most platforms and ad tools can send half the visitors to each version. If yours can't, alternate weeks and compare — weaker, but honest.
4. Run to significance. Our A/B significance calculator tells you whether the difference is real or luck. Don't declare a winner on day three.
5. Keep the winner, write down why. Then test the next thing.

A page with 3,000 visits a month can settle a button test in a few weeks. A page with 300 needs months or a bigger change — in which case, test the headline first; it moves more than any color.

The famous case studies, re-read

Every color-psychology article cites the same handful of case studies: a company whose red button beat green by a large margin; a site whose orange button beat everything. They're real. They're also almost always about contrast and placement, not the color's meaning.

In the best-known red-versus-green test, the page's palette was green: green logo, green accents, green everywhere. The green button matched its surroundings; the red one didn't. Red "won" because it was the only red thing on the page. Put the same test on a red-branded page and the result flips. The lesson the article should have drawn was "make the button the only thing that color," not "red converts."

The orange-button studies tell the same story. Orange stood out against blue-and-white pages, which is most of the web. Orange isn't magic; it's the complement of blue.

Re-read this way, the case studies agree with the boring, testable rule: the button that wins is the one that contrasts with its page and appears nowhere else on it.

Culture, context and accessibility

Three more reasons to distrust the meaning chart.

Culture: red is luck and celebration in much of East Asia, mourning in parts of Africa, danger in the West. White is purity in some cultures and death in others. A national brand can't design for one meaning; it can design for contrast, which is universal.

Context: the same red reads as urgency on a sale page and as error on a form. Green reads as "go" on a button and "money" next to a price. The color's neighbors decide what it says. Test in place, not in the abstract.

Accessibility: around eight percent of men have some form of color-vision deficiency, and red-green is the common one. A red button that only differs from its background by hue is invisible to them. Contrast ratio — light versus dark — is what they see, and what the WCAG standard measures. The contrast checker above uses the real formula; 4.5:1 is the minimum for text, and a button should stand out from the page by more than that. Designing for contrast isn't just accessible; it's the thing that makes the button visible to everyone.

Color beyond the button: backgrounds, sections and the color strip

The button gets the attention, but most of the color on a page is background, and background decides whether the button can be seen at all.

Backgrounds: a photo behind a button competes with it. A gradient behind it can too. Our largest single lift in the test set came from replacing a photo background with a plain one behind the same button. When you must have the photo, put a solid panel behind the text and button.

Section rhythm: alternating white and a very light tint tells the eye where one idea ends and the next begins, without adding a competing color. That's why this site alternates white and a pale blue-grey; the rhythm helps scanning, and the red button is still the only loud thing.

Unity signals: the thin animated color strip at the top of every page on this site and its sister sites is a deliberate small signal that these properties belong together. It's decorative on purpose — it doesn't compete with anything — and it does a job: a returning visitor recognizes the family in a glance.

Dark sections: a dark band near the end of a page resets attention and makes a final call to action feel like a decision point. Used once per page, it's a strong tool. Used five times, it's wallpaper.

A field guide for choosing your palette

1. Start with your brand color. It's on the truck and the cards; it stays.
2. Pick the action color by contrast. Use the checker above against your page background. It should score well above 4:1 against the page and 4.5:1 for its text. It should not be your brand color if the brand color appears elsewhere on the page.
3. Pick one neutral tint for alternating sections. Barely there.
4. Ban everything else from buttons, headings and icons. Charts and illustrations can use more color; interface elements can't.
5. Hold it across the site. The same action color on every page, the same secondary style everywhere.
6. Test the button, then stop. Once the contrast is right, further color tests return little. Test the headline instead; it moves more.

That's the whole method. It fits on an index card, and it out-performs the meaning chart on every site we've tried it on.

A worked example: choosing a palette for a real page

Let's do it for a dental practice whose brand color is a teal-green, with a white site and a big photo of the front desk in the hero.

Step one, brand: the teal stays. It's on the sign and the scrubs.

Step two, action color: teal against white is fine for contrast (about 4:1 for a mid teal), but the teal appears in the logo, the headings and the icons, so a teal button is camouflage. We test complements: a warm orange (contrast against white ~3:1 — text needs to be dark, and it stands out from the teal strongly) and a deep coral. Orange wins the contrast checker and the squint test. It appears nowhere else on the page.

Step three, the background: the front-desk photo goes behind a solid white panel that holds the headline, one line of proof and the orange button. The photo is still there; it just stopped competing.

Step four, the secondary: "Meet the team" becomes an outlined button, teal text on white. It's there for the cautious visitor, and it can't win.

Step five, the tint: a barely-there mint for alternating sections, so the page has rhythm without another loud color.

Step six, hold it. Orange means "book" on every page, including the blog. Nothing else is orange, ever.

Then one test: the orange button versus a deep-navy one, same text, same place, run to significance. Whichever wins, we keep — and we write down that the reason was contrast against the surroundings, not the meaning of orange.

Red on this site, and why

Since we've argued that the meaning of a color doesn't matter, it's fair to ask why this site's action color is red.

Contrast. The pages are white and pale blue-grey; the text is near-black; the brand's second color is a mid blue. Red is the complement of that blue-and-white world and appears in nothing else on the page except the heart in the footer. It's the loudest thing on every screen by a wide margin, which is the only job we asked of it.

The eyetoad color strip at the top of every page contains red too — and orange, yellow, green, sky, blue and violet. It's thin, decorative and animated slowly, and it never sits next to a button, so it doesn't compete. Its job is unity across the family of sites, not attention. We tested pages with and without it; it had no measurable effect on conversion, which is exactly what you want from a decoration.

Would we use red on a client's site? Only if it contrasted with their page and appeared nowhere else on it. On a red-branded roofing site we'd probably use a warm yellow or a bright blue for the action. The rule, not the hue.

Reading list, for the skeptics

Because "we tested it" should be checkable, here's where the general findings come from and what to read.

• Contrast and visual search: the perception literature on pop-out effects — a single item that differs in color from its surroundings is found almost instantly regardless of how many other items there are. This is the mechanism behind every "red button" case study.
• Choice overload: Iyengar and Lepper's jam study and the large follow-up literature. More options, fewer decisions — with nuance, but the direction holds for interface choices.
• Anchoring: Kahneman and Tversky's original work, and the pricing research that followed. The first number frames the rest.
• Loss aversion and framing: prospect theory. Losses loom larger than gains; "what waiting costs" beats "what you could gain."
• Persuasion principles: Cialdini's reciprocity, social proof, consistency — the honest version of what a page does when it gives a tool before it asks for a call and puts a review beside the button.
• Accessibility: the WCAG 2 contrast guidelines and the relative-luminance formula, which is what the checker above implements.

None of these papers say "red converts." All of them, read together, say: make the action contrast, make it consistent, make it one, put proof beside it, frame the decision honestly. That's the whole of color psychology in marketing that survives contact with a test.

Color for the rest of the page: charts, icons, illustrations and photos

Everything so far has been about interface color — buttons, headings, backgrounds. The rest of the page has different rules, and confusing the two is where most "colorful" sites go wrong.

Charts and data: use as many colors as the data needs and no more, and make the one series you want noticed the loudest. A chart with six equally bright lines says nothing; a chart with five grey lines and one red one says "look here." Same rule as the button, applied to data.

Icons: one color, usually the brand color or a neutral. A row of six icons in six colors is a row of six small buttons competing with the real one. If the icons are decorative, make them quiet.

Illustrations and mascots: these can be colorful, because they're pictures, not interface — the eye reads them as one object. Scout, the guide on this site, is blue, steel, wood and red, and he lives in a corner where he competes with nothing. When he's on screen with a button, he's smaller than it. That's the deal: color in pictures is fine; color in interface must be earned.

Photos: the most colorful thing on most pages, and the least controlled. A photo behind text fights the text; a photo beside text is fine. If a photo must sit behind a button, put a solid panel behind the button. And compress the photo — a 3 MB hero image is a speed leak wearing a pretty face.

The 3D and animated elements on this site — the storefront on the home page, the phone on the anatomy page, the popable bubbles — follow one rule: they're the only moving, colorful thing in their section, and they stop competing the moment a button appears. Motion is attention; spend it where the decision is.

Dark mode and email: if your site or your emails can render dark, test the action color on the dark background too. A red that's loud on white can sink on near-black; the contrast checker above works in either direction — put the dark background in and see.

The thread through all of it: color is a budget. Spend it on the thing that pays, keep everything else quiet, and let pictures be pictures.

The honest conclusion

Color is a conversion tool. Used right, it gets attention, directs the eye and makes one action obvious. Used wrong — five hues, a photo background, a button that matches the header — it does the opposite and looks great doing it.

The rule that survives every test we've run: one attention color, used only for the action, on a quiet page, the same everywhere. Then put a real review next to the button, because proof beats palette. Then test, because your site is not our site.

If you'd like a stranger's eye on your color hierarchy — and the other eleven ways a site talks people out of calling — the free conversion audit is the fastest way to find out.

Questions people ask