The Oklch to RGB converter takes a color expressed in the perceptual Oklch space and converts it back to a standard sRGB hex code. Oklch is increasingly used in CSS because it produces smoother gradients and more uniform palettes than HSL, but you still need plain RGB or hex for many tools.
Why Oklch exists and when to use it
Traditional color spaces like HSL and RGB have a perceptual uniformity problem: equal numeric steps in hue, saturation, or lightness do not look like equal perceptual steps to the human eye. Rotating a blue hue by 30° produces a noticeably different perceived lightness shift than rotating a yellow hue by 30°. This makes it hard to build accessible color palettes or smooth gradients algorithmically.
Oklch (and its Cartesian sibling Oklab) was designed in 2021 by Björn Ottosson specifically to fix this. In Oklch:
- L (lightness) is perceptually uniform — 0 is black, 1 is white, and 0.5 genuinely looks like mid-gray regardless of chroma or hue.
- C (chroma) is the amount of color, similar to saturation but decoupled from lightness. You can hold C constant and rotate H to get equally vivid colors.
- H (hue) is an angle in degrees from 0 to 360.
This makes Oklch ideal for designing design-system color scales, adjusting tints and shades, and generating accessible color palettes where contrast ratios need to be predictable.
The conversion pipeline
Oklch is simply Oklab written in cylindrical (polar) coordinates. The conversion proceeds in well-defined steps:
- Oklch → Oklab: keep
L, and seta = C · cos(H)andb = C · sin(H)with H in radians. - Oklab → nonlinear LMS: multiply by the inverse Oklab matrix
M2⁻¹. - Cube each LMS component to undo the cube-root used when building Oklab, giving linear LMS.
- Linear LMS → linear sRGB: multiply by the matrix
M1⁻¹. - Gamma-encode each linear channel with the sRGB transfer curve and scale to 0–255.
If any channel ends up outside 0–255, the color is outside the sRGB gamut; the tool clamps it and flags the result.
Practical guidance on parameter ranges
| Parameter | Typical range | Notes |
|---|---|---|
| L (lightness) | 0–1 | 0 = black, 1 = white |
| C (chroma) | 0–0.37 | 0 = grey; max before sRGB clipping ≈ 0.37 |
| H (hue) | 0–360° | 0/360 = red, 120 = green, 240 = blue (approx.) |
Chroma above about 0.37 at any given lightness and hue will likely fall outside
the sRGB gamut and trigger the clamp warning. The actual maximum sRGB-safe chroma
varies by hue — yellows and cyans can go higher than purples and blues.
Understanding the out-of-gamut warning
The sRGB color space is a subset of the full range of colors Oklch can describe. Wide-gamut displays (P3, Rec.2020) can show colors that sRGB cannot. When this tool warns about an out-of-gamut color, it means the Oklch values you entered describe a color a standard sRGB display cannot reproduce faithfully. The hex output is the nearest sRGB approximation — useful for reference, but the actual color will look different on a P3 display.
If you are targeting modern displays and CSS, you can use color(display-p3 ...)
or oklch(...) directly in CSS rather than converting to hex — browsers that
support CSS Color Level 4 will display the wider gamut.
All matrix math runs locally in your browser — nothing is uploaded.