What is OKLCH? The Modern CSS Color Space

What is OKLCH?

OKLCH is a perceptually uniform color space that describes colors using three values: Lightness (L), Chroma (C), and Hue (H). Unlike RGB and HSL, OKLCH is designed to match human color perception — equal changes in its numerical values produce equal changes in perceived color. This makes it ideal for creating accessible, consistent color systems in CSS.

OKLCH is the cylindrical form of the Oklab color space, standardized in CSS Color Module Level 4. It is supported by all modern browsers and is the default color space for Tailwind CSS v4's entire palette.

What does OKLCH stand for?

OKLCH stands for Oklab Lightness, Chroma, Hue. The "OK" comes from Oklab, the color space created by Björn Ottosson in 2020. Oklab itself is named after the LMS cone response model it uses (L, M, S), with "Ok" indicating that it is a perceptually uniform improvement over earlier models.

How does OKLCH work?

OKLCH works by transforming colors through a perceptually uniform color space. The L (Lightness) axis runs from black to white and is designed so that equal numerical steps look equally bright. The C (Chroma) axis measures color intensity as distance from the gray center. The H (Hue) axis is a circle of color angles. Together they form a cylinder: L is the vertical axis, C is the radius, and H is the angle around the center.

The key property is perceptual uniformity: a color at 50% lightness looks equally bright whether it is red, blue, or yellow. This is not true of HSL, where 50% lightness yellow looks almost white and 50% lightness blue looks very dark.

OKLCH Color Space Diagram

The OKLCH color space can be visualized as a cylinder. Lightness (L) runs vertically from black (0%) at the bottom to white (100%) at the top. Chroma (C) is the radial distance from the center axis — the center is neutral gray, and the outer edge is the most vivid color possible at that lightness. Hue (H) is the angle around the cylinder.

OKLCH in CSS

OKLCH is used in CSS via the oklch() function. The syntax is oklch(L C H) where L is lightness (0% to 100%), C is chroma (0 to 0.4), and H is hue (0 to 360). An optional alpha value can be added after a slash: oklch(0.7 0.15 250 / 50%).

color: oklch(62.3% 0.188 259.8);
color: oklch(0.623 0.188 259.8); /* same, decimal form */

color: oklch(62.3% 0.188 259.8 / 0.5); /* 50% opaque */

.button {
  color: #3b82f6; /* fallback for older browsers */
  color: oklch(62.3% 0.188 259.8); /* modern browsers */
}

@supports not (color: oklch(0% 0 0)) {
  .button { color: #3b82f6; }
}

/* Lighten a color by 10% lightness */
color: oklch(from var(--brand) calc(l + 0.1) c h);

/* Shift hue by 30 degrees */
color: oklch(from var(--brand) l c calc(h + 30));

Why Designers Moved from RGB and HSL

HSL's lightness is not perceptually uniform. Pure yellow (hsl(60, 100%, 50%)) and pure blue (hsl(240, 100%, 50%)) both claim 50% lightness, but the human eye perceives yellow as overwhelmingly bright and blue as very dark. OKLCH fixes this: at 70% lightness, yellow and blue look equally bright.

• Predictable palettes: Equal lightness steps look equally spaced, making 50-950 scales trivial to generate.
• Accessibility: Contrast ratios are more predictable because lightness is perceptually uniform.
• Wide gamut: OKLCH can describe Display-P3 colors that HSL cannot reach.
• Smooth gradients: Interpolating in OKLCH avoids the muddy midtones that RGB interpolation produces.

Can I use OKLCH?

Yes. oklch() is a Baseline feature, meaning it is widely available across all modern browsers. According to MDN, it has been available across browsers since May 2023. Chrome, Edge, Safari, and Firefox all support it natively.

For older browsers that do not support OKLCH, use the progressive enhancement pattern: declare a HEX or RGB fallback first, then override with OKLCH. Browsers that do not understand OKLCH will simply ignore the second declaration and use the fallback.

Verified source: MDN — oklch() browser compatibility

When did Tailwind CSS start using OKLCH?

Tailwind CSS v4.0, released on January 22, 2025, moved its entire default color palette from RGB to OKLCH. The v4.0 release notes state: "We've upgraded the entire default color palette from rgb to oklch, taking advantage of the wider gamut to make the colors more vivid in places where we were previously limited by the sRGB color space."

This means every color in Tailwind's default palette — from red-500 to blue-600 — is now defined in OKLCH. Custom colors defined in the @theme block also use OKLCH by default.

Verified source: Tailwind CSS v4.0 release blog post

Read the full Tailwind CSS v4 guide — @theme, migration and opacity modifiers →

OKLCH vs HSL vs RGB

The table below compares the three color models across the properties that matter for design systems.

Read the full comparison guide →

Try it: OKLCH Converters

The best way to understand OKLCH is to use it. Convert any color to OKLCH and see how the perceptual values work: