Your website’s colours are doing a sales job whether you hired them or not. A visitor lands on your homepage, and within seconds their brain has filed you under “professional”, “cheap”, “confusing” or “trustworthy” — largely from colour. Most small business sites picked colours by accident — and “off” doesn’t get enquiries.
The good news: a working brand palette isn’t about having good taste. It’s about giving every colour a job. Here’s how to do it — plus a free tool at the end that builds the whole palette for you in seconds.
Why most small-business colour schemes fail
They have no primary. Open many SME sites and you’ll count five or six colours of equal weight: a blue header, green buttons, an orange banner, purple icons. With no clear lead colour, nothing stands out — including the “Contact us” button. One colour should clearly be the boss.
They borrow, don’t decide. “Our competitor uses red, so we used red.” Colours carry meaning whether you chose them deliberately or not — blue reads corporate and calm, green reads natural and safe, gold reads premium. Picking by imitation hands your positioning to someone else’s designer.
Text fights the background. The most common real-world failure is also the most fixable: grey text on a light-grey background, or white text on a bright accent colour. If visitors squint, they leave. Contrast isn’t decoration — it’s readability, and there are objective standards for it (more on that below).
They use accent colours everywhere. An accent colour only works if it’s rare. Splash it across every section and it stops being an accent — it becomes noise. Accents earn their power from scarcity.
Nobody wrote the codes down. The business has “a blue”, but the website blue, the van blue, the flyer blue and the Facebook blue are all different blues. Without exact hex codes, every supplier improvises and the brand quietly fragments.
The 60-30-10 rule
Professional designers lean on one simple ratio: 60% light, calm backgrounds · 30% your brand colours · 10% accent.
Most of the page stays quiet and readable. Your primary and secondary colours carry the structure — headers, navigation, buttons, links. The accent appears only where you want a decision: prices, “Book now”, limited offers, phone numbers. Because it shows up rarely, it gets noticed.
Five palette mistakes to avoid
1. Too many lead colours
Pick ONE primary. You get a secondary for support and an accent for action. Everything else is tones: dark for text and footers, light for backgrounds, neutral for borders. Six colours total is plenty for a small business.
2. Contrast as an afterthought
Before you commit to a colour for buttons or headings, check whether text is actually readable on it. The WCAG accessibility standard calls 4.5:1 the bar for normal body text (“AA”), and 3:1 acceptable for large headings. White text on a medium blue often passes; white text on bright orange usually doesn’t. Check first, publish second.
3. Clashing undertones
Two colours can both be “blue” and still fight — one leans purple, the other leans green. Colours from the same side of the wheel harmonise naturally; opposites create energy but need care. A scheme generator computes this for you.
4. Forgetting dark and light tones
A brand isn’t just its bright colours. You need a dark tone for footers and body text, a light tone for calm backgrounds, and a neutral grey for the boring-but-essential stuff: borders, dividers, form fields, muted text. Sites that skip these end up with harsh black text on stark white — readable, but cold.
5. No written record
Write the hex codes down somewhere permanent — a brand sheet, a CSS file, a shared doc. The moment a designer, printer or sign-writer asks “which blue?”, the answer should be six characters, not “you know, the blue one”.
How to build your palette in 5 minutes (free)
Our free Colour Palette Generator does the colour theory for you:
- Enter a base colour. Your logo colour is ideal — or pick any colour you like from the colour box. You can also type a hex code directly.
- Pick a scheme. “Brand blend” suits most businesses. Complementary gives bold contrast, Analogous gives calm harmony, Triadic gives balanced energy, Monochrome builds everything from one colour.
- Pick a style. Professional for corporate audiences, Vibrant for energy, Soft & friendly for care and education brands, Bold & dark for a premium feel.
- Generate and inspect. You get six swatches — Primary, Secondary, Accent, Dark, Light, Neutral — each with its hex code (click to copy), a plain-English usage note, and a contrast badge showing whether text is safely readable on it.
- Export. Copy the CSS variables straight into your website, download the palette.css file, or email yourself the full report to hand to your web designer.
The whole thing runs in your browser — nothing you enter is sent anywhere.
What the results mean
- Primary is your lead colour: logo, main buttons, headlines, links. This is the colour people should remember.
- Secondary supports it: sub-headings, icons, secondary buttons, section accents.
- Accent is for decision moments: prices, “Book now” buttons, badges. Rare by design.
- Dark / Light / Neutral do the quiet work: footers, body text, backgrounds, borders.
- The contrast badge tells you at a glance whether a swatch can carry text. Green “AA” means body text is fine; amber “Large text” means headings only; grey “Decorative” means backgrounds and shapes.
- The CSS variables (–brand-primary, –brand-accent, …) let any developer apply your palette across a whole site in minutes — consistent everywhere, no guessing.
FAQs
How many colours does a small business brand need?
Six is the sweet spot: primary, secondary, accent, dark, light and neutral. Fewer looks thin; more looks random.
What’s a hex code, exactly?
It’s the web’s standard colour address — six characters like #2e6bff that define an exact red-green-blue mix. Paste it anywhere and you get precisely the same colour, every time.
Do the same colours work in print?
The hex codes convert cleanly in any design software, so your designer can match them for print. Just proof anything critical first — screens and printers render colour slightly differently.
Your colours are a sales tool — treat them like one
A deliberate palette removes a silent objection: the vague sense a business isn’t quite professional. Six colours, each with a job, used consistently — that’s all it takes to look like you mean it.
Try it now: Generate your free brand palette
And if your new palette deserves a website to match, book a free 15-minute consultation — we’ll show you what your brand could look like done properly.
