About the Tints And Shades Generator
A tint is a colour mixed with white, a shade is the same colour mixed with black, and a tone is it mixed with grey. Give this page a starting colour and it walks each of those mixes outward in equal percentage steps, printing a swatch and a HEX code at every stop. Ten steps is the default, which lands on the familiar 10 to 100 percent ladder that design systems use for their 50 through 900 ramps.
The mixing happens channel by channel in sRGB, which is the same arithmetic a paint mix or a CSS color-mix in sRGB performs. That keeps the numbers predictable and easy to explain to a colleague, but it does mean the perceived jump between adjacent steps is not perfectly even; the middle of a blue ramp will read as a bigger leap than the ends. Very dark starting colours also produce a short shade ramp, since there is little room left before black.
Turn on tones when you need muted variants for disabled states, borders or chart fills that must sit behind the primary colour without competing. For a scale built in HSL by moving lightness rather than by mixing, use the Color Shades Generator, and for a single nudge in one direction try Lighten and Darken Color.
How to use
- Enter one starting colour in any format.
- Set how many steps each ramp should have.
- Tick Include tones for the grey mixes as well.
- Copy the HEX list for your design tokens.
Common questions
- What is the difference between a tint, a shade and a tone?
- A tint adds white, a shade adds black, and a tone adds grey, which lowers the intensity without changing the direction of the colour.
- How many steps should I use?
- Ten matches the 50 to 900 scales in most design systems; five is enough for a small component library.
- Why is the last swatch pure white or black?
- The final step is a 100 percent mix, so the original colour is fully replaced by white or by black.
- Can I paste more than one colour?
- Only the first line is used, because each colour produces a full set of ramps.