RGB ↔ OKLCH Converter
Convert between sRGB (the format used in CSS and most design tools) and OKLCH — the perceptually uniform polar color space built on the OKLab model. Edit either side and the other updates instantly.
Sponsors
About RGB ↔ OKLCH Conversion
OKLCH is a polar representation of the OKLab color space, designed to be perceptually uniform — meaning equal numeric steps in OKLCH look equally different to the human eye. It is defined in the CSS Color Level 4 specification and is the recommended format for color manipulation in modern CSS (e.g., using color-mix() and CSS custom properties for design systems). OKLCH expresses color as three components: L (lightness, 0–1), C (chroma, ≥ 0), and H (hue angle, 0–360°).
Conversion Pipeline: RGB → OKLCH
Step 1 — Linearize sRGB: remove gamma encoding from each channel.
\[ c_\text{lin} = \begin{cases} c / 12.92 & \text{if } c \le 0.04045 \\ \left(\dfrac{c + 0.055}{1.055}\right)^{2.4} & \text{otherwise} \end{cases} \]
Step 2 — Linear sRGB → XYZ (D65) using the standard 3×3 matrix.
Step 3 — XYZ → LMS using the OKLab M1 matrix, then take the cube root of each LMS component:
\[ \ell' = \sqrt[3]{\ell}, \quad m' = \sqrt[3]{m}, \quad s' = \sqrt[3]{s} \]
Step 4 — LMS′ → OKLab using the M2 matrix, yielding L (lightness), a (green–red axis), b (blue–yellow axis).
Step 5 — OKLab → OKLCH by converting rectangular to polar coordinates:
\[ C = \sqrt{a^2 + b^2}, \qquad H = \operatorname{atan2}(b,\, a) \times \frac{180}{\pi} \]
Conversion Pipeline: OKLCH → RGB
Reverse each step: OKLCH → OKLab (polar to rectangular), OKLab → LMS′ (inverse M2), cube the values to get LMS, LMS → linear sRGB (inverse M1 and XYZ step), then apply gamma encoding.
Gamut and Out-of-Gamut Colors
OKLCH can represent colors that lie outside the sRGB gamut. When you enter an OKLCH value whose chroma is very high for a given hue and lightness, the resulting linear RGB channels may go below 0 or above 1. This converter clamps those values to the nearest sRGB boundary and shows a warning. CSS rendering engines running on wide-gamut displays (P3, Rec. 2020) can display the unclipped versions natively.
Frequently Asked Questions
What is OKLCH and why should I use it?
OKLCH is a perceptually uniform color format introduced by Björn Ottosson (2020) and standardized in CSS Color Level 4. Because equal numeric steps look visually equal, OKLCH makes color manipulation predictable — changing only the L value adjusts lightness without shifting hue or saturation, and interpolating between two OKLCH colors travels through visually natural intermediate colors. It's especially useful for building accessible design system color scales.
Is oklch() supported in all browsers?
Yes — as of 2023, oklch() is supported in all major modern browsers (Chrome, Firefox, Safari, Edge). For older browsers you can provide an RGB or hex fallback using the CSS cascade or @supports.
How does OKLCH differ from HSL?
HSL distributes colors on a simple cylindrical model that is not perceptually uniform — for example, pure yellow (60°) looks far brighter than pure blue (240°) at the same HSL lightness value. OKLCH uses a perceptually calibrated model, so lightness is consistent across all hues. This makes OKLCH significantly better for generating harmonious palettes and accessible color scales.
What is a reasonable chroma range?
Most sRGB colors have a chroma (C) between 0 and 0.37. Grays have C = 0, vivid primary colors reach roughly 0.25–0.35. Wide-gamut display colors (P3, Rec. 2020) can reach C values above 0.4 for certain hues. The chroma slider here is capped at 0.4; enter a value manually if you need to explore beyond that range.