Convert RGB to OKLCH
Converting Red, Green, Blue (RGB) to Lightness, Chroma, Hue (perceptual) (OKLCH) is a precise, rule-based operation — both formats describe the same color with different numbers. Whether you are tuning a CSS custom property, matching a brand color across design tools, or preparing values for print, this page gives you an interactive converter, the exact RGB → OKLCH method, a worked example, a quick-reference table and the details that matter (rounding, gamut and print caveats).
From
To
—
—
—
Live preview
How to convert RGB to OKLCH
Take this real example — the color firebrick(#c2410c):
rgb(194, 65, 12) → oklch(0.553 0.174 38.4)
- Convert each channel from gamma-encoded sRGB to linear light (piecewise: /12.92 below 0.04045, else ((v+0.055)/1.055)^2.4).
- Multiply the linear RGB vector by the CSS Color 4 matrix to get XYZ (D65), then by the XYZ→LMS matrix and take the cube root of each component.
- Combine with the OKLab matrix to get L, a, b; then C = √(a² + b²) and H = atan2(b, a) in degrees.
sRGB → linear → XYZ (D65) → LMS → cbrt → OKLab → LCH (CSS Color 4)
RGB to OKLCH conversion table
| Color | RGB | OKLCH |
|---|---|---|
| White | rgb(255, 255, 255) | oklch(1 0 90) |
| Black | rgb(0, 0, 0) | oklch(0 0 0) |
| Red | rgb(255, 0, 0) | oklch(0.628 0.258 29.23) |
| Lime | rgb(0, 255, 0) | oklch(0.866 0.295 142.5) |
| Blue | rgb(0, 0, 255) | oklch(0.452 0.313 264.05) |
| VersatilBox accent | rgb(194, 65, 12) | oklch(0.553 0.174 38.4) |
| Tailwind blue-500 | rgb(59, 130, 246) | oklch(0.623 0.188 259.81) |
| Tailwind emerald-500 | rgb(16, 185, 129) | oklch(0.696 0.149 162.48) |
About these formats
RGB (Red, Green, Blue). RGB is the additive model screens use: every color is a mix of red, green and blue light from 0 to 255 per channel. It is the numeric base all on-screen conversions pass through.
OKLCH (Lightness, Chroma, Hue (perceptual)). OKLCH is the modern perceptual space from CSS Color 4: L for lightness, C for chroma (intensity) and H for hue, designed so that equal numeric steps look like equal steps to your eye.
Frequently asked questions
How do I convert RGB to OKLCH?
Convert each channel from gamma-encoded sRGB to linear light (piecewise: /12.92 below 0.04045, else ((v+0.055)/1.055)^2.4). Multiply the linear RGB vector by the CSS Color 4 matrix to get XYZ (D65), then by the XYZ→LMS matrix and take the cube root of each component. Combine with the OKLab matrix to get L, a, b; then C = √(a² + b²) and H = atan2(b, a) in degrees. The converter above does it instantly, including the reverse direction.
What is RGB?
RGB — Red, Green, Blue — is the additive model screens use: every color is a mix of red, green and blue light from 0 to 255 per channel. It is the numeric base all on-screen conversions pass through.
What is OKLCH used for?
OKLCH (Lightness, Chroma, Hue (perceptual)) is the modern perceptual space from CSS Color 4: L for lightness, C for chroma (intensity) and H for hue, designed so that equal numeric steps look like equal steps to your eye.
Is the RGB → OKLCH conversion exact?
Yes, within display precision. OKLCH values are typically stored to 3 decimals, and on very saturated colors that can shift a channel by 1–3 units of 255 after a round trip — invisible in practice, and exactly how browsers and conversion tools round.
Why does the OKLCH value look different in other tools?
Small differences come from rounding (how many decimals are kept) and from out-of-gamut handling. This site follows the CSS Color 4 algorithms and shows OKLCH with 3 decimals, the same convention used by browsers and mainstream design tools.