Tints, Tones, Shades
Tinting, toning, and shading are the three ways to modify a pure hue — understanding them lets you create cohesive variations without introducing new hue families.
A pure hue — the fully saturated expression of a colour at mid-lightness — is rarely what you actually use in a design. What you use are modifications of that hue: lighter versions for backgrounds, darker versions for text and depth, and muted versions for secondary elements. Tints, tones, and shades are the three systematic ways to create those modifications, and knowing which type you’re using keeps your palette coherent.
Tints — adding white
A tint is a hue mixed with white. Adding white raises the lightness and reduces the saturation simultaneously, moving the colour toward pastel territory. Sky blue, powder pink, mint green — these are all tints of their parent hues.
Tints are useful for backgrounds, hover states, and secondary surfaces where you want to suggest a colour without committing to its full intensity. A tinted background for a success message (background: hsl(142, 76%, 97%)) communicates “success” without the visual weight of a fully saturated green. In HSL, tinting is simply increasing lightness beyond 50% — the saturation partially collapses toward white at high lightness values. In OKLCH, you have more precise control.
Shades — adding black
A shade is a hue mixed with black. Adding black reduces lightness and slightly reduces saturation, creating deeper, richer, more serious versions of a colour. Navy is a shade of blue. Burgundy is a shade of red. Forest green is a shade of green.
Shades are used for text on tinted backgrounds, for depth in illustrations, for pressed states in interactive elements, and for creating the impression of shadow and volume. They’re also the foundation of dark mode — the near-blacks in a dark UI are typically shades of the dominant hue family, not pure black. A dark surface of hsl(220, 20%, 8%) reads as cooler and more sophisticated than rgb(20, 20, 20).
Tones — adding grey
A tone is a hue mixed with grey. Unlike tinting (which moves toward white) or shading (which moves toward black), toning mutes the colour at its current lightness level. The result is more complex and often more sophisticated than either pure tints or shades — muted colours read as mature, refined, and editorial rather than vivid and immediate.
Tones are particularly useful for secondary text, subtle borders, inactive elements, and the kind of colours that need to support the composition without drawing attention to themselves. Many brand palettes that appear “minimal” or “grown-up” are built primarily from tones rather than vivid hues — think the dusty rose, warm taupe, and sage green of many lifestyle brands.
Practical use in design systems
When building a colour scale, you’re creating a family of tints and shades from a single base hue. A scale like Tailwind’s blue-50 through blue-950 is a systematic progression from near-white tints through vivid mid-tones to near-black shades, all preserving the parent hue. The palette remains coherent because every step comes from the same hue family.
Tones appear when you reduce saturation across the scale — a muted, desaturated version of blue-500 might be used for secondary labels where you want to suggest “blue” without competing with the primary interactive blue. Keep tints, tones, and shades distinct in your mental model so you can make targeted adjustments: if a colour is too vivid, reduce saturation (tone it). If it’s too dark, increase lightness (tint it). These are different operations with different results.