How many colours should a brand palette have?

The advice you will usually hear is three to five. That is right for a logo and wrong for anything with an interface, which is why so many brand guidelines fall apart the moment someone builds a settings page.

Separate the brand from the system

A brand palette and a working colour system are different things with different jobs.

• The brand palette is what people should recognise: one primary, one or two secondaries. Three colours is plenty. Its job is memorability.
• The colour system is what a product is actually built from: neutrals, surfaces, borders, text at two or three weights, and states for success, warning, error and information. Its job is to make every screen possible.

A system for a real product typically ends up with 25 to 40 defined values. That is not a bloated brand palette; it is a small brand palette plus the scaffolding it needs.

A structure that holds up

1. One primary. The colour someone would name if asked what colour your brand is.
2. One or two secondaries, for when the primary would be too loud or is already in use.
3. A neutral ramp — five to nine steps from near-white to near-black. This carries most of the interface, and it is the part people skimp on.
4. Four state colours: success, warning, error, information. These are conventional for a reason; do not be clever.
5. For each colour that will ever carry text, a darker variant that clears 4.5:1.

The neutrals are the palette. The brand colours are the signature on it.

Where extraction fits

Pulling a palette from a photograph is a good way to find a primary and a set of neutrals that already agree with it — because they were lit by the same light, they will sit together in a way hand-picked neutrals rarely do. Take the dominant colour and the near-neutrals as your ground, take an accent from the low-percentage end, and build the ramp and the states yourself.

The test

Design your least glamorous screen with the palette. A form with an error on it, a table, an empty state. If you find yourself inventing a colour that is not in the system, the system is too small. If half the palette never appears, it is too big.