Hex to OKLCH: Why Tailwind v4 Switched and How to Convert Any Palette

Published August 11, 2026 · Updated August 11, 2026 · 8 min read · by the CSS DNA team

Quick answer: OKLCH is a perceptually uniform color space written as oklch(L C H) — lightness 0–100%, chroma starting at 0, hue 0–360°. Tailwind v4 defines every default color in it because equal steps in lightness look equal, and because OKLCH can address colors outside sRGB on P3 displays. Converting a hex palette is a lossless coordinate change: same color, better axes to work on.

The three numbers

• L — lightness. 0% is black, 100% is white. Unlike HSL's lightness, this one tracks what your eye reports.
• C — chroma. Colorfulness, starting at 0 for gray. It has no fixed maximum; the usable ceiling depends on the lightness and hue you are at.
• H — hue. Degrees, 0–360, same mental model as HSL. About 30° is red, 145° green, 265° blue.

/* the same color, three ways */
#7c5cff
rgb(124 92 255)
oklch(58.6% 0.223 285.4)

Why HSL lies about lightness

Try this in any browser:

hsl(60 100% 50%)    /* yellow */
hsl(240 100% 50%)   /* blue   */

Both claim 50% lightness. The yellow is blinding; the blue is nearly black. HSL's lightness is a midpoint of RGB channel values — a math artifact, not a perceptual measurement. That is why HSL ramps built by stepping L evenly produce scales where some steps jump and others barely move.

OKLCH is derived from OKLab, a perceptual color space designed so that numeric distance corresponds to perceived difference. Two colors at oklch(60% …) read as equally light regardless of hue. This single property is why the whole design-token world moved.

Why Tailwind v4 made the switch

Tailwind CSS v4 ships its entire default palette as oklch() values. Two payoffs:

1. Wider gamut. sRGB hex cannot express the most saturated colors a modern P3 display can show. OKLCH coordinates can, so v4's red-500 is genuinely more vivid on a recent laptop or phone than the v3 hex equivalent — and gamut-maps back gracefully on older screens.
2. Ramps that behave. A 50–950 scale generated by stepping OKLCH lightness produces uniform-feeling steps. The same scale generated in HSL bunches up in the middle and washes out at the ends.

The practical consequence for anyone porting a site to Tailwind v4: your theme block is CSS-first, and the values slot in as custom properties.

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(58.6% 0.223 285.4);
  --color-brand-600: oklch(51.2% 0.216 285.4);
  --font-display: "Space Grotesk", system-ui, sans-serif;
}

Converting hex to OKLCH

The math is a fixed pipeline, not a lookup table:

1. Parse the hex to sRGB channel values, 0–255.
2. Undo gamma to get linear sRGB.
3. Apply the OKLab matrix transform (Björn Ottosson's M1, a cube-root step, then M2).
4. Convert the resulting a/b axes to polar form: chroma is the magnitude, hue is the angle.

It is exactly reversible, so nothing is lost going hex → OKLCH → hex. In practice nobody does this by hand. Reading it off the live page is faster than pasting hex codes into a converter one at a time:

1. Open any site with CSS DNA and click Extract.
2. In the palette panel, switch the format toggle to OKLCH — every extracted color re-renders as oklch(), ready to copy.
3. Click any swatch to generate its full 50–950 tonal scale, built in OKLCH around that color's hue.

Building a ramp that doesn't go neon at the ends

The naive approach — hold hue and chroma, step lightness — fails at the extremes. At L = 0.97 full chroma gives you a fluorescent pastel; at L = 0.22 it gives you a muddy near-black. The fix is to taper chroma toward both ends, keeping it highest around the mid-tones where the eye can actually resolve saturation.

The rule, in words: fix the hue, step lightness from about 0.97 down to 0.22 across eleven stops, and scale chroma by how close each stop sits to the mid-lightness anchor.

A single hue (285°) at eleven lightness stops, with chroma tapered toward both ends. Every step is the same perceptual distance from its neighbor.

This is the same construction Tailwind's own palette uses, and it is what CSS DNA generates when you click a swatch — so a color pulled off any site comes back as a complete, usable scale rather than one isolated value.

The gamut caveat

Because chroma is unbounded, it is easy to write an oklch() value no sRGB display can show. Browsers handle this by gamut-mapping to the nearest displayable color rather than erroring, so nothing breaks — but two colors you wrote as distinct can collapse to the same rendered value on an sRGB screen.

If a distinction matters, check it on a non-P3 display, or pin the critical steps to values you have verified. And remember that contrast requirements are evaluated on the rendered color: a P3-vivid button that gamut-maps darker on an older monitor may pass or fail differently. Worth a pass through a WCAG and APCA check either way.

When hex is still the right answer

OKLCH is the space to work in. Hex remains fine for storage and hand-off — email templates, older build tooling, anything that has to survive a system you do not control. The two are the same color, so keep both: OKLCH in your theme block where you generate and adjust, hex in the places that only need a final value.

Frequently asked questions