🪜 Tailwind Color Scale Generator (OKLCH)
Turn one base color into a full 50–950 shade scale with an even, perceptual OKLCH lightness ramp — copy it straight into Tailwind 4 @theme or a JS config.
@theme {
--color-brand-50: oklch(97.1% 0.1155 253.6);
--color-brand-100: oklch(93.6% 0.1222 253.6);
--color-brand-200: oklch(88.5% 0.1320 253.6);
--color-brand-300: oklch(80.8% 0.1468 253.6);
--color-brand-400: oklch(70.4% 0.1667 253.6);
--color-brand-500: oklch(62.0% 0.1828 253.6);
--color-brand-600: oklch(55.0% 0.1694 253.6);
--color-brand-700: oklch(47.0% 0.1541 253.6);
--color-brand-800: oklch(40.0% 0.1406 253.6);
--color-brand-900: oklch(33.0% 0.1272 253.6);
--color-brand-950: oklch(24.0% 0.1100 253.6);
}brand: {
50: '#eff6ff',
100: '#dcecff',
200: '#bfdcff',
300: '#93c4ff',
400: '#51a2ff',
500: '#1b86f0',
600: '#0871d0',
700: '#005aaa',
800: '#004789',
900: '#003569',
950: '#001f42',
}Perceptual OKLCH lightness ramp (even steps that look even), chroma muted at the extremes, gamut-mapped to sRGB HEX. 🔒 Computed in your browser.
How the tailwind color scale generator (oklch) works
The base color is converted to OKLCH, then eleven steps (50–950) are generated by setting each step to a target perceptual lightness while keeping the hue and easing chroma down at the light and dark extremes (so the palest and darkest shades do not look garish). Each step is gamut-mapped back to an sRGB HEX. Because the ramp is even in OKLCH lightness, the steps look evenly spaced — which a naive white/black mix does not achieve.
Unlike a simple tint/shade tool that mixes toward white and black in sRGB, this ramps lightness in OKLCH, so a 500 reads as the same weight across every hue — the reason Tailwind CSS 4 uses OKLCH for its default palette. Exports both a Tailwind 4 @theme block (OKLCH) and a HEX JS config.
Frequently asked questions
How do I make a Tailwind color scale?
Enter your brand color and a name; the tool produces the 50–950 steps by ramping perceptual lightness in OKLCH around your color, and gives you a @theme block and a JS config to paste into Tailwind.
Why OKLCH instead of lightening/darkening in HEX?
OKLCH lightness is perceptually uniform, so equal steps look equal and a "500" is the same visual weight across hues. Mixing toward white/black in sRGB produces uneven, sometimes muddy steps — which is why Tailwind 4 switched to OKLCH.
What are the 50–950 numbers?
They are Tailwind's shade steps, from the lightest (50) to the darkest (950), with 500 as the mid-tone. This tool maps your base color to that ladder so it drops into a Tailwind theme.
Can I export to Tailwind 4?
Yes — copy the @theme block, which defines --color-<name>-<step> custom properties in OKLCH (Tailwind 4's native format). A HEX JS-config object is also provided for older setups.
Are the colors always in gamut?
Yes — any step that would fall outside sRGB is chroma-mapped (keeping lightness and hue) to the nearest displayable HEX, so every swatch renders correctly.