Generate shades and tints
Turn one base color into a full scale of lighter tints and darker shades, ready to copy.
Tints lighter
Shades darker
Modern design systems don’t use a single color — they use a scale. From a light tint for backgrounds to a deep shade for text, those steps come from one base hue and give an interface consistency and depth.
Enter a base color and this tool builds ten lighter tints and ten darker shades around it, each with a copyable HEX value, so you can drop a complete scale into your design tokens.
How to use the Shades & Tints Generator
- Pick a base color. Enter the central color you want to build a scale around.
- Review the scale. See ten tints stepping toward white and ten shades stepping toward black.
- Copy the values. Copy any individual step, or the full scale, into your design system.
Practical examples
Why the Shades & Tints Generator matters
- A consistent scale derived from one hue keeps an interface feeling cohesive.
- Tints and shades give you ready-made UI states — hover, active, disabled — without guessing.
- Generating the scale mathematically is faster and more even than nudging colors by hand.
Frequently asked questions
What’s the difference between a tint and a shade?
A tint is a color mixed with white (lighter), while a shade is a color mixed with black (darker). A tone, for completeness, is a color mixed with gray.
How many steps are generated?
The tool produces ten tints and ten shades, giving you a 20-step range around your base color to choose from.
Can I use this for a design system?
Yes. The generated scale is a great starting point for color tokens. You may fine-tune individual steps to hit specific contrast targets.