Design & UX
Colour in web design: choosing a palette that works
- Author
- Ric Wood
- Published
A good website colour palette is small, purposeful, and high in contrast where it counts. In practice that means a main brand colour, a small number of supporting tones, and one colour reserved for the things you want people to click. Use colour to guide the eye and signal what matters, make sure text stands out clearly against its background, and resist the urge to use more colours than you need. A disciplined palette looks more professional and works far harder than a busy one.
Colour is the first thing people register about a site, often before they have read a word, so it is worth choosing deliberately rather than by taste alone. Here is how to build a palette that does its job.
Start small and purposeful
The instinct to use lots of colours is one to resist. A strong palette is usually a single dominant brand colour, one or two supporting shades, a neutral or two for backgrounds and text, and one clear accent colour held back specifically for calls to action. That last point is the one most people miss: if your "buy" button is the same colour as everything else, it disappears. Reserving one colour for action gives the eye an instant map of where to go.
Contrast is non-negotiable
Colour is not only about looking good, it is about being readable, and contrast is where the two meet. Text needs to stand out clearly from its background, which is why pale grey text on white, however fashionable, is a genuine problem for a lot of readers. This is also an accessibility requirement, with measurable minimum contrast levels, so getting it right serves both beauty and inclusion at once. If in doubt, increase the contrast; almost no one ever complained that text was too easy to read.
Using colour to guide attention
A high-contrast colour pulls the eye to it automatically, without the viewer deciding to look. That is a powerful tool when used sparingly and a liability when overused. If everything on the page is bright and bold, nothing stands out and the whole thing feels exhausting. Keep most of the page calm and neutral, and let your accent colour do the pointing. The contrast between quiet and loud is what makes the loud part work.
Common colour mistakes
The usual traps: too many competing colours, so the page has no focus. Poor contrast that makes text hard to read. Using colour as the only way to signal something, which fails for colour-blind visitors, so pair it with text or shape. And ignoring your existing brand, so the site clashes with your logo, signage, and printed materials. Colour should tie your whole presence together, not fight it.
What this means for your website
A good palette is a quiet workhorse: it makes the site feel coherent, guides people to the right places, and stays readable throughout. It is craft, not guesswork. This piece is part of what makes good web design. If you are interested in why particular colours carry the associations they do, that is a question of psychology rather than craft, and one we cover separately; here the focus is on choosing and using colour well across the sites we design.
Design & UX
What makes good web design?
Good web design is clarity, usability, and trust made visible, not decoration. A plain-English guide to what good design actually is, from BrainWeb.
Learn moreDesign & UX
Web accessibility in plain English: what WCAG 2.2 means for your site
What web accessibility and WCAG 2.2 actually mean for a small business website, in plain English, and why doing it well makes the site better for everyone.
Learn moreDesign & UX
Typography in web design: how to choose and set type that works
How to choose typefaces, pair them, and set type for comfortable on-screen reading. A practical, plain-English guide to web typography from BrainWeb.
Learn more