OKLCH is a way to write colors in CSS by lightness, chroma and hue, built so that equal changes in the numbers look like equal changes to the eye. Every major browser has supported it since May 2023, and it makes color ramps, contrast and dark mode far more predictable than HEX or HSL.
How OKLCH Is Written
A color is three values and an optional alpha: oklch(L C H / A). For example, oklch(0.7 0.12 250) is a mid-light blue.
| Value | What it controls |
|---|---|
| L, lightness | Perceived brightness, from 0 (black) to 1 (white), or 0% to 100% |
| C, chroma | How much color, from 0 (gray) to around 0.4 for the most vivid colors screens can show |
| H, hue | The color itself, as an angle from 0 to 360 degrees. The angles don't match HSL's |
| A, alpha | Opacity from 0 to 1, optional |
It comes from Oklab, a color space Björn Ottosson published in December 2020 to predict how people actually see lightness and hue. OKLCH is the same space described by lightness, chroma and hue, and it's part of the CSS Color Level 4 specification.
HSL Lightness Isn't What the Eye Sees
HSL's lightness is arithmetic, not perception. Pure yellow and pure blue are both 50% lightness in HSL, yet yellow looks almost white and blue looks dark. Converted to OKLCH, that yellow has a lightness of 0.97 and the blue 0.45. Red is 0.63 and green 0.87, all at the same "50%".
That's why an HSL palette built by keeping lightness fixed and rotating the hue comes out uneven: some colors glare and others sink. Keep OKLCH lightness fixed and rotate the hue, and the colors hold the same visual weight.
What OKLCH Makes Easier
- Color Ramps. A brand color's lighter and darker shades can be built by stepping lightness alone, and each step looks evenly spaced. Tailwind CSS version 4 rebuilt its default palette in OKLCH for this reason.
- Hover and Active States. Relative color syntax derives a variant from a base color:
oklch(from var(--brand) calc(l - 0.08) c h)is the same color, slightly darker, whatever the brand color is. - Smoother Blends.
color-mix(in oklch, var(--a), var(--b))mixes two colors without the muddy gray middle that mixing in sRGB can produce. - Dark Mode. Because lightness is perceptual, flipping a palette for dark backgrounds is a matter of adjusting L, with hue and chroma left alone.
- Wider Color. OKLCH can describe colors beyond the standard sRGB range that modern displays can show. Browsers map anything a screen can't display to the nearest color it can.
OKLCH Doesn't Replace Contrast Checks
Lightness in OKLCH tracks perceived brightness closely, which makes it far easier to land on readable combinations. It isn't a contrast ratio, though. Text and background pairs still need checking against WCAG contrast requirements before they ship.
Browser Support
OKLCH works in Chrome and Edge from version 111, Firefox from 113 and Safari from 15.4, according to Can I Use, and MDN lists it as widely available since May 2023. For the small share of older browsers, declare a HEX fallback first and the OKLCH value after it. Browsers that don't understand the second line keep the first.
.button {
background: #1f6feb;
background: oklch(0.58 0.18 258);
}Moving a Design System to OKLCH
Convert the existing color tokens to OKLCH, keep HEX fallbacks where older browsers matter, then rebuild the ramps by stepping lightness. Expect to adjust chroma at the light and dark ends, where very vivid values fall outside what screens can show. Then check every text and background pair for contrast. This is part of the design-system work we do on UI and UX design and custom website design.
Frequently Asked Questions
Is OKLCH Supported in All Browsers?
In every current major browser: Chrome and Edge from version 111, Firefox from 113 and Safari from 15.4. A HEX fallback covers the small share of older browsers.
Is OKLCH Better Than HEX?
For building and adjusting palettes, yes, because its numbers match what people see. HEX still works and makes a good fallback, but it doesn't tell you how light a color looks or let you adjust it predictably.
Does Tailwind Use OKLCH?
Yes. Tailwind CSS version 4 defines its default color palette in OKLCH.
Does OKLCH Guarantee Accessible Contrast?
No. It makes readable combinations easier to find, but text and background pairs still need checking against WCAG contrast requirements.