Tailwind Color Shade Generator
Generate complete 50 to 950 color shade scales in Tailwind CSS format.
🔒 Client · OfflinePresets:
The step that keeps your color
Generated 50–950 Shade Scale (Click any swatch to copy hex)
About shade scales
This tool builds a full 50 to 950 scale from one color. Tailwind CSS uses these steps, so the result drops into a theme with no change.
A scale keeps the character of the color at every step. A hand-picked set of shades often drifts in hue, which makes an interface look inconsistent.
The generator works in OKLCH, so each step moves in equal perceptual steps. Select the base shade to hold your color at another step, such as 700 for a dark brand color.
Use a light step for a background, a middle step for a border, and a dark step for text. Each swatch shows if white text or black text passes WCAG AA on it.