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.
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.
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 |
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.
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.
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.
Be the first to share a useful question or thought.