HEX to OKLCH Converter
Turn a HEX code into an oklch() value for CSS, then adjust lightness, chroma and hue with sliders. For example, #3b82f6 is oklch(62.3% 0.188 259.8).
- Runs in your browser
- L, C and H sliders
- CSS with a HEX fallback
- Built by Mohamed Nasreldeen
HEX in, oklch() out
Type a HEX colour or use the picker. Move the sliders to adjust lightness, chroma and hue; the HEX follows.
How to convert HEX to OKLCH
Paste your hex code
Type a hex value such as #3b82f6 into the HEX field, with or without the leading hash.
Read the OKLCH value
The oklch() value updates instantly as L (lightness %), C (chroma) and H (hue), with RGB and HSL underneath. Drag a slider to change one property and watch the HEX follow.
Copy the oklch() string
Copy a CSS-ready value like oklch(62.3% 0.188 259.8), or the two-line snippet that puts a HEX fallback in front of it, and paste it into your stylesheet.
What is OKLCH and why use it?
OKLCH is a modern CSS color space (Lightness, Chroma, Hue) built on OKLab. Its big advantage is being perceptually uniform: two colors with the same L look equally bright to the eye, so you can build accessible palettes, hover states and gradients that stay even — something HEX and HSL do not guarantee.
Chrome, Edge, Firefox and Safari have all supported it since 2023. If you must support very old browsers, keep a HEX fallback in front of the oklch() line; the CSS box above writes both.
How accurate is the conversion?
The conversion uses the standard sRGB → OKLab matrices, computed entirely in your browser. It is meant for sRGB colors and CSS authoring — great for design and the web, not a substitute for a calibrated print proof. Nothing you enter is uploaded or stored.
Common colours in OKLCH
The CSS named colours people reach for most, converted with the same maths as the tool. Click a row to load it above.
| Colour | HEX | OKLCH |
|---|---|---|
| White | #ffffff | oklch(100% 0 0) |
| Black | #000000 | oklch(0% 0 0) |
| Gray | #808080 | oklch(60% 0 0) |
| Red | #ff0000 | oklch(62.8% 0.258 29.2) |
| Orange | #ffa500 | oklch(79.3% 0.171 70.7) |
| Yellow | #ffff00 | oklch(96.8% 0.211 109.8) |
| Lime | #00ff00 | oklch(86.6% 0.295 142.5) |
| Green | #008000 | oklch(52% 0.177 142.5) |
| Teal | #008080 | oklch(54.3% 0.093 194.8) |
| Cyan | #00ffff | oklch(90.5% 0.155 194.8) |
| Blue | #0000ff | oklch(45.2% 0.313 264.1) |
| Navy | #000080 | oklch(27.1% 0.188 264.1) |
| Purple | #800080 | oklch(42.1% 0.193 328.4) |
| Magenta | #ff00ff | oklch(70.2% 0.322 328.4) |
| Pink | #ffc0cb | oklch(86.8% 0.074 7.1) |
| Brown | #a52a2a | oklch(48.1% 0.16 25.6) |
Two things show up in the table. Lime and green share a hue of 142.5 and differ in lightness and chroma, which is the point of the format: one number per property. And the grays have a chroma of 0, so their hue is written as 0; it has no effect.
Frequently asked questions
What is the oklch() CSS function?
It defines a colour by Lightness (0–100%), Chroma (roughly 0–0.4 for colours a screen can show) and Hue (0–360°) in the OKLCH space, for example oklch(62.3% 0.188 259.8) for #3b82f6. Unlike HSL it is perceptually uniform.
Why convert HEX to OKLCH?
To author colors in modern, accessible CSS. Equal lightness values look equally bright, so palettes, dark-mode variants and gradients stay even — hard to achieve reliably with HEX.
Why does the HEX stop changing when I raise the chroma?
Because you have left the sRGB gamut. OKLCH can describe colours a standard screen cannot show; the tool then clips each RGB channel to fit, shows a note, and the HEX stays at the nearest value it can reach. Lower the chroma until the note disappears.
Is OKLCH supported in browsers?
Yes — all modern browsers have supported oklch() since 2023. For very old browsers, keep a HEX/rgb() fallback, which this tool also shows.
Is my color data uploaded?
No. Every conversion is computed locally in your browser with standard color math. Nothing is uploaded, and there is no sign-up.