Shades & tints generator
One color in. A full tonal scale out. Perceptually interpolated, so the strip stays the same hue end to end.
Tonal scale
Tints (lighter)
Shades (darker)
Tints, shades, and tones
- Tint — base color + white. Lighter, often slightly less saturated. Useful for hover backgrounds, disabled states, and "subtle" tier surfaces.
- Shade — base color + black. Darker, often slightly more saturated visually. Useful for hover states on light backgrounds, pressed buttons, and high-emphasis text.
- Tone — base color + gray. Same lightness, less saturation. Not generated here; mostly useful for "muted" UI states.
The interpolation runs in OKLab color space rather than RGB, so the hue stays perceptually constant across the strip — a blue stays recognizably blue all the way through its tints, instead of drifting through pinkish midtones the way RGB-interpolated scales do.