Shades & Tints Generator
Build a full colour scale from one brand colour, ready for Tailwind or CSS variables.
- Your data never leaves your device
- 100% free
- No sign-up
- Works offline after first load
How to make shades and tints
- Pick or paste your colour.
- Choose the number of steps and mixing method.
- Copy any swatch, or export the scale as code or an image.
About Shades & Tints
Make a full 50–950 colour scale from one colour, plus tints, shades and tones in any number of steps.
Everything works in your browser, so it is instant and private. Your recent colours and settings are remembered on this device, and the address bar keeps your colour so you can share or bookmark it.
Good for
- Design systems and Tailwind themes
- Hover and active states for buttons
- Backgrounds and borders that match a brand colour
Tip: Use the 50–100 steps for backgrounds and 700–900 for text on light backgrounds.
Frequently asked questions
What is the difference between tints, shades and tones?
A tint is the colour mixed with white, a shade is mixed with black, and a tone is mixed with grey.
How is the 50–950 scale made?
Lightness steps are set in OKLCH, a perceptual colour space, so the jumps look even; the chroma tapers towards very light and very dark steps to stay in gamut. Your colour is kept at its nearest step.
Can I use it with Tailwind CSS?
Yes — copy the config for Tailwind v3 or the @theme block for Tailwind v4, and use classes like bg-primary-500.
Which shade should I use for text?
Usually 700–900 on a light background and 50–200 on a dark one. Check the pair with the contrast checker before you use it.
Why is the scale made in OKLCH?
OKLCH changes lightness evenly, so each step looks equally different from the next, and colours don't turn grey or shift hue as they get darker.