The three words get used interchangeably and they mean different things:
- A shade is a colour mixed with black. Darker, and usually more saturated-looking.
- A tint is a colour mixed with white. Lighter and softer.
- A tone is a colour mixed with grey. Same lightness territory, less intensity.
Between them they give you the whole family of a single hue, which is what you need the moment one brand colour has to cover a hover state, a border, a disabled control, a background wash and a piece of body text.
Why one colour is never enough
A real interface needs, at minimum: a base colour for the main action, something darker for its hover and active states, something much lighter for a selected-row or callout background, a mid-tone for borders and dividers, and something dark enough to use as text on the pale version. That is five values from one starting point, and picking them by eye tends to produce a set that drifts in hue and looks subtly unrelated.
Generating them systematically keeps the family coherent, and makes the whole thing adjustable later by changing one input.
The lazy method, and why it fails
The obvious approach is to add black or white in RGB — multiply every channel toward 0 or 255. It works, and it produces disappointing results, because sRGB is not perceptually uniform. Equal numeric steps do not look like equal visual steps, so the darker end bunches up while the lighter end spreads out. Worse, mixing toward pure white desaturates fast, and pale tints end up looking washed and slightly grey.
Adjusting lightness in OKLCH avoids both problems. Steps look even because the space is perceptually uniform, and chroma can be held or gently reduced rather than collapsing. Tints stay colourful instead of turning to pastel mush.
Picking useful steps
For an interface palette, a 10-step scale from very light to very dark covers essentially every need, with the base colour landing somewhere near the middle. Uneven spacing is often better than even: the light end is used for backgrounds where small differences matter, so more steps there earns its keep, while the dark end is mostly text and needs fewer.
A practical shortcut: whichever step you intend to use for body text should clear 4.5:1 against the background you will pair it with. Decide that pair first and build the rest around it — it is much easier than generating a scale and discovering nothing in it is readable. The contrast checker settles it.
Where people go wrong
Letting hue drift. Naive darkening often shifts hue, so the dark end of a “blue” scale comes out slightly purple. Hold the hue constant and vary lightness.
Making the lightest tint pure white. It ends up indistinguishable from the page background and the step is wasted. Stop short.
Using saturated colours for large areas. A full-strength brand colour across a big surface is exhausting to look at. Large areas want tints or tones; save the base for small, important elements.
Building the scale in isolation. Shades of your primary need to sit alongside your greys and your semantic colours. A blue scale that is beautiful alone can clash with the neutral it sits on. Check them together.
Too many steps. More than about ten and the differences stop being meaningful, while the decisions multiply.
Next steps
If you need a full multi-hue system rather than one hue’s family, the colour scale generator is the tool for it, and colour scales for design systems covers how to structure and name the result.