Color Shades Generator
Enter a base hex color and instantly get a full tints-and-shades scale. Click any swatch to copy its hex, or copy all as CSS variables.
Click any swatch to copy its hex value.
Pure browser JavaScript — computes color shades locally.
How to use this tool
- Pick a base color or type a hex value.
- Choose how many steps the scale should have.
- Click a swatch to copy its hex, or copy the whole scale as CSS variables.
Enter a base hex color and instantly get a full tints-and-shades scale. Click any swatch to copy its hex, or copy all as CSS variables.
Frequently asked questions
- How are the shades computed?
- Lighter steps blend the base toward white (tints); darker steps scale the channels toward black (shades), producing an even perceptual ramp.