HEX to OKLCH Converter
Type a HEX value and get OKLCH straight away. Everything runs in your browser — nothing is sent to a server.
How the conversion works
The HEX becomes RGB, then Oklab, then lightness (L), chroma (C) and hue (H). OKLCH is built around perceived lightness, so changing the hue alone does not make a color look brighter or darker.
HEX
HEX is the same red-green-blue triplet as RGB, just written in base 16 so each channel fits in two characters. It survives everywhere — CSS, design tools, config files — because it is short and unambiguous. Case does not matter, and #abc is shorthand for #aabbcc. An eight-digit HEX adds alpha as a final pair, which is why #FF000080 is half-transparent red.
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.
HEX to OKLCH, step by step
Worked through with #FF6347. Every number comes from the same engine the converter above uses.
-
Split into pairs
#FF6347 → FF · 63 · 47 -
Read each pair as base 16
R FF = 15×16 + 15 = 255 G 63 = 6×16 + 3 = 99 B 47 = 4×16 + 7 = 71 -
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)
HEX to OKLCH examples
| Color | HEX | OKLCH |
|---|---|---|
| Red | #FF0000 |
oklch(62.8% 0.2577 29.23) |
| Tomato | #FF6347 |
oklch(69.6% 0.1955 32.32) |
| Orange | #FFA500 |
oklch(79.3% 0.171 70.67) |
| Gold | #FFD700 |
oklch(88.7% 0.1822 95.33) |
| Limegreen | #32CD32 |
oklch(74.2% 0.2286 142.83) |
| Teal | #008080 |
oklch(54.3% 0.0927 194.77) |
| Dodgerblue | #1E90FF |
oklch(65.2% 0.1901 253.21) |
| Royalblue | #4169E1 |
oklch(56% 0.1882 266.4) |
| Blueviolet | #8A2BE2 |
oklch(53.4% 0.2503 301.37) |
| Hotpink | #FF69B4 |
oklch(72.8% 0.1971 351.99) |
Common questions
What is a normal chroma value?
Most sRGB colors land between 0 and about 0.37. Gray is 0. Values above roughly 0.4 exist in the model but no ordinary screen can show them.
Why use OKLCH instead of HSL for design tokens?
Because equal lightness steps look equal. A scale built on HSL lightness will look like it jumps at yellow and stalls at blue; the same scale in OKLCH reads evenly across every hue.
Do browsers support oklch() yet?
All current major browsers do. For older ones, ship a HEX declaration first and let the oklch() line override it — anything that does not understand the second line simply keeps the first.