Shades Generator
Generate tints, tones, lighter and darker shades and saturation variations.
About the Shades Generator
Turn one color into a complete scale for interfaces and illustrations: lighter steps, darker steps, tints mixed with white, shades mixed with black, tones mixed with gray and saturation variations.
How to use it
- Enter a base color.
- Choose the number of steps.
- Click any swatch to copy its code.
- Use "Copy as CSS" to get the whole scale as variables.
Examples
- Create a 10-step primary scale for a design system.
- Find a darker hover color for a button.
Frequently asked questions
What is the difference between a tint, a shade and a tone?
A tint is the color mixed with white, a shade is mixed with black and a tone is mixed with gray.
How are "lighter" and "darker" calculated?
They change HSL lightness in equal steps while keeping hue and saturation, which preserves the character of the color better than mixing.
Can I export the scale?
Yes, as CSS custom properties or as a plain list of HEX codes.