Color Shades Generator
Generate tints and shades from any base color.
Turn any base color into a full range of tints (lighter) and shades (darker) — ideal for building a consistent color scale for a design system or UI theme. Click any swatch to copy its HEX value.
Click any shade to copy its HEX value.
Runs entirely in your browser — nothing is uploaded.
How to use the color shades generator
- 1Enter a base HEX color or use the picker.
- 2See the generated tints and shades.
- 3Click a swatch to copy its HEX.
Frequently asked questions
What's the difference between a tint and a shade?
A tint mixes the color with white to make it lighter; a shade mixes it with black to make it darker.
Can I use these for a design system?
Yes — the scale from light to dark is exactly what you need for a color ramp (like 50–900) in a UI theme.