On this page
Three words, three different mixtures
In everyday speech, "shade" covers everything — a shade of blue, a lighter shade, a warmer shade. In color theory the three terms have precise, useful meanings, all defined by what you mix into a base hue:
A shade is the base color mixed with black. Shades get darker and, perceptually, heavier and more serious. A tint is the base color mixed with white. Tints get lighter, softer, and airier — the entire pastel family is tints. A tone is the base color mixed with gray, which lowers its saturation while leaving its lightness roughly where it was. Tones read as muted, dusty, sophisticated.
The reason the distinction matters is that the three operations move a color along different axes. If you think in HSL terms — the model our HSL guide unpacks — shading lowers lightness, tinting raises lightness, and toning lowers saturation. Three different directions through the same color space, three visibly different families of results. Every color page on this site (for example, royal blue) computes all three families for exactly this reason: they answer different design questions.
What each one is for
Shades are how a hue does dark-mode duty: hover states that deepen a button, text colors derived from a brand hue, backgrounds for dramatic sections. The trap with shades is that black overwhelms quickly — a few steps of mixing and most hues collapse toward an indistinct near-black. That's why design systems rarely go past a certain darkness before switching to neutral darks.
Tints carry the opposite duty: backgrounds, hover washes, selected-row highlights, badge fills. A brand color at 90%+ lightness makes a background that clearly belongs to the brand without shouting. If you've seen an interface where an alert's background is obviously "the red, but calm," that's a tint doing its job.
Tones are the subtlest and, arguably, the most professional-looking of the three. Pure, fully saturated hues rarely coexist politely — they fight for attention. Muting some players with gray lets a palette breathe. A great deal of what reads as "premium" or "editorial" color work is ordinary hues, toned.
The mechanics, honestly
It's worth knowing that "mix with black/white/gray" is doing real math under the hood, and the naive version has problems. Mixing in RGB — averaging channel values toward 0 or 255 — is how most tools do it, and for tints and shades it works acceptably. But as our RGB guide explains, RGB values are gamma-encoded, so equal numeric steps are not equal visual steps: a shade ramp built by even RGB division bunches its dark steps together and spreads its light steps out.
Perceptually even ramps space their steps by how different they look, not by equal arithmetic. That's what the color mixer does when it blends through OKLab, and it's why the shade scales in serious design systems (Tailwind's 50–950 ladder, documented in our color chart) look hand-tuned rather than mechanically divided — because visually even is the goal, and arithmetic even doesn't deliver it.
Building a usable ramp from one brand color
A practical recipe that holds up:
- Start from your base color and generate both directions — toward white and toward black. The palette generator does this and labels the results as a 50–900 style scale.
- Check the ends: the lightest tint should still be distinguishable from pure white on a white page, and the darkest shade should stay recognizably your hue, not generic black. If it doesn't, stop the ramp earlier.
- Test the middle for text duty: the shades you plan to use for text on light backgrounds need to clear WCAG's 4.5:1 — verify in the contrast checker rather than trusting appearances, because lightness and contrast are related but not identical.
- Reserve tones for the places where saturation is the problem: charts with too many competing hues, secondary UI that shouldn't compete with primary actions, and long-form reading surfaces.
A note on "tone" in other fields
Photography and video use "tone" for overall lightness (as in "tonal range"), and music borrowed the word for something else entirely — so don't be surprised when the term shifts meaning between communities. Within color work, though, the mix-with-gray definition is the standard one, and having the three operations clearly separated in your head is one of those small vocabulary upgrades that immediately improves how precisely you can think about — and request — color changes.