About the Color Shades Generator
A single brand colour needs a family of lighter and darker variants for hover states, backgrounds, borders and text, which is exactly what a design-system colour scale is. This tool generates that scale from a base colour: shades (progressively darker), tints (progressively lighter toward white), or tones (progressively muted toward grey). Each step shows a swatch and its HEX code.
It works by adjusting lightness (and, for tones, saturation) in HSL space, which keeps the hue consistent across the scale. Choose the number of steps to match your token scale, for example ten for a 50 to 900 ramp. To find harmonious colours rather than variants of one, use the Palette Generator.
Watch for the fact that even steps in lightness are not even steps to the eye. HSL lightness is linear in arithmetic but not in perception, so the pale end of a ten-step ramp tends to look crowded while the dark end looks stretched out. If a step is going to carry text on top of another step, verify that specific pair with the Contrast Checker rather than assuming a 700 clears 4.5:1 against a 50.
Tones are the least reached-for of the three options and often the most useful. Muting toward grey keeps a hue recognisable while pushing it back visually, which is exactly what disabled controls and secondary text need, and it avoids the washed-out look you get from tinting alone. When you only need one variant instead of a whole ramp, Lighten and Darken is quicker.
How to use
- Enter a base colour.
- Choose tints, shades or tones and the number of steps.
- Copy the HEX codes for your design tokens.
Common questions
- What is the difference between tints, shades and tones?
- Tints mix toward white (lighter), shades toward black (darker), and tones toward grey (muted).
- Does the hue stay the same?
- Yes, the scale adjusts lightness and, for tones, saturation, keeping the hue consistent.
- How many steps should I generate?
- Ten is common for a 50 to 900 design-token ramp; adjust to your system.