Pick a base color, get an 11-shade Tailwind palette (50-950) with perceptually-uniform OKLCH steps. Export as v3 config, v4 @theme, or CSS variables.
/* Tailwind v4 — @theme block in your main CSS */
@theme {
--color-brand-50: #f2f7ff;
--color-brand-100: #e2ebff;
--color-brand-200: #c5d3ff;
--color-brand-300: #a5b2ff;
--color-brand-400: #858dff;
--color-brand-500: #6a6cff;
--color-brand-600: #5854f3;
--color-brand-700: #463bd1;
--color-brand-800: #342ba4;
--color-brand-900: #261f7c;
--color-brand-950: #120e49;
}Pick colors and convert between HEX, RGB, HSL with WCAG contrast checker
Create beautiful CSS gradients with live preview and code export
Convert colors between HEX, RGB, HSL, HSV and CMYK formats
Generate harmonious color palettes from a base color
A solid design system needs more than a single brand color: you need 50 for backgrounds, 500 for accents, 900 for body text on light themes, and 8 evenly-spaced steps in between. Hand-rolling them in HSL is fiddly because HSL lightness is not perceptually uniform — yellow 500 looks much brighter than blue 500 at the same L. This generator does the conversion in OKLCH (the colour space Tailwind v4 itself uses), so every step looks evenly spaced regardless of base hue. Pick a base hex (or use a preset), name your colour, and export as Tailwind v3 config object, Tailwind v4 @theme block, or plain CSS custom properties.
Step | Lightness target (OKLCH L) | Chroma factor 50 | 0.98 | 0.15 100 | 0.95 | 0.30 200 | 0.89 | 0.55 300 | 0.81 | 0.80 400 | 0.72 | 1.00 ← full chroma 500 | 0.62 | 1.00 ← base hue lives here 600 | 0.55 | 1.00 700 | 0.47 | 0.95 800 | 0.39 | 0.80 900 | 0.32 | 0.65 950 | 0.22 | 0.45 Chroma tapers at the extremes so 50 and 950 do not look unnaturally saturated.