How to Pick Brand Colors That Actually Work on a Website

Most small business sites pick colors the same way: someone likes purple, or the logo happens to be blue, or a template ships with a default accent and nobody bothers to change it. None of that is a method. It's a guess dressed up as a decision.

The colors on your site aren't decoration. They're doing a job — telling a visitor where to look, whether your text is readable, and whether your "Call Now" button is the first thing their eye lands on or something they scroll past. Get that job wrong and you've built a site that photographs well and converts badly.

Here's an actual method: pick a dominant color, pick an accent, check both against real accessibility standards, and avoid looking like the other twelve businesses in your category. No mood boards required.

The honest answer: contrast beats "color psychology" every time

Every color guide on the internet will tell you red means urgency, blue means trust, green means growth. Ignore most of it. A widely cited CXL analysis of CTA button color testing found no single color consistently outperforms another for conversions — what actually moves clicks is how much a button contrasts against everything around it, not the hue itself.

That reframes the whole exercise. You're not hunting for the "right" psychological color. You're building a system where one color dominates, one color stands out from it, and every pairing you actually use is readable. That's it. That's the method.

Start with one dominant color, not five

Pick a single color that carries your site — your header, your section backgrounds, the visual "temperature" of the whole page. For most local service businesses this is a neutral: a dark charcoal, a warm cream, a deep navy. Not your brightest, boldest brand color. That one's coming later, and it needs room to stand out.

A plumbing company doesn't need five shades of blue to "feel like water." One clean neutral base, applied consistently, reads as more professional than a homepage that cycles through every color in the logo. If you're still working from a logo built in a DIY tool like Canva, this step usually gets skipped — the logo has four colors, so the website ends up with four colors too, and none of them is doing a clear job.

Pick one contrasting accent — and make it earn its keep

Your accent color exists for one reason: to make your calls-to-action impossible to miss. "Book Now," "Call Today," "Get a Quote" — that button should be the loudest thing on the page, and it should be the only thing in that color. If it shows up in six other places, it stops meaning "click here" and starts meaning nothing.

I'd avoid picking an accent that's already your dominant color at a lighter tint — it reads as one color from across the room. Pick something that visibly breaks from your base palette, even if it's not in your logo at all.

Check every pairing against the actual accessibility standard

This is the step almost every DIY site skips, and it's not optional if you want your site to hold up to scrutiny — or to be readable by the roughly 1 in 12 men and 1 in 200 women with some form of color vision deficiency, plus anyone reading on a washed-out phone screen in direct sun. The WCAG 2.1 contrast standard sets hard numbers, not vibes:

4.5:1 for regular body text at Level AA (the standard most sites are held to), 3:1 for large headline-sized text, and 7:1 if you're aiming for the stricter AAA level. Google's web.dev guidance and a Google accessible-color codelab both walk through why: 4.5:1 roughly accounts for a user with vision equivalent to 20/40, without needing any assistive tech.

Here's what that looks like with real numbers. I ran a handful of common pairings through the actual WCAG contrast formula:

That last one is the trap. A brand's signature color, used as body text on a white background, fails badly — 1.5:1 in this example, nowhere near the 4.5:1 floor. It's a mistake I see constantly: a business loves its brand color so much it uses it for paragraph text, and the copy becomes borderline unreadable on a bright screen. The fix isn't to abandon the color. It's to save it for buttons, icons, and short labels — and let a near-black neutral handle body text instead. Run your own pairings through WebAIM's free contrast checker before you ship anything; it takes ten seconds per pairing.

Look at what your competitors are already doing, then don't match them

Open five competitor websites in your city and industry. You'll almost always find a pattern — every HVAC company on blue, every landscaper on green, every law firm on navy and gold. Not a coincidence, and not necessarily wrong, but it does mean you're one of six blue sites a customer scrolls past.

Nielsen Norman Group's research on visual hierarchy makes the point that color is one of the strongest tools you have for directing attention — but only if it's distinct from what's around it. If everyone in your category is on the same blue, a warm terracotta or a deep forest green gets noticed simply by not being blue. That's a defensible reason to break from convention, not because a chart said green means "growth."

Limit the palette

A useful shorthand, adapted from a classic interior-design rule: roughly 60% neutral base, 30% primary brand color, 10% accent. It won't be exact on every page, and it doesn't need to be — the point is proportion, not precision.

In practice, keep the total palette small — neutrals included. Here's the range I'd actually aim for:

Five gives you room for a dominant neutral, a secondary neutral for borders and muted text, your primary brand color, your accent, and one semantic color for form errors. That's plenty. Ten-plus usually happens on sites built section by section in a page builder, with nobody stepping back to look at the whole thing — the same pattern I see when comparing a custom build against a template site.

What most small business sites get wrong

A few patterns show up over and over on sites that were never designed with a palette in mind, just assembled:

• Every section header gets its own color. Blue hero, purple services section, orange testimonials. It doesn't read as "vibrant," it reads as unfinished.
• Light gray text on a white background because it looked "clean" in the mockup. It fails contrast almost every time — see the 2.2:1 example above — and it's brutal to read on a phone in daylight.
• Matching whatever color trend is popular that year instead of what the business actually stands for. Sage green and terracotta are everywhere right now for a reason that has nothing to do with your industry.
• The accent color used for links, buttons, badges, icons, and headings, all on the same page — so nothing signals "click me" anymore because everything looks clickable.
• Never actually testing on a phone outdoors. A palette that looks fine on a calibrated monitor in an office can wash out completely on a phone screen in direct sun.

If any of this sounds like it came from a rushed weekend build, it's worth reading through the tradeoffs between DIY branding and hiring a designer before you sink more hours into a palette that isn't working.

The bottom line

Pick one dominant color, one accent that's reserved for calls-to-action, and check every pairing against the WCAG 4.5:1 standard before it ships. Keep the total palette around five colors. Look at what your competitors are doing, then deliberately break from it if it helps you stand out. Skip the psychology debate — contrast and consistency will do more for your conversions than whether your button is "confidence orange" or "trust blue."

If you're about to rebuild or you're evaluating quotes from a few designers, it's worth reading how to evaluate a web design proposal so color and accessibility are part of the conversation up front, not an afterthought you catch six months after launch.

Frequently asked questions

How many colors should a small business website use?

Aim for around five: one dominant neutral, one primary brand color, one accent reserved for calls-to-action, and two supporting neutrals for text and borders. You can stretch to seven or eight if you need a warning color and a success color for forms. Past that, you're not building a brand, you're building a mess.

What is the minimum contrast ratio for website text?

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt or larger, or 14pt bold). Level AAA, a stricter standard, wants 7:1 for normal text. Check any text-on-background pairing with a free tool like WebAIM's contrast checker before you commit to it.

Does color psychology actually affect conversions?

Less than most articles claim. A widely cited CXL analysis of CTA button testing concluded no single color consistently outperforms another — what actually moves clicks is how much the button contrasts with everything around it, not whether it's "urgent" red or "trustworthy" blue. Treat color psychology as a tiebreaker, not a strategy.

Should my brand color match my logo exactly?

Your primary web color should come from your logo, yes, but it doesn't need to be a pixel-perfect match. Logos often use colors that fail accessibility contrast as body text or button fills. Pull the closest accessible shade from your logo's palette and use the exact logo color sparingly, in places contrast doesn't matter as much.

Can I just use a free palette generator?

A generator is fine for a starting point, but it won't check contrast ratios against your actual layout or tell you if you're picking the same blue every competitor in your industry already uses. Treat the generator's output as a draft, then run it through a contrast checker and a look at three competitor sites before you build anything on top of it.