OKLCH in Production

OKLCH is the default authoring color space for modern design systems because its lightness is perceptually uniform: a step of 0.1 in L looks like the same jump no matter the hue. Tailwind CSS v4 ships its entire palette in oklch(), so shipping production color now means thinking in Lightness, Chroma, and Hue, plus knowing the gamut rules.

Design Position

The model

oklch(L C H) with optional / alpha. L is 0 (black) to 1 (white), C is chroma from 0 (gray) upward, H is hue 0 to 360 degrees. Designed by Björn Ottosson in 2020 and standardized in CSS Color 4. The payoff over HSL: predictable lightness, smoother gradients with no muddy midtone, and more reliable contrast math. Source: Steve Kinney OKLCH, https://stevekinney.com/courses/tailwind/oklch-colors, 2026-05-31

Gamut is the production gotcha

OKLCH is unbounded, so you can write oklch(0.7 0.25 30), a vivid red that lives inside Display P3 but outside sRGB. On a P3 device it renders; on an older sRGB monitor the browser snaps it to the nearest in-gamut color, and that snap is lossy (slightly desaturated from what you authored). For brand colors that must look identical everywhere, cap chroma to the sRGB gamut. Pickers like oklch.com and oklch.fyi show the sRGB / P3 / Rec2020 classification and offer one-click gamut snapping. Source: go-tools OKLCH explained, https://go-tools.org/blog/oklch-color-space-explained-tailwind-v4, 2026-05-31

Tailwind v4 builds on it

Tailwind v4's default palette is published as OKLCH variables, for example --color-blue-500: oklch(62.3% 0.214 259.815) in node_modules/tailwindcss/theme.css. Every shade is perceptually matched, so blue and yellow at the same step finally carry equal visual weight. v4 also leans on color-mix(): bg-brand/50 compiles to a single color-mix() call against transparent rather than an opacity dance. Source: richdynamix Tailwind v4 color-mix, https://richdynamix.com/articles/tailwind-v4-color-mix-oklch-design-tokens, 2026-05-31

Define brand tokens in @theme:

@theme { --color-brand: oklch(0.65 0.24 260); }

Generate ramps without muddy midtones

Mix toward white for tints and black for shades inside OKLCH so hue stays stable across the whole ramp:

--color-brand-300: color-mix(in oklch, var(--color-brand), white 40%);
--color-brand-700: color-mix(in oklch, var(--color-brand), black 30%);

A typical ramp uses 12 / 25 / 40 / 70 percent toward white for 100 to 400, and 35 / 55 / 70 / 85 percent toward black for 600 to 900, with the base as 500.

Relative color syntax

Derive a color from another in place: oklch(from var(--color-brand) calc(l + 0.1) c h) lightens the brand by 0.1 while keeping chroma and hue. This is how you build hover and active states from one source token instead of hardcoding siblings.

Browser support and accessibility

oklch() has been Baseline since 2023 (Chrome 111, Safari 15.4, Firefox 113); Tailwind 4.1+ adds fallbacks for older engines. For contrast, larger L differences mean more contrast, so build the neutral ladder by lightness first and aim for a meaningful L gap, but always verify with a real contrast checker because L alone is not sufficient. See Design Tokens for token layering, Deep Black Palette for near-black L values, and Dark Mode Engineering for theme swaps that exploit predictable lightness. The oklch-skill automates hex-to-OKLCH conversion, palette generation, and gamut checks.

---

Timeline

• 2026-07-01 | Design category refresh added this page to the Identity, tokens, and visual grammar family, linked it to Design System Map, and kept it standalone because OKLCH in Production owns a distinct design decision surface in this family. Source: User request, 2026-07-01
• 2026-05-31 | Page created. Captured the L/C/H model, the sRGB vs P3 gamut snap (lossy) and chroma capping, Tailwind v4's OKLCH palette plus color-mix() compilation, OKLCH ramp generation, relative color syntax for state colors, Baseline-since-2023 support, and the lightness-driven contrast caveat. Source: Tailwind v4 source + Steve Kinney + go-tools + richdynamix, 2026-05-31