Tool · OKLCH Color Picker & Converter

OKLCH Color Picker & Converter.

OKLCH is the modern color space - perceptually uniform, predictable, and designed for the web. The L (lightness) and C (chroma) values mean what you'd expect; H (hue) wraps from 0 to 360. Convert anything to it.

OKLCH Color Picker & Converter

Paste HEX/RGB/HSL to convert to OKLCH

Why OKLCH is better than RGB and HSL Build palette with OKLCH and APCA

Lightness

Chroma

Hue

3D

Alpha

Show 3DShow graphsShow P3Show Rec2020

	median	p95
Paint	—	—
Worker max	—	—
Worker sum	—	—
Freeze sum	—	—

Why OKLCH? → Two colors with the same L value look equally bright. Two colors with the same C value look equally vivid. HSL doesn't behave that way - a yellow at HSL 50% lightness looks much brighter than a blue at HSL 50%. OKLCH fixes that, which makes it the right space for design tokens, accessibility tweaks, and palette interpolation.

What is the oklch converter?

OKLCH is a perceptually uniform color space with three channels: lightness (0 to 1), chroma (0 upward) and hue (0 to 360 degrees). The OKLCH converter turns HEX, RGB or HSL into OKLCH and back, writes CSS oklch() syntax, and flags colors outside the sRGB gamut.

Why designers are moving to OKLCH

In HSL, a yellow and a blue with the same lightness value look nothing alike in brightness. In OKLCH they do, which makes building scales, themes and accessible palettes far more predictable. CSS Color Level 4 supports oklch() in every current browser, and Tailwind v4 uses it for its default palette. The converter also shows the P3 version and warns when a chroma value cannot be displayed on sRGB screens.

OKLCH Converter FAQ

How do I convert HEX to OKLCH?

Paste the HEX here to get lightness, chroma and hue with CSS-ready oklch() syntax.

What is the difference between OKLCH and LCH?

Both use lightness, chroma and hue, but OKLCH is based on the Oklab model, which fixes hue shifts in blues that CIELAB-based LCH has. OKLCH is the one to use for UI work.

Do all browsers support oklch()?

Yes, all current versions of Chrome, Edge, Safari and Firefox. Add a HEX fallback for very old browsers.