RGB to OKLCH Converter
Enter an RGB color and instantly get its OKLCH and OKLab equivalents — the modern, perceptually uniform color spaces natively supported in CSS.
rgb(59, 130, 246)OKLCH
oklch(0.623 0.1880 259.81)
OKLab
oklab(0.623 -0.0332 -0.1851)
CSS Snippets
color: oklch(0.623 0.1880 259.81);background-color: oklch(0.623 0.1880 259.81);color: oklab(0.623 -0.0332 -0.1851);How RGB to OKLCH conversion works
RGB describes a color as an additive mix of red, green, and blue light on a 0–255 scale — simple for screens, but not perceptually uniform: equal numeric steps in RGB don't look like equal steps in brightness or hue. OKLCH (Lightness, Chroma, Hue) fixes that. This tool converts your RGB value to linear-light sRGB, then into the LMS cone-response space, and finally into OKLab/OKLCH coordinates using Björn Ottosson's published OKLab matrices — the same math implemented natively in modern browsers' oklch() CSS function.
Why convert to OKLCH?
OKLCH makes it easy to build accessible color scales, adjust lightness without shifting perceived hue, and interpolate between colors smoothly — gradients built in OKLCH avoid the muddy grey banding common with RGB or HSL.
Browser support
oklch() and oklab() are natively supported in Chrome 111+, Firefox 113+, and Safari 15.4+. Every RGB color maps to a valid, in-gamut OKLCH value, so the CSS output above is safe to use directly.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Converting a brand colour into a space where lightness adjustments look uniform to the eye.
- Building a palette where each step is perceptually even rather than numerically even.
- Checking whether a colour you want is inside the sRGB gamut before shipping it.
- Producing a modern CSS colour value from a legacy hex token.
- Comparing two colours' actual lightness rather than their apparent brightness in RGB.
Frequently Asked Questions
- What does converting to OKLCH give me?
- Coordinates you can reason about. Lightness that matches perception, chroma as an absolute distance from grey, and hue as an angle — so "same colour, slightly darker" becomes one number rather than a guess across three RGB channels.
- Why is OKLCH better than HSL for this?
- Because HSL lightness is geometric rather than perceptual. hsl(60, 100%, 50%) and hsl(240, 100%, 50%) are yellow and blue at nominally identical lightness and look nothing alike — OKLCH's L axis was fitted so that equal values genuinely look equally light.
- What is the chroma range?
- Roughly 0 to 0.4 in CSS notation, with no fixed maximum — how far you can push before leaving the gamut depends on hue and lightness. Yellow reaches much higher chroma than blue, which is why a palette at constant chroma clips unevenly.
- What happens with a P3 colour?
- OKLCH describes it fine, and converting to sRGB clips it. That asymmetry is the point: RGB to OKLCH is always exact because every sRGB colour is inside the space, while the reverse is where gamut mapping decides how a wider colour degrades.
- Is it safe to use in production CSS?
- Yes across current browsers, and Tailwind v4 moved its default palette into it. An `@supports` guard with a hex fallback costs one declaration and removes any risk on an older client, which is the pragmatic pattern.
Common errors and gotchas
- Assuming every OKLCH value is displayable. The space is larger than sRGB, so some values must be clipped.
- Reading the lightness channel as HSL's. They are defined differently, and the numbers are not comparable.
- Expecting hue to behave the same as in HSL, where the same numeric hue can look like a different colour.
- Forgetting that older browsers need a fallback declaration before the modern one.
- Round-tripping through 8-bit RGB repeatedly, which accumulates rounding error on every pass.