Guide · Branding

How to choose a brand colour palette

A repeatable process for going from a blank page to a defensible set of brand colours — one that survives a website, a logo, a business card and a decade.

Start with the constraint, not the colour

Most brand palettes are chosen the wrong way round: someone picks a colour they like, then discovers it is illegible as text, identical to a competitor's, or impossible in print. Work through the constraints first and the choice narrows to a handful of good options.

Four questions, in order:

Where will this colour appear? Screen only, or print too? Small text, or large blocks? Ink on cardboard behaves very differently from light on glass.
Who is the audience? Not demographics so much as expectations. A palette for a paediatric clinic and one for a hedge fund are answering different questions about trust.
Who else is in the market? Line up your five nearest competitors' colours. You are looking for a gap, not a trend.
What has to survive? An existing logo, a parent brand, a colour customers already associate with you.

Pick one anchor colour

Nearly every strong identity is built from a single colour, with everything else in support. Choose the anchor for meaning and distinctiveness, not for beauty in isolation.

Colour associations are real but weaker and more culturally specific than branding folklore suggests. Blue does read as stable and competent in most Western markets, which is why so much finance and healthcare uses it — and precisely why it is a crowded choice. Green carries growth, health and environmental claims. Red is urgency and appetite. Yellow and orange read as accessible and affordable. Purple has historically signalled premium and creative. Black is authority and luxury.

Two cautions worth more than the list itself. First, associations vary by culture: white signals purity in much of Europe and mourning in parts of Asia. Second, distinctiveness beats correctness — a category where everyone is blue is a category where the one confident orange gets remembered.

The squint test. Put your candidate anchor beside your five competitors at thumbnail size. If you cannot immediately tell which one is yours, keep looking.

Build the supporting cast

Put your anchor into the Base colour field in the generator and press Build a palette around it — it is locked automatically and everything else is generated to match. If the colour you want exists only in a photograph, a competitor's site or an old brochure, drop that image into the extract panel and take the swatch from there instead. The harmony mode you choose sets the personality:

Monochrome — one hue, many tones. Calm, confident, hard to get wrong. Common in fintech and B2B software. Add one contrasting accent or it becomes flat.
Analogous — neighbouring hues. Warm, organic, cohesive. Suits wellness, food, hospitality.
Complementary — opposite hues. High energy, strong calls to action. Let one dominate heavily; a 50/50 split of complements is exhausting.
Triadic — three evenly spaced hues. Playful and balanced. Children's brands, education, illustration-led identities.

Aim for five roles rather than five favourite colours: a dominant, a secondary, an accent, a near-black for text and a near-white for surfaces. That last pair does more work than anything else in the palette and is almost always chosen carelessly — tint your neutrals slightly toward the anchor hue and the whole identity feels considered.

Apply the 60-30-10 ratio

Borrowed from interior design and dependable on screen: roughly 60% dominant, 30% secondary, 10% accent. In practice the dominant is usually a neutral — the page background — with the brand colour as the 30% and the accent reserved for the few places you need the eye to land. Brands that use their loudest colour for 60% of the surface tend to look like a warning sign.

Test before you commit

Run the palette through five checks. Each one has killed a palette that looked fine as swatches.

Contrast. Body text on background, and button label on the brand colour, both at 4.5:1 or better in the contrast checker. A brand colour that cannot hold white text will cause friction on every button you ever build. See the accessibility guide.
Colour blindness. Switch Vision check to deuteranopia and look for swatches that merge. Roughly 1 in 12 men has a colour-vision deficiency, and red/green pairings are the usual casualty.
Greyscale. Set Vision check to achromatopsia. If two brand colours become the same grey, they will be indistinguishable in a photocopy, a black-and-white print ad or a low-ink situation.
Small and large. View the palette as a 16px logo and as a full-screen background. Vivid colours that sing at small sizes can be overwhelming at full bleed.
Print. If anything will be printed, get a CMYK conversion in the right profile and look at a physical proof. Bright screen cyans and greens are the usual casualties — see colour models.

Write it down

A palette that lives only in a designer's file is a palette that will drift. Export it — CSS variables, OKLCH, SCSS, Tailwind config or JSON tokens — and record, for each colour: its hex value, its role, what it must never be used for, and which text colours are approved on top of it. Use Copy share link to circulate the palette itself rather than a screenshot of it. Then extend it into a full colour system — the Tonal scale panel will generate the 50–900 steps for you — and plan the dark-mode variant before someone requests it at short notice.

One legal note

Colours themselves are not owned, and you are free to use any colour value this tool produces. But a colour used as a brand identifier in a specific market can be protected by trade mark or passing off — the well-known examples being certain telecoms magentas and confectionery purples. If you are deliberately adopting a colour strongly associated with an established competitor in your own sector, take advice first. Our Terms of Use cover this in more detail.

Start with your anchor colour →