Tint & shade generator
One color in, a full even scale out: a Tailwind-ready 50–950 set and a 20-step tint-to-shade ramp, every step computed in OKLCH.
How this works
- 1 Pick a base color.
- 2 Read the 50 to 950 scale and the 20-step ramp, all computed in OKLCH.
- 3 Copy single steps, or the whole scale as a Tailwind config.
Tailwind-style scale
20-step tint → shade
Guide
Even scales, and why the color space matters
A tint adds white, a shade adds black, and a good scale walks from one to the other in even visual steps. The trap is the color space. Most generators step lightness in HSL, where equal numeric steps are not equal to the eye: the light end bunches up and the dark end drops off a cliff. This tool steps in OKLCH, a perceptually even space, so every stop looks a consistent distance from its neighbor.
The Tailwind-style scale gives you the familiar 50 through 950 stops anchored on your color's hue and chroma, ready to paste into a config as a starting theme. The 20-step ramp is there when you want finer control, a full gradient of the color from near-white to near-black. Tap any swatch to copy its hex, or copy the whole Tailwind object at once.
Because it all runs on the same engine as the rest of the site, every stop is a real, in-gamut color, and each one is named so you know what you are reaching for. Feed it a brand color and you have a complete, accessible-by-construction ramp in seconds.