RGB to OKLCH Converter
Type a RGB value and get OKLCH straight away. Everything runs in your browser — nothing is sent to a server.
How the conversion works
RGB is linearised, passed through Oklab and read out as L, C and H. HSL takes lightness from the largest and smallest channel, which makes equal lightness values look uneven across hues; OKLCH’s L largely removes that problem.
RGB
RGB describes color the way a screen makes it: three lights added together, each from 0 to 255. All three at zero is black; all three at 255 is white. Because it mirrors the hardware it is exact and lossless, but it is hard to reason about — nudging a color slightly warmer means changing two or three numbers at once with no obvious direction.
OKLCH
OKLCH has the same three ideas as HSL — lightness, chroma, hue — but built on a model of how eyes actually work. Two colors with the same L look equally bright, which is what makes it good for generating tint scales and for checking contrast. It also reaches colors sRGB cannot show, so a valid OKLCH value may have no exact HEX; the converter clamps those back into range.
RGB to OKLCH, step by step
Worked through with #FF6347. Every number comes from the same engine the converter above uses.
-
Undo the gamma (linear RGB)
R 1 G 0.125 B 0.063 -
Oklab coordinates
L 0.696 a 0.165 b 0.105 -
To polar form — chroma and hue
C = √(a²+b²) = 0.196 H = atan2(b, a) = 32.3° -
Result
oklch(69.6% 0.1955 32.32)
RGB to OKLCH examples
| Color | RGB | OKLCH |
|---|---|---|
| Red | rgb(255, 0, 0) |
oklch(62.8% 0.2577 29.23) |
| Tomato | rgb(255, 99, 71) |
oklch(69.6% 0.1955 32.32) |
| Orange | rgb(255, 165, 0) |
oklch(79.3% 0.171 70.67) |
| Gold | rgb(255, 215, 0) |
oklch(88.7% 0.1822 95.33) |
| Limegreen | rgb(50, 205, 50) |
oklch(74.2% 0.2286 142.83) |
| Teal | rgb(0, 128, 128) |
oklch(54.3% 0.0927 194.77) |
| Dodgerblue | rgb(30, 144, 255) |
oklch(65.2% 0.1901 253.21) |
| Royalblue | rgb(65, 105, 225) |
oklch(56% 0.1882 266.4) |
| Blueviolet | rgb(138, 43, 226) |
oklch(53.4% 0.2503 301.37) |
| Hotpink | rgb(255, 105, 180) |
oklch(72.8% 0.1971 351.99) |
Common questions
Why does the conversion linearize RGB first?
Screen RGB values are gamma-encoded, so the numbers are not proportional to actual light. Undoing that encoding is required before any perceptual model can work with them.
Two colors have the same L but look different. Is that expected?
Yes — L only fixes perceived lightness. Chroma and hue still differ, so one can look far more vivid. That is exactly the property you want when building a scale: the steps match in brightness without being the same color.
Is OKLCH better than LAB for this?
For picking and adjusting colors, yes. Classic LAB distorts hue when you change lightness — blues drift purple — which Oklab was specifically designed to fix.