Tint vs Shade — differences, a side-by-side table, and when to use each.
Designers say "lighter" and "darker", but color theory has precise words for it. Mix a color with white and you get a tint; mix it with black and you get a shade; mix it with gray and you get a tone. Those three operations are how every color scale in a design system is built.
A tint is a base color mixed with white. Tints keep the same hue but rise in lightness and drop in saturation — pushed far enough, every hue tints toward white. Pastels are tints. In HSL terms, tinting moves lightness from the base value up toward 100%.
A shade is a base color mixed with black. Shades keep the hue while lightness falls toward 0% — pushed far enough, every hue shades toward black. Deep navies, forest greens and maroons are shades of blue, green and red. In HSL terms, shading moves lightness down toward 0%.
| Tint | Shade | |
|---|---|---|
| Mixed with | White | Black |
| Lightness | Increases | Decreases |
| Typical result | Pastels, soft backgrounds | Deep, rich darks |
| Design-system role | Light steps (50–400) | Dark steps (600–950) |
| Extreme case | Pure white | Pure black |
| Related term | Tone = mixed with gray | Tone = mixed with gray |
Use tints for backgrounds, hover states and subtle fills — anywhere you need the brand hue present but quiet. A 90–95% lightness tint of your primary color makes a far better section background than a random light gray, because it stays on-brand.
Use shades for text, borders and pressed states — anywhere you need weight and contrast. Shading your primary color for dark text (instead of defaulting to pure black) keeps long pages feeling cohesive, and dark shades anchor footers and headers.