Why Tailwind CSS Uses OKLCH
Tailwind v4 ships its default palette in OKLCH and defines colors as @theme tokens. Here's why, and how to add your own.
Updated Jul 1, 2026 · By OKLCH.xyz editorial team
Tailwind CSS v4 token syntax
Tailwind CSS v4 moved its default color palette to OKLCH and its configuration to a
CSS-first @theme block. Both choices lean on OKLCH’s strengths.
Even, vivid scales
Tailwind’s palettes need eleven steps (50–950) that read as an even ramp and can reach richer colors on P3 displays. OKLCH’s perceptual lightness and wide-gamut reach make those scales cleaner than the old HSL/HEX definitions.
Colors as design tokens
In v4 you define colors as custom properties inside @theme:
@import "tailwindcss";
@theme {
--color-brand-50: oklch(0.977 0.014 259);
--color-brand-500: oklch(0.62 0.21 259);
--color-brand-950: oklch(0.28 0.09 259);
}Every token automatically becomes utilities like bg-brand-500 and text-brand-50.
Generate your own
The Tailwind OKLCH generator turns one brand color into a
full, paste-ready @theme block.