RGB to OKLCH Converter
Turn red, green and blue into OKLCH: a lightness you can trust, a chroma you can dial, and a hue that stays put while you do it.
Example conversion
rgb(220, 20, 60)
converts to
oklch(57.12% 0.2219 20.09)
About RGB to OKLCH conversion
RGB says how much light to emit. It says nothing about how that light will be experienced - and those are not the same thing. Doubling the green channel does not double the perceived brightness, and two colors with identical channel sums can look wildly different. OKLCH is built the other way round: its numbers describe the experience. L is perceptual lightness, C is chroma, and H is a hue angle in degrees.
The practical payoff shows up the moment you do arithmetic on colors. Averaging two RGB values gives a midpoint that often looks muddy or dark; averaging in OKLCH gives one that looks like the middle. Rotating the hue in OKLCH keeps the brightness steady, so a generated palette stays coherent instead of drifting light and dark as it goes round the wheel. Anything that manipulates color programmatically - charts, generated avatars, theme engines, gradients - behaves better in this space than in raw channels.
When should you use RGB to OKLCH?
- Generating palettes in code - step the hue at fixed L and C and every color comes out equally bright.
- Chart and data-visualisation colors - series that are equally legible matter more than series that are equally saturated in RGB terms.
- Blending and interpolation - gradients and transitions computed in OKLCH avoid the grey midpoint.
- Moving values out of image or canvas work - code that produced channel numbers, feeding a modern CSS design token.
- Reasoning about contrast - the L axis tracks perceived lightness, so lightness differences mean something.
How the conversion works
The three channels are scaled to 0-1 and un-gamma-corrected into
linear-light sRGB, because all real color math needs light in proportion, not
the encoded values. Those pass through OKLAB's LMS matrices - a model of the
three cone types in the eye - with a cube root applied to each, which is what
makes the space perceptual. That yields L, a and b. The last step converts
the rectangular a and b into polar coordinates: C = sqrt(a² + b²)
and H = atan2(b, a), expressed in degrees from 0 to 360.
L is shown here as a percentage, matching the CSS syntax. Chroma is an open-ended number that starts at 0 for a grey; sRGB colors rarely exceed about 0.37. A grey has no meaningful hue, so it reports 0.
RGB vs OKLCH
- What the numbers mean - RGB is three light intensities a display consumes; OKLCH is three properties a person perceives.
- Arithmetic - averaging, interpolating and stepping all behave sensibly in OKLCH and badly in RGB.
- Hue stability - changing lightness in OKLCH leaves the hue where it was. In RGB it drifts.
- Gamut - OKLCH describes colors beyond sRGB, so it is the larger space; RGB values always convert into it cleanly.
- Where each belongs - RGB at the hardware end, OKLCH at the design end.
Named CSS colors in RGB and OKLCH
The sixteen basic CSS color keywords plus eight more that come up constantly, each shown in both models side by side. Pick any row to drop that color into the converter and read it in the other eight models too.
Frequently asked questions
Is OKLCH just HSL with better math?
In spirit, yes - both give you a hue angle and a way to control vividness and lightness. The difference is that HSL's lightness is a crude average of the channels while OKLCH's is modelled on human vision. That single change is why palettes and gradients built in OKLCH look even and ones built in HSL often do not.
What is a typical chroma value?
Muted and pastel colors sit around 0.02 to 0.08, everyday brand colors around 0.1 to 0.2, and the most saturated colors sRGB can produce reach roughly 0.25 to 0.37 depending on hue. There is no fixed maximum, because how much chroma is achievable depends on the lightness and hue you pair it with.
Why did my color come back with hue 0?
Because it is a grey. When red, green and blue are equal there is no hue to measure, so chroma is 0 and the hue angle is reported as 0 by convention. It does not tint the grey.
Should I use OKLCH or OKLAB?
They hold the same information. OKLCH is easier for people, because "raise the chroma" and "rotate the hue" are things you can picture, while a and b are not. OKLAB is easier for machines doing interpolation. Write OKLCH by hand; let code use whichever is convenient. See RGB to OKLAB.
Do I lose anything converting RGB to OKLCH?
No. OKLCH covers everything sRGB can express and more, so the conversion in this direction is always exact. Values are rounded for readability, which can move a channel by one on the way back - invisible in practice.