A brand guide usually names two or three colours. Start drawing screens with them and you run short almost immediately. A button needs to darken on hover, darken further when pressed, sit behind text as a far paler tint, and look distinctly different when disabled. One brand colour actually demands five or six values.
Choose those by eye on each screen and the site ends up with ten slightly different greens. Derive them by rule and it ends up with none.
The variants each role needs
Derive variants by moving lightness first. Rotating the hue as well makes a hover state read as a different colour, and the brand wobbles. Saturation drops sharply only for the disabled state, because that is the visual signal for “you cannot press this”.
Settle the grey axis at the same time. Pure neutral greys sit apart from the brand colour; mixing a trace of the brand hue into them makes the whole screen read as one family. Four or five steps — text, secondary text, borders, pale surfaces — is usually enough.
Check contrast before you name anything
Here is where the common accident happens. If the brand colour is on the bright side, it cannot be your body text colour on white. It works beautifully as a fill and fails as type. Mockups rarely reveal this because the colour was only tried on large headings; it surfaces the day it lands on an inline link.
An accessibility check is not a constraint on design so much as proof-reading for design. Combinations that fail contrast are combinations people genuinely struggle to read, and finding that out at mockup stage is always the cheaper moment.
How many steps should exist?
Palette generators happily produce eleven steps per hue, and it is tempting to register all of them. But steps nobody uses get used badly by whoever comes next, because appearing in the list looks like permission.
Keep only the steps you needed. Four brand steps, five greys, and a background-and-foreground pair for each status colour (success, warning, danger, info) will draw most business sites. When something is genuinely missing, add one more — by the same rule that produced the rest.
How colour and contrast feed into real audit scores continues in the Themes & plugins archive, and an accessibility-and-performance review is part of the diagnostic in our optimization program.
Next part
With colour settled, spacing is next: a scale built on multiples of four, and what a single exception to it actually costs.