HEX to OKLCH Converter
Paste a HEX code and copy its oklch() value: #3b82f6 becomes oklch(62.3% 0.188 259.8). Drag the L, C and H sliders to adjust it, or paste an oklch() value into the OKLCH box to get the HEX back.
- 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 L, C and H mean in oklch()
The three numbers in oklch(62.3% 0.188 259.8), with the ranges CSS accepts (per MDN's oklch() reference).
| Part | What it controls | Values in CSS | Examples from this page |
|---|---|---|---|
| L · lightness | How bright the colour looks, from black to white | 0%–100%, or a number from 0 to 1 | Black 0%, gray #808080 60%, white 100% |
| C · chroma | How colourful it is; 0 is a pure gray | A number from 0 up; 100% means 0.4 | Pink 0.074, red 0.258, magenta 0.322 |
| H · hue | Which colour, as an angle on a colour wheel | 0–360 degrees | Red 29.2, yellow 109.8, green 142.5, blue 264.1 |
| A · alpha (optional) | Opacity, written after a slash | / 0.5 or / 50% | oklch(62.3% 0.188 259.8 / 50%) |
The converter writes L as a percentage. It also reads the number form, so oklch(0.623 0.188 259.8) pasted into the OKLCH box gives the same #3b82f6.
Why use OKLCH instead of HEX or HSL?
Compare pure blue and pure yellow. In HSL both are hsl(…, 100%, 50%), the same 50% lightness. In OKLCH, blue #0000ff has an L of 45.2% and yellow #ffff00 has 96.8%, which matches what your eye sees. OKLCH is built on Björn Ottosson's OKLab colour space, designed so that equal steps in L look like equal steps in brightness.
That makes a few everyday jobs simpler:
- Palettes: keep C and H, step L from 95% down to 25%, and you get a shade scale where each step looks evenly darker. If the gamut note appears at the dark or light end, lower C a little for that step.
- Hover and active states: drop L by a few points for the pressed colour. H stays the same number, so the hue stays the same.
- Colour sets: keep L and C fixed and rotate H to get colours that look equally bright, such as chart series or tag colours.
Browser support and a safe fallback
| Browser | Supports oklch() from |
|---|---|
| Chrome and Edge | Version 111 |
| Firefox | Version 113 |
| Safari (macOS and iOS) | Version 15.4 |
| Samsung Internet | Version 22 |
Versions from Can I use. MDN marks oklch() as Baseline, available across browsers since May 2023.
A browser that does not understand a CSS value skips that line and keeps the previous one. That is why the CSS box above writes two declarations, HEX first:
color: #3b82f6;for every browsercolor: oklch(62.3% 0.188 259.8);which replaces it in browsers that supportoklch()
For a whole block of rules, wrap the OKLCH versions in @supports (color: oklch(0% 0 0)) { … } instead.
How accurate is the conversion?
The converter uses Ottosson's published sRGB to OKLab matrices, computed in your browser. Results are rounded to one decimal for L and H and three for C, the precision CSS needs. It assumes sRGB colours, which is what a HEX code is, so it suits screen and web work rather than print proofing. When the sliders reach a colour outside sRGB, each RGB channel is clipped and a note appears under the sliders. 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.
Can I convert OKLCH back to HEX?
Yes. Paste a value such as oklch(62.3% 0.188 259.8) or oklch(0.623 0.188 259.8) into the OKLCH box and the HEX, RGB and HSL fields update. A colour outside sRGB comes back as the nearest HEX after clipping.
Is OKLCH supported in browsers?
Yes. Chrome and Edge 111, Firefox 113 and Safari 15.4 support oklch(), and MDN lists it as available across browsers since May 2023. For older browsers, put a HEX line before the oklch() line, as the CSS box on this page does.
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.