OKLCH explained: the color format that finally matches your eyes
OKLCH describes a color by how light it looks, how colorful it is and which hue it has. Unlike HSL, the same lightness value really looks equally light for every hue, which makes palettes, hover states and accessible contrast predictable.
What OKLCH is
OKLCH is the polar form of Oklab, a perceptual color space published by Björn Ottosson in 2020. It has three numbers. L is perceived lightness from 0 (black) to 1 or 100% (white). C is chroma, the amount of color, from 0 (gray) to about 0.37 for the most vivid colors screens can show. H is the hue angle from 0 to 360 degrees.
The same color written in different formats looks like this. Every value below is calculated live by PickShade, so you can copy them as they are.
| Format | Value |
|---|---|
| HEX | |
| RGB | |
| HSL | |
| OKLCH | |
| OKLab |
Why OKLCH is better than HSL
HSL lightness is a formula, not a perception. hsl(60 100% 50%) is a bright yellow and hsl(240 100% 50%) is a dark blue, yet both claim 50% lightness. Build a palette on HSL and every hue needs manual correction.
In OKLCH, colors with the same L look equally light. You can keep L and C and rotate H to get a set of hues that feel balanced, or keep H and C and step L to get a clean shade scale. That is why Tailwind CSS v4 defines its whole default palette in OKLCH.
Lightness also predicts contrast. Text with an L difference of roughly 0.4 or more from its background is usually readable, which makes accessible color choices much easier to reason about.
Syntax in CSS
Lightness can be written as a percentage or a number from 0 to 1. Chroma is a number. Hue is an angle in degrees. Transparency goes after a slash.
CSS
color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);Browser support
oklch() works in every current browser: Safari since 15.4, Chrome and Edge since 111, Firefox since 113. That covers well over 90% of users. For very old browsers, put a HEX fallback on the line before the OKLCH value.
CSS
color: #ff5733;
color: oklch(68% 0.21 33.7);Chroma limits and gamut
OKLCH can describe colors no screen can show. The maximum chroma depends on lightness and hue: a vivid yellow is possible only near high lightness, a vivid blue only near low lightness. When a value is outside the sRGB or Display P3 gamut, the browser maps it back, which can shift the color.
PickShade marks colors outside sRGB and gives you the nearest color that fits, found by lowering chroma while keeping lightness and hue, the same method CSS Color 4 recommends.
How to convert HEX to OKLCH
The conversion goes HEX to sRGB, sRGB to linear light, linear sRGB to the LMS cone space, a cube root, a matrix to Oklab and finally Oklab to polar coordinates. Doing it by hand is error-prone, so paste any color into the converter and copy the result.
Questions and answers
Is OKLCH supported in all browsers?
Yes, in every current browser: Safari 15.4 and newer, Chrome and Edge 111 and newer, Firefox 113 and newer. Add a HEX line before it if you must support older browsers.
What is the difference between OKLCH and LCH?
Both describe lightness, chroma and hue. CSS lch() is based on CIELAB, whose blues drift toward purple when you change lightness. OKLCH is based on Oklab, which keeps hue stable, so shade scales of blue stay blue.
Why does my OKLCH color look different from what I typed?
The chroma is probably higher than your screen can show for that lightness and hue. The browser maps it into the display gamut. Lower the chroma until PickShade no longer marks it as out of gamut.
Can I use OKLCH with Tailwind CSS?
Yes. Tailwind CSS v4 already uses OKLCH for its default palette, and custom colors in @theme can be written in OKLCH directly.