Tailwind v4 OKLCH Palette
Generate a Tailwind v4 compatible 50-950 palette from one brand color, perceptually spaced in OKLCH.
Why Tailwind v4 Moved to OKLCH
Tailwind v3 used HSL for its default color palettes (slate, gray, zinc, red, blue, and so on), with the 50-to-950 numeric scale corresponding to specific HSL lightness values per hue. The problem was that HSL is not perceptually uniform: the same HSL lightness step looks like a bigger change on yellow than on blue. The result was that the canonical Tailwind palettes felt right because they had been hand-corrected, but custom brand palettes generated by Tailwind config plugins always felt slightly off in the middle stops. Tailwind v4 fixed this by moving its color system to OKLCH, where equal numerical lightness steps look equally different to the eye regardless of hue. The new palettes use OKLCH lightness values from 0.98 (the 50 stop) down to 0.20 (the 950 stop), with chroma scaled per stop to maintain perceptual richness. Custom palettes generated to match this OKLCH spacing feel as polished as the built-in palettes, which is the main reason to migrate brand colors from manual HEX values to the v4 OKLCH generator.
How the Generator Picks Each Shade
Paste a brand color in any CSS format. The tool extracts its OKLCH hue and uses that hue as the anchor for the entire 11-stop palette. Lightness values for each stop follow Tailwind v4 canonical spacing: 0.98, 0.95, 0.90, 0.83, 0.72, 0.60, 0.50, 0.42, 0.33, 0.25, 0.18 for stops 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 respectively. Chroma is computed per stop using a curve that peaks around the 500 stop (matching the brand input) and tapers toward the lighter and darker ends, which is the pattern the Tailwind built-in palettes use. The 500 stop is calibrated to match the brand color as closely as possible while staying on the same hue line; if your brand color is significantly more or less saturated than typical Tailwind palettes, the 500 stop preserves the saturation and the surrounding stops adapt accordingly. The output is a drop-in tailwind.config.js block with all 11 stops named per Tailwind convention, plus a CSS custom property block for the same values if you prefer raw CSS variables over Tailwind config.
Migrating From v3 HSL Palettes
Two migration strategies exist. The full migration replaces v3 HSL palette values with v4 OKLCH-generated equivalents, which gives the cleanest result but requires visual review of every component that uses the brand color. The gradual migration generates new OKLCH palettes for new components while leaving existing v3 HSL palettes in place; this is the safer path for large codebases because it limits regression risk. Either way, the tool gives you the OKLCH values to feed into Tailwind v4 config, and the resulting palette will feel cohesive with the built-in v4 palettes (which the tool matches in spacing). For projects still on Tailwind v3 the OKLCH palette can still be useful: paste the values as HEX into the v3 config, accepting that v3 will not interpolate them in OKLCH at runtime but the static values are still better-spaced than v3 HSL output. Tailwind v3 with OKLCH-computed HEX values is a common intermediate state during the upgrade.
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools