Tints, shades, and tones: how to build a complete color scale for any brand color

The difference between a tint, a shade, and a tone is not just terminology — it reflects three different relationships between a color and its visual context. Understanding how to generate a complete, usable tonal scale from any brand color is one of the foundational skills of modern design systems. Most color tools produce scales that look acceptable but break down under real conditions: text that fails contrast on midrange steps, surfaces that feel muddy rather than elevated, and shades that lose hue fidelity as they darken. Building a reliable color scale requires understanding where each decision compounds.

Design Systems Color Theory

Highlights

A tint is made by adding white to a color — in practice, by raising lightness while reducing saturation proportionally. A shade is made by adding black — lowering lightness while keeping saturation controlled. A tone is made by adding gray — reducing saturation while keeping lightness roughly constant. In HSL terms: tints push L toward 100 while reducing S, shades push L toward 0, and tones reduce S at a fixed L. All three operations preserve the original hue angle, which is what maintains color identity across the scale.

The most common failure in tonal scales is midrange contrast collapse. Steps 300–500 often produce colors where neither black nor white text meets WCAG AA (4.5:1 for normal text). This is predictable: the midrange is where luminance crosses the threshold that makes both foreground options borderline. The fix is to designate midrange steps explicitly as background-only and design the scale so that no interactive or informational element uses those steps for text color. The 200-step is typically the last viable background step with black text; the 700-step is typically the first viable background step with white text.

Saturation behavior across a scale determines whether it reads as a single color family or as disconnected swatches. For vivid hues like blue or orange, reducing saturation aggressively in the light steps (50–200) prevents washed-out pastels that read as gray rather than tinted. For muted, earthy hues like terracotta or sage, saturation is already low and should change minimally across the scale to preserve the character. The same lightness interpolation applied to two different base colors requires different saturation curves to produce equally usable results.

How to evaluate a color scale before using it in a design system

A tonal scale is production-ready when it passes four tests. (1) Every step is visually distinct — adjacent steps should be immediately distinguishable, not near-identical. (2) The light steps (50–200) pass AA contrast with black text at normal size. (3) The dark steps (700–950) pass AA contrast with white text at normal size. (4) The midrange steps (300–600) are explicitly designated as non-text colors in the system documentation, preventing misuse. Test the scale on a white background, a dark background, and in the context of your actual UI components — a swatch grid is not a sufficient test environment.

Building a scale from a brand color that does not sit at step 500

Not every brand color is naturally a step 500 value. A bright electric blue might naturally read as step 400 — vivid but still fairly light. A deep burgundy might naturally read as step 700. Forcing it into the 500 slot by adjusting lightness changes the color and may not be acceptable for brand consistency. The correct approach is to find the natural position of the brand color in the lightness range, fix it there, and build the rest of the scale outward from that anchor. Document which step the brand color occupies. If the brand blue is at step 400, the primary action color in the design system becomes step 400, not step 500, and the scale is built to accommodate that.

Newer issue

Color and print production: CMYK, Pantone matching, and what changes between screen and press

2027-05-06

Older issue

Color in motion: designing animated color transitions and when timing matters

2027-05-20