Free Tailwind Shade Generator
Turn any color into a full Tailwind CSS palette — 50 to 950 — built with perceptually uniform OKLCH so every step looks evenly spaced. Click any shade to copy, then export production-ready code.
1 · Pick your base color
2 · Your palette — click any shade to copy
3 · Export code
How it works
Your base color becomes the 500 shade. The remaining ten steps are generated in the OKLCH color space — the same perceptually uniform model behind modern CSS oklch() — by sweeping lightness from near-white (50) to near-black (950) while preserving your hue and tapering chroma so every step stays in the sRGB gamut.
Because lightness moves in equal perceptual steps, the scale looks smooth and natural — no muddy mid-tones, no neon jumps. Use the exported @theme block with Tailwind CSS v4, or the config snippet with v3, and reference shades like bg-brand-500.