Tailwind CSS Color Scale Generator
Generate a Tailwind-style 50-950 color scale from any base hex color, interpolated in perceptually-even OKLCH space. Export as a Tailwind config, CSS custom properties, SCSS variables or JSON, in modern oklch() or classic hex.
Input
Pick a color, or type a HEX value directly.
Used as the palette key in the Tailwind, CSS, SCSS and JSON output.
v4 outputs modern oklch() CSS. v3 outputs classic hex values, still interpolated in OKLCH space.
Add the extra-dark 950 stop introduced in Tailwind v3.2+.
Scale the saturation of every stop. 100 keeps the input color's chroma.
Output
Guides
The Tailwind CSS Color Scale Generator turns a single base color into a full 50-950 shade scale, ready to drop into a Tailwind config, a CSS :root block, SCSS variables, or JSON. It runs entirely in your browser — nothing you enter is uploaded.
How the scale is built
Naively interpolating a color's lightness in RGB or HSL produces uneven-looking steps — the dark end crowds together while the light end washes out fast. This tool instead interpolates in OKLCH, a perceptually uniform color space, at 11 fixed lightness anchors modeled after Tailwind's own v4 palette (50 through 950). Each stop also scales the base color's chroma (saturation) so the lightest and darkest shades don't look artificially vivid or muddy, then clamps the result back into the displayable sRGB gamut so no stop ever clips to an invalid color.
- Style: Tailwind v4 (OKLCH) outputs modern
oklch(L% C H)values — the format Tailwind v4's CSS-first config expects, and the most accurate representation of the computed color. - Style: Tailwind v3 (hex, OKLCH-interpolated) outputs classic
#rrggbbhex — the scale is still computed in OKLCH for even steps, just converted to hex for tools, browsers or Tailwind v3 configs that don't supportoklch(). - Chroma (0-150%) scales every stop's saturation together; 100% keeps the base color's original chroma, lower values desaturate the whole scale, higher values push it more vivid (subject to the sRGB gamut clamp).
- Include 950 stop toggles the extra-dark 950 shade introduced in Tailwind v3.2+; turn it off for a classic 10-stop (50-900) scale.
Export formats
- Tailwind Config — a
tailwind.config.jssnippet with the scale nested undertheme.extend.colors. - CSS Custom Properties — a
:root { --color-name-50: …; }block. - SCSS Variables —
$color-name-50: …;lines. - JSON —
{ "name": { "50": "…", … } }, handy for design-token pipelines or feeding into other tools.
The Name field sets the palette key used in every format (--color-primary-500, $color-primary-500, etc.) — it's sanitized to lowercase letters, digits and hyphens.
Why does the hex output look different from the color I picked?
Only the 500 stop is anchored near your input color's chroma; every other stop is a fresh OKLCH color at a fixed lightness with the chroma scaled and gamut-clamped, so it won't be an exact tint/shade of the base color — it's a perceptually-even scale built around it, the same relationship Tailwind's own palettes have to their "brand" colors.
I need semantic tokens (primary, surface, border…), not just a raw scale
See the CSS Design Token Generator, which maps a scale like this one onto semantic roles with a light/dark mode variant.