OKLCH Color Converter

Convert colors between HEX/RGB and the modern OKLCH and OKLAB perceptual color spaces. OKLCH is the future of CSS color.

Input HEX: #3b82f6Lightness (L): 0.623Chroma (C): 0.1880Hue Angle (H): 259.81°

Presets & Samples

Input Color

rgb(59, 130, 246)

OKLCH

Lightness (L)

0.623

0 = black, 1 = white

Chroma (C)

0.1880

0 = grey, higher = vivid

Hue (H)

259.81°

0–360° color wheel

oklch(0.623 0.1880 259.81)

OKLab

Lightness (L)

0.623

Green-Red (a)

-0.0332

Blue-Yellow (b)

-0.1851

oklab(0.623 -0.0332 -0.1851)

CSS Snippets

color: oklch(0.623 0.1880 259.81);

color: oklab(0.623 -0.0332 -0.1851);

background-color: oklch(0.623 0.1880 259.81);

About OKLCH and OKLab

OKLCH and OKLab are perceptually uniform color spaces — meaning equal numerical differences correspond to equal perceived color differences. This makes them ideal for generating accessible color palettes, creating smooth color transitions, and ensuring consistent contrast ratios. OKLCH (Lightness, Chroma, Hue) is especially useful for designers because the parameters are intuitive: L controls brightness, C controls saturation, and H controls the hue angle. Both are natively supported in modern CSS via oklch() and oklab()functions (Chrome 111+, Firefox 113+, Safari 15.4+).

Built and maintained by Meet Shah · Last updated 1 August 2026

What this tool is used for

Moving a colour between hex, RGB, OKLCH and OKLAB in one place.
Building a palette where equal steps look equal to the eye.
Producing modern CSS colour values from a legacy palette.
Moving between OKLCH and OKLAB, which are polar and Cartesian views of one space.
Comparing OKLCH against OKLAB coordinates for the same colour.

Frequently Asked Questions

What problem does OKLCH solve?: Perceptual uniformity that CIELAB got slightly wrong. LAB shifts hue visibly as lightness changes in the blue and purple range, so a ramp built by holding hue constant drifts. Oklab was fitted to fix exactly that, and OKLCH is its polar form.
Why is it better for building a colour ramp?: Because holding L constant genuinely produces colours that look equally light. In HSL the same operation does not — hsl(60, 100%, 50%) and hsl(240, 100%, 50%) are yellow and blue and look nothing alike in brightness, which is why HSL ramps need hand-correction.
What is the chroma range in practice?: Roughly 0 to 0.4 in CSS notation, though the displayable maximum depends on hue and lightness — yellows reach much higher chroma than blues. There is no single ceiling, which is why the value is a decimal rather than a percentage of something.
Can OKLCH describe colours outside sRGB?: Yes, which is one of its points — it can express the wider P3 gamut that modern displays support. CSS lets you specify them and the browser gamut-maps for a display that cannot show them, so the same declaration serves both.
Should I use it in production?: Support is now across all current browsers, and Tailwind v4 moved its default palette to OKLCH. The pragmatic pattern is an `@supports` guard with a hex fallback, which costs one extra declaration and removes any risk on an older client.

Common errors and gotchas

Assuming every OKLCH value is displayable, since the space is larger than sRGB.
Reading OKLCH lightness as HSL's, which is a different definition entirely.
Confusing OKLCH with CIE LCH, which share a structure and not a white point handling.
Shipping only the fallback and losing wider-gamut rendering where it is supported.
Assuming OKLAB's a and b axes are directly comparable to OKLCH's chroma and hue.