Shades & Tints Generator
Generate a full tonal scale from one color.
Three steps
How to use it
-
1
Enter your base color
Any hex, RGB or HSL value, or a CSS color name.
-
2
Read the three ramps
Shades darken, tints lighten, tones desaturate. Each swatch shows its code on hover and copies on click.
-
3
Export the scale
The export gives you CSS custom properties or a Tailwind-style 50–900 scale.
About this tool
Shade, tint and tone are precise terms, not synonyms. A shade is the color mixed with black, a tint is the color mixed with white, and a tone is the color mixed with grey. All three keep the hue and change what surrounds it.
The ramps here interpolate in RGB toward the target rather than stepping HSL lightness. That choice matters: stepping HSL makes dark colors go muddy and light ones go chalky, because HSL lightness is a geometric midpoint rather than anything perceptual. Straight interpolation gives the even ramp designers expect.