How to make tints, shades and tones
Turn one color into lighter, darker and softer versions.
Open the shades generatorSet a base color and a number of steps
Pick the Base color, then use Steps to choose how many variations to make, from 3 to 12.
The shades generator with a base color, a steps slider and three rows: tints, shades and tones Read the three rows
Tints mix your color with white, shades mix it with black and tones mix it with gray. The first swatch in each row is your original color.
Copy or open a row
Click a swatch to copy its code. Open in generator carries a whole row into the generator, and Save adds it to your library.
Tips
- For a UI scale from one brand color, the Tailwind tool gives you eleven named steps instead.