Tints & Shades
The Tints and Shades Generator creates lighter tints (mixed with white) and darker shades (mixed with black) of any base color in 5, 10 or 20 steps, with CSS variable output.
About this tool
The Tints and Shades Generator creates lighter tints (mixed with white) and darker shades (mixed with black) of any base color in 5, 10 or 20 steps, with CSS variable output.
How to use it
- Pick a base color.
- Choose 5, 10 or 20 steps.
- Click any swatch to copy its hex value.
- Click Copy as CSS Variables to export the whole scale.
Good to know
- A tint is a color mixed with white; a shade is a color mixed with black.
- The generator mixes in equal RGB steps, so every step changes the color by the same amount.
- Design systems such as Tailwind use a 50–900 scale built from tints and shades of each brand color.
- Check contrast on text colors taken from a scale, because middle steps often fail WCAG AA on white.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
What is the difference between a tint and a shade?
A tint lightens a color by adding white; a shade darkens it by adding black. A tone adds gray.
How many shades should a design system color have?
Around 10 steps is common, for example 50, 100 … 900 in Tailwind. It gives enough range for backgrounds, borders, text and hover states.
How do I use the scale in CSS?
Copy the scale as custom properties and reference them with var(--color-name), for example on backgrounds, borders or hover states.
Why do some tints look washed out?
Mixing with white lowers saturation as well as increasing lightness. For more vivid light variants, adjust saturation separately in HSL.