We Build a Palette by Removing Colours, Not Adding Them

The first version of any palette we make is too large. That's on purpose. Early on, we pull in every colour that might be useful: the brand colours, a few tints and shades of each, some accents that came up in the mood board, a range of greys, and the usual reds, ambers and greens for errors, warnings and success. It's easy to end up with forty swatches before a single page has been designed.

Then the real work starts, which is taking most of them away.

Why big palettes cause problems

A large palette feels generous. It looks like it will cover every situation. In practice, it gives everyone more ways to make inconsistent choices. Two designers pick slightly different blues for links. A developer uses a grey that's one step lighter than the one in the designs. Six months later, the site has twelve greys and nobody knows which is correct.

More colours also means more combinations to check for contrast. Every pairing of text and background needs to meet accessibility standards, and the number of pairings grows much faster than the number of colours.

Giving every colour a job

Our cull starts by asking what each colour is for. A colour without a job goes. Most websites need surprisingly few jobs filled: a background, one or two surface colours for cards and panels, a main text colour, a secondary text colour, a border colour, a primary brand colour for actions and links, and a small set of status colours.

That's roughly ten colours. Some brands need an accent on top, and a dark theme doubles the list. But it's still far from forty.

Once each colour has a job, we name it by that job rather than by its appearance. "Text secondary" tells someone where to use it. "Grey 400" doesn't.

Greys are where it sprawls

Neutrals are where palettes quietly grow out of control. It's tempting to have a grey for every situation. We usually settle on four or five, chosen so that each one is clearly different from its neighbours. If two greys can't be told apart side by side, one of them is redundant.

We also tint our greys slightly towards the brand colour. A purely neutral grey can look flat next to a strong brand colour, while a grey with a hint of warmth or coolness ties the palette together.

Testing in real layouts

Swatches on a grid tell you very little. We test palettes by applying them to real pages with real content: a form, a table, a pricing section, a long article. Problems show up quickly. A brand colour that looked lovely as a swatch might be too bright behind white text, or too close to the error red.

This is also where we check contrast. Every text colour is measured against every background it will sit on, and anything that fails gets adjusted or removed.

The brand colour, used sparingly

The brand colour carries the most weight, so we use it the least. When it appears only on buttons, links and key highlights, it becomes a signal: this is the thing you can act on. Spread it across backgrounds, headings and icons, and it stops meaning anything.

Keeping it small after launch

Small palettes stay small only if someone looks after them. We document each colour, its job and where it's allowed, and we push back gently when new colours are requested. Most requests turn out to be covered by an existing colour once the job is clear. That discipline is part of every website design and build we deliver.

A tight palette makes a site look considered and makes it easier to maintain. If your colour list has grown past the point anyone can remember, we can help you cut it back.