Toolstia / colour shades and tints generator
Colour shades and tints generator
Enter one colour and get a row of lighter tints and darker shades of it. It is a quick way to build button states, backgrounds and a full colour scale.
How it works
- Enter a hex colour or pick one.
- Choose how many steps you want on each side.
- Click a swatch to copy it, or copy them all.
Tints and shades
A tint mixes the colour with white to make it lighter. A shade mixes it with black to make it darker.
Even steps
The steps are spaced evenly between your colour and white, and between your colour and black.
Using the scale
Use the lightest tints for backgrounds, the base colour for buttons and the darkest shades for hover states or text.
Hex input
You can type six-digit codes like #3b82f6 or short codes like #38f, with or without the hash.
Questions
Why not use lightness in HSL?
Mixing with white and black keeps the hue steady and is simple to predict. HSL lightness can look different for each hue.
Is the contrast good enough for text?
Check any text and background pair with the contrast checker.
Is anything uploaded?
Everything happens in your browser, and nothing you type is sent anywhere.