A tint is the colour plus white. A shade is the colour plus black. A tone is the colour plus grey. The three words get used interchangeably and they describe three operations that produce visibly different results from the same starting hue.
Knowing which one you want is most of the work, because the tool for each is the same tool with a different setting.
What does each one change?
One value in each case, once the colour is expressed as hue, saturation and lightness.
| Operation | Add | Effect in HSL |
|---|---|---|
| Tint | white | lightness up |
| Shade | black | lightness down |
| Tone | grey | saturation down |
Tints are where pale interface surfaces come from, and they are the ones that lose their identity fastest — a tint at 95 per cent lightness is nearly white whatever hue it started as.
Tones are the underused one. Reducing saturation rather than changing lightness is how a colour becomes usable as a large background without going pale, and it is the difference between a palette that looks considered and one that looks like a set of highlighter pens.
Why do generated tints look washed out?
Because raising lightness in HSL removes saturation implicitly. At 100 per cent lightness every hue is white, so the closer a tint gets to the top of the range the less of the original colour survives.
Adding white to the channel values in RGB gives a slightly different result from raising HSL lightness, and neither matches what mixing paint does. That is not a fault in either — they are different operations that share a name in ordinary speech.
The practical answer is to raise saturation slightly as lightness rises, which keeps the hue recognisable at the pale end. A generator that produces flat, believable tints is usually doing exactly that.
Hue drift is the other thing to watch. Some tools shift the hue slightly as they lighten or darken, because a pure lightness change through the middle of a ramp can look dull. Done deliberately it produces a warmer highlight and a cooler shadow, which is closer to how light behaves; done accidentally it produces a family whose ends do not look related.
Why does blue plus yellow give grey?
Because mixing on a screen adds light. Averaging the channels of pure blue and pure yellow gives a mid grey, and it is worth seeing once because it contradicts everything a paint box teaches.
The green a child gets from blue and yellow paint comes from subtraction: the blue pigment absorbs most wavelengths except blue and some green, the yellow absorbs most except red and green, and green is what survives both. Nothing about that process happens when two light sources combine.
A mixer that blends in a perceptual space sits between the two, giving a midpoint that looks like a midpoint rather than a mathematical average. For blending two brand colours into an intermediate step, that is usually what you want.
What makes a random colour usable?
Constraint. A colour picked uniformly at random across all three channels lands in the muddy middle far more often than not, because most of the sixteen million is unremarkable mid-tone.
Every named mood is a range in HSL rather than a rule about hue. Pastels sit high in lightness and modest in saturation. Neons sit at full saturation with lightness near the middle, which is where a hue is at its most intense. Muted palettes drop saturation and leave lightness alone.
Warm and cool are the only ones that constrain hue itself — roughly the reds through yellows against the greens through blues — and they leave the other two values free, which is why a warm palette can still be pale or dark.
How many steps should a ramp have?
Enough for the roles you have, which in practice is somewhere between five and eleven. Fewer than five and there is no room for a hover state; more than eleven and adjacent steps stop being distinguishable.
Odd numbers are convenient because the base colour sits in the middle with the same count either side. That symmetry makes the dark mode version a reversal rather than a redesign.
The steps should not be evenly spaced in lightness. Perceived difference compresses at both ends, so a ramp that steps evenly by the numbers looks bunched in the middle and stretched at the extremes.
Questions people ask
What is the difference between a tone and a muted colour? None, in practice. Muted is the informal word for a palette built from tones.
Is a shade the same as a darker colour? Only if the hue and saturation are unchanged. Most "darker" versions in the wild have drifted on all three.
Should tints and shades come from the same base? Yes, or the family breaks. One base, two directions.
Why does my dark shade look brown? Lowering lightness on an orange or yellow crosses into brown, which is not a separate hue but a dark, desaturated one.
Can I generate a palette from a photo? Picking from the image works better than describing it, since compression shifts flat areas by a few values.
Pick the operation, then the range. Tints, shades and tones each do one of the three, the colour mixer handles the midpoint between two, and the random generators cover the constrained kinds — any colour, hex, light, dark and pastel — alongside the pastel, neon, muted, warm and cool palettes.