To choose a website colour palette that still looks professional, follow four steps: decide the feeling your brand has to create, pick one dominant colour that matches it, add one secondary colour and one small accent using the 60-30-10 rule, then check every text and background pairing for contrast — at least 4.5:1 for normal text under WCAG AA. That is the whole method. You can test combinations in minutes with our free colour picker tool, which gives you the HEX, RGB and HSL values for any colour.
Most websites that look amateur do not use bad colours — they use too many, in the wrong proportions, with text that quietly becomes hard to read. Fix those three things and even a simple palette looks polished.
Start with the Brand, Not the Colour Wheel
Open a colour wheel first and you will drown in options. Start instead with three words for how your business should feel: calm and precise, warm and welcoming, bold and modern. They narrow the field before you pick a single hex value.
Colour carries meaning visitors read instantly. Blues signal trust and competence — why banks, law firms and software companies lean on them. Greens suggest health and growth. Warm reds and oranges create appetite and energy. Black, white and grey read as premium and minimal. Fighting your industry's conventions makes visitors work harder to place you, and some simply leave.
Pick your dominant colour from those brand words, then sanity-check it against your logo. If your logo is a warm orange, a cold blue website feels like a different company. The palette need not copy the logo exactly, but the two should clearly belong together.
Tip: Screenshot four or five websites you admire in your industry and note the colour that dominates each. You will find the same pattern every time: one clear dominant colour, used consistently.
Tool preview: one colour, a whole family
One picked colour becomes a working family: the tool's Tints & Shades for the teal #0E7C7B, ready to fill the 60-30-10 roles below. Click the preview to build a palette from your own colour.
Build the Palette with the 60-30-10 Rule
Professional designers rarely balance colours evenly. They use a ratio borrowed from interior design: about 60% dominant colour, 30% secondary, 10% accent.
In practice the dominant share is usually backgrounds and large areas — often white, a very light tint, or your brand colour used quietly. The secondary colour carries headers, footers, cards and section backgrounds. The accent is reserved for what must be noticed: buttons, links, prices and calls to action. Because it appears so rarely, the eye goes straight to it.
The 60-30-10 rule — hover or tap each bar for details.
A useful test: squint at your homepage. You should name the dominant colour instantly and find the accent only where action is wanted. If everything shouts, nothing stands out.
Neutrals Do the Heavy Lifting
Count the pixels on any well-designed homepage and most of them are not brand colours at all — they are neutrals: the page background, body text, hairline borders, dividers and the pale tints behind sections. Getting the neutrals right is what makes the three palette colours look expensive.
Two working rules. First, warm brands want warm neutrals and cool brands want cool ones: a bakery's greys should lean toward brown and cream, a law firm's toward blue. A neutral grey borrowed from the palette family always looks intentional; a random grey looks like a mistake nobody noticed. Second, derive your neutrals rather than collecting them — the lightest tint of your secondary colour makes a natural section background, your text colour is usually a very dark shade from the same family, and borders are that text colour at low strength. A palette plus its own tints and shades gives you a complete, coherent set without a single extra colour decision.
Contrast Is Not Optional
Contrast is the brightness difference between text and its background, measured from 1:1 (identical colours) to 21:1 (black on white). The Web Content Accessibility Guidelines — WCAG — set the widely used AA standard: at least 4.5:1 for normal text and 3:1 for large text (roughly 18pt, or 14pt bold and above).
This is not pedantry. Low contrast affects real customers: older visitors, anyone reading a phone in bright sunlight, anyone with reduced vision. It is also good business not to lock people out of your own website.
The catch: fashionable choices often fail. Light grey text on white looks soft and modern in a mock-up, but mid-grey #777777 on white works out at 4.48:1 — a hair below the line. Darken it to #595959 and it passes comfortably at 7.0:1. Same look, readable by everyone.
Contrast ratios of common text/background pairs (WCAG, computed) — hover or tap each bar for details.
| Text / background pair | Contrast ratio | WCAG AA — normal text (needs 4.5:1) | WCAG AA — large text (needs 3:1) |
|---|---|---|---|
| Black #000000 on white | 21.0:1 | Pass | Pass |
| White on navy #0B2545 | 15.4:1 | Pass | Pass |
| White on teal #0E7C7B | 5.0:1 | Pass | Pass |
| Mid-grey #777777 on white | 4.48:1 | Fail — just below the line | Pass |
When you test colours in the picker, check your three main pairs before you fall in love with them: body text on its background, button text on the accent, and headings on section backgrounds.
Example Palettes by Industry
These example palettes follow the rules above: one dominant colour, one secondary, one accent, with white or near-white doing most of the background work. Use them as starting points, not uniforms.
| Business type | Dominant (60%) | Secondary (30%) | Accent (10%) | The feel |
|---|---|---|---|---|
| Law firm | Navy #1F3A5F | Slate grey #5B6B7C | Gold #C9A227 | Trust, tradition, premium |
| Restaurant | Deep green #2E5339 | Cream #FAF3E7 | Terracotta #C96F4A | Warm, fresh, appetising |
| SaaS product | Indigo #4F46E5 | Light grey #F1F5F9 | Coral #FF6B4A | Modern, capable, energetic |
| Health clinic | Teal #0E7C7B | Soft blue #7FB3C8 | Warm amber #E9A13B | Calm, clean, caring |
Worked Example: A Complete Palette for a Home Bakery
Here is the whole method applied to one business. A home bakery's three brand words are warm, homemade, trustworthy. Following the steps above produces this palette:
| Role | Colour | Used for |
|---|---|---|
| Background (60%) | Warm cream #FBF6EF | Page background, open space |
| Secondary (30%) | Deep green #2E5339 | Header, footer, section bands |
| Text | Deep cocoa #33241A | Body text and headings on cream |
| Accent (10%) | Terracotta #C96F4A | Prices, badges, highlights |
| Button variant | Dark terracotta #B85C36 | Order buttons with white text |
Now the contrast checks, computed with the WCAG formula used earlier in this guide. Cocoa text on the cream background measures about 13.9:1 — passes everything, effortless to read. White text on the deep green measures about 8.7:1 — passes comfortably, so the header and footer are safe. The third check catches a real problem: white text on the terracotta accent measures only about 3.6:1, which passes for large text but fails the 4.5:1 bar for ordinary button labels.
The fix is not to abandon the terracotta — it is the brand's warmth. The accent stays for prices, badges and large headings, where 3.6:1 is legal and looks right, and buttons get a one-step-darker variant, #B85C36, where white text measures 4.54:1 and passes. Two near-identical oranges, each used where it works: that small compromise is exactly what a checked palette looks like in practice.
Test Your Palette on Real Content
A palette that looks good as five swatches can still fail on a real page. Apply it to an actual layout first: a headline, a paragraph, a button, a form and a footer. Read the paragraph at arm's length. Then open the page on your phone outside — sunlight is the harshest contrast test there is, and many visitors will meet your site exactly there.
Check photos against the palette too — they bring their own colours, and if they clash, adjust the images rather than redesigning the palette around one photo. Compress test images first with a free image compressor so the page loads quickly while you judge it.
Decide early about dark mode, too. It is not an inversion of your palette — dark backgrounds change how every colour reads, so it needs its own contrast checks. And do not let colour selection stall the project: palette decisions sit inside the design phase, only one part of how long a business website takes to build.
Mistakes That Make Websites Look Amateur
Warning: the fastest way to look amateur is adding one more colour. Every new colour dilutes the accent and makes every later decision harder.
- Rainbow pages: five or six competing colours, with none clearly in charge.
- Ghost text: light grey body copy on white that fails contrast and strains readers' eyes.
- Red/green-only signals: errors and success shown by colour alone. Around 1 in 12 men have some form of colour-vision deficiency, so always add an icon or a text label as well.
- Accent everywhere: when every heading, banner and badge uses the accent colour, your buttons stop looking clickable.
Key takeaway: one dominant colour, one secondary, one rare accent — then prove every text pairing reaches 4.5:1. That discipline, not the specific colours, is what makes a palette look professional.
If you'd rather run your business, this is exactly the kind of decision a designer makes for you.
Writing It Down: The One-Page Palette Sheet
A palette only works if it survives contact with the future — next season's landing page, the new hire's social graphics, the printer's menu run. The tool that keeps it consistent is unglamorous: a one-page sheet recording each colour's name, its HEX value, its role and the pairings it is allowed in. "Terracotta is for prices and badges; buttons use dark terracotta with white text" is a rule anyone can follow in your absence.
The sheet takes twenty minutes to write once the palette is chosen, and it pays for itself the first time someone asks what green the website uses. Give colours names as well as numbers — people remember "deep green" and mistype #2E5339.
The Same Palette in Print
Your palette will eventually leave the screen: menus, packaging, business cards, a shopfront sign. Print uses CMYK ink rather than RGB light, and some screen colours — bright greens and oranges especially — shift slightly when converted, because the printable colour range is smaller. This is manageable if it is planned: record a CMYK partner value next to each HEX on the palette sheet, converted deliberately rather than by a printer's default settings, and proof brand-critical items on paper once. Our guide to converting RGB to CMYK for print walks through the maths and the proofing checklist.
Our web design service builds your palette, layout and website together — contrast-checked and mobile-tested from the start. Tell us your three brand words and we will do the rest. You will find more guides on our blog.
Choosing colours for a website or rebrand? A palette is a business decision, not just a taste decision. Book a free consultation — we design websites with colour systems that stay consistent on screen and in print.
Frequently Asked Questions
How many colours should a website have?
Three main colours — a dominant, a secondary and an accent — plus neutrals such as white, black and greys. Tints and shades of those three do not count as extra colours; they are how you create variety without chaos.
What is the 60-30-10 rule in web design?
It is a proportion guide: about 60% dominant colour (usually backgrounds), 30% secondary (sections, headers, cards) and 10% accent (buttons and calls to action). One colour stays clearly in charge, and calls to action are easy to find.
What contrast ratio does my text need?
WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text. Black on white is 21:1 and white on deep navy is about 15.4:1. Light grey text on white is where most websites fail.
Can I just use my logo colours as my website palette?
Usually yes, as a starting point — consistency with your logo builds recognition. But check shades in real use: a bright logo colour may fail behind white text, so deepen it a step for large areas and keep the original for accents.
Does my website need a dark mode?
Not necessarily. It is a nice extra for content-heavy products, but it doubles your contrast testing. One well-checked light palette beats a careless pair of themes.
What if my favourite colour fails the contrast check?
You rarely have to abandon it. Contrast failures are about pairings, not colours: keep the colour for large areas, headings and accents where the requirement is lower, and use a one-step-darker shade of it where normal text has to sit on it — the bakery example above keeps its terracotta and passes by adding a darker button variant.
How do I keep colours consistent when different people produce pages and graphics?
Write the palette down. A one-page sheet with each colour's name, HEX value, role and allowed pairings stops drift far better than memory or screenshots. Share it with anyone who makes anything for the business — the website, social posts, print — and new material starts matching by default.
Be the first to share a useful question or thought.