Color Shades & Tints Generator
Design ToolsLighter and darker shades of any color
FreePrivateInstant
Similar tools you may like
History
All history →Color Shades & Tints Generator — at a glance
Turn one brand color into a whole scale of lighter and darker versions.
Base #6366F1
Steps: 4
Run
4 tints
base
4 shades
How to use it — step by step
Pick a base color and how many steps you want on each side.
1
Enter your values
Fill in the boxes. Sensible example values are already filled in for you.
2
Generate Shades
Press the button. The answer is worked out instantly on your device.
3
Read or copy the result
See the big answer and the extra details, then press Copy to keep them.
Pro tips
Small things that make the result better.
✦A tint mixes the color with white; a shade mixes it with black.
✦Use light tints for backgrounds and dark shades for text and hover states.
✦Copy as CSS variables to drop into your stylesheet.
Quick facts
Tintsand shades
1–9steps per side
CSS varsready to copy
Freeno signup
Frequently Asked Questions
What is the difference between a tint and a shade?+
A tint is a color mixed with white (lighter). A shade is a color mixed with black (darker).
Is this the same as a tone?+
A tone mixes the color with grey. This tool creates tints and shades.
Is my data safe?+
Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.
More Free Tools
Guides you might like
All guides →Color ConverterHEX, RGB and HSL: three ways to write the same colour, and which to useColor Contrast CheckerIs your text readable? The contrast ratio, explainedPX to REM Converterpx vs rem: why your font sizes should be allowed to scaleAspect Ratio Calculator16:9, 4:3, 1:1: aspect ratios without cropping surprises