HEX to OKLCH Converter
Convert hex colors to CSS oklch() values for perceptually even palettes. Supported in all modern browsers.
The formula
Linearise sRGB, convert to LMS cone space, take cube roots, and convert to OKLab (Björn Ottosson, 2020). OKLCH is OKLab in polar form: L = lightness, C = √(a² + b²), H = atan2(b, a).
Common colors
| Color | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| #000000 | rgb(0, 0, 0) | hsl(0 0% 0%) | oklch(0% 0 0) | |
| #FFFFFF | rgb(255, 255, 255) | hsl(0 0% 100%) | oklch(100% 0 0) | |
| #FF0000 | rgb(255, 0, 0) | hsl(0 100% 50%) | oklch(62.8% 0.258 29.2) | |
| #00FF00 | rgb(0, 255, 0) | hsl(120 100% 50%) | oklch(86.6% 0.295 142.5) | |
| #0000FF | rgb(0, 0, 255) | hsl(240 100% 50%) | oklch(45.2% 0.313 264.1) | |
| #FFFF00 | rgb(255, 255, 0) | hsl(60 100% 50%) | oklch(96.8% 0.211 109.8) | |
| #00FFFF | rgb(0, 255, 255) | hsl(180 100% 50%) | oklch(90.5% 0.155 194.8) | |
| #FF00FF | rgb(255, 0, 255) | hsl(300 100% 50%) | oklch(70.2% 0.322 328.4) | |
| #808080 | rgb(128, 128, 128) | hsl(0 0% 50%) | oklch(60% 0 0) | |
| #FFA500 | rgb(255, 165, 0) | hsl(39 100% 50%) | oklch(79.3% 0.171 70.7) | |
| #800080 | rgb(128, 0, 128) | hsl(300 100% 25%) | oklch(42.1% 0.193 328.4) | |
| #008080 | rgb(0, 128, 128) | hsl(180 100% 25%) | oklch(54.3% 0.093 194.8) |
Frequently asked questions
Can I use oklch() in CSS?
Yes. oklch() is part of CSS Color Level 4 and works in current Chrome, Edge, Safari and Firefox. Tailwind CSS v4 defines its whole default palette in OKLCH.
Why use OKLCH instead of HSL?
OKLCH lightness matches how bright colors look, so two colors with the same L have similar contrast. That makes accessible palettes and even shade ramps much easier.
More converters: HEX to RGB · RGB to HEX · HEX to RGBA · HEX to HSL · HSL to HEX · RGB to HSL · All formats at once