Take two colors that HSL swears are equally bright: hsl(60 100% 50%) and hsl(240 100% 50%). Same 50% lightness. Yet the first is a blinding yellow and the second is a dark, heavy blue. HSL lied. That gap is exactly the problem OKLCH was built to solve.

OKLCH is a newer way to write colors in CSS β€” oklch(L C H) β€” and it's now supported in every major browser. This guide explains what its three numbers mean, why it beats HSL and HEX for building real palettes, and how to start using it without breaking older browsers.

The three numbers: L, C, H

An OKLCH color looks like this: oklch(70% 0.15 250).

  • L β€” Lightness (0% to 100%). How light the color looks to a human eye. 0% is black, 100% is white.
  • C β€” Chroma (0 to about 0.37). How vivid or saturated it is. 0 is grey; higher is more colorful.
  • H β€” Hue (0 to 360). The angle on the color wheel β€” roughly 30 red, 140 green, 250 blue.

You can add transparency the same way as other CSS colors: oklch(70% 0.15 250 / 0.5) for 50% opacity.

Why OKLCH beats HSL

HSL and OKLCH both use a lightness-chroma-hue idea, so why switch? Because HSL's "lightness" is a math trick, not what your eyes see. OKLCH's is built on a model of human vision, so its numbers match perception.

The practical payoff shows up the moment you build a palette:

  • Consistent lightness across hues. In OKLCH, every color at L 70% looks equally light, whether it's yellow, blue, or pink. In HSL, 50% yellow glows while 50% blue sinks. That's why HSL palettes always need manual tweaking.
  • Predictable shades. Want a button and its hover state to differ by a fixed, even step? Drop the lightness by the same amount in OKLCH and the change looks uniform. Do it in HSL and some colors barely move while others jump.
  • Rotating hues keeps the same feel. Change only the hue in OKLCH and you get a sibling color at the same brightness and vividness β€” ideal for theme accents.

For anyone generating a design system's color ramp, that consistency is the whole game.

It can show colors HEX can't

HEX and RGB are locked to the sRGB gamut β€” the limited set of colors an old monitor could show. Modern phone and laptop screens display a wider range (called P3), with noticeably richer greens, reds, and cyans.

OKLCH can address those wider colors directly; #rrggbb simply can't describe them. So OKLCH isn't only more logical β€” it can reach more of what your screen is actually capable of showing.

Is it safe to use now?

Yes. oklch() works in current versions of Chrome, Edge, Safari, and Firefox, and has for a couple of years. For the small slice of visitors on old browsers, give a plain fallback first:

.button {
  background: #3b82f6;                 /* older browsers use this */
  background: oklch(62% 0.19 255);     /* modern browsers use this */
}

The browser reads top to bottom and keeps the last color it understands. Old browsers stop at the HEX; new ones apply the OKLCH.

How to convert your existing colors

You don't have to hand-calculate any of this. Paste a HEX, RGB, or HSL value into the free Color Converter and it gives you the OKLCH equivalent instantly β€” plus the reverse, so you can go from an oklch() value back to a HEX fallback for that CSS trick above. It runs entirely in your browser, nothing uploaded.

If you only need one direction, there's a focused HEX to OKLCH converter too.

Quick takeaways

  • OKLCH = oklch(Lightness Chroma Hue) β€” lightness you can trust, vividness, and a hue angle.
  • It fixes HSL's biggest flaw: equal lightness numbers actually look equally light, so palettes stay consistent without manual fiddling.
  • It reaches wider (P3) colors that HEX and RGB can't describe.
  • Ship it today with a HEX fallback line before the oklch() line.
  • Convert any color to and from OKLCH with a color converter instead of doing the math yourself.