Oklch is the cylindrical form of the Oklab color space. It expresses a color as lightness, chroma (colorfulness), and hue angle, but on top of Oklab, which is engineered to be highly perceptually uniform and to keep hue stable when lightness changes.

How is it computed from RGB?

sRGB is gamma-expanded to linear RGB, transformed to the LMS cone space with Oklab's first matrix, each LMS value is cube-rooted, then the second matrix produces Oklab L, a, b. Chroma and hue are the polar form of a and b.

Why use Oklch instead of LCH?

Oklch fixes hue-shift problems that affect CIELAB-based LCH, especially for blues, and keeps perceived lightness more consistent. It is the recommended perceptual space in modern CSS Color 4 and design tools.

What are the value ranges?

Lightness runs from 0 (black) to 1 (white). Chroma starts at 0 (gray) and is open-ended but is usually below about 0.4 for sRGB colors. Hue is an angle from 0 to 360 degrees.

Is anything uploaded?

No. The full RGB to Oklab to Oklch pipeline runs locally in your browser using exact matrices. Nothing about your colors leaves your device.

RGB to Oklch Color Converter

Convert a screen sRGB color into Oklch — the cylindrical form of the modern Oklab color space, expressed as Lightness, Chroma, and Hue. Oklch is the perceptual model recommended by CSS Color 4 because it keeps hue and lightness behaving predictably, especially across blues.

How it works

Oklab is defined by Bjorn Ottosson with two fixed matrices and a cube-root nonlinearity. RGB is converted to Oklab, then to Oklch:

Gamma-expand sRGB to linear RGB (the standard sRGB transfer function).
Linear RGB to LMS cone responses with the first Oklab matrix, then take the cube root of each LMS value.
LMS’ to Oklab with the second matrix, giving L, a, b.
Oklab to Oklch:

L = L
C = sqrt(a^2 + b^2)
H = atan2(b, a) in degrees, normalised to 0-360

Example

Convert rgb(59, 130, 246):

Oklab ≈ L 0.62, a −0.04, b −0.18
C = √(0.04² + 0.18²) ≈ 0.19
H ≈ 258° (blue)
Result: oklch(0.62 0.19 258)

Notes

Lightness is on a 0–1 scale (CSS also accepts a percentage). Grays have chroma ≈ 0 and an undefined hue, reported as 0. The conversion uses Ottosson’s exact matrices and runs entirely in your browser — nothing is uploaded.