HEX to OKLCH converter
Convert HEX to OKLCH for modern CSS.
Example: #ff6b35
OKLCH
Convert HEX to OKLCH for modern CSS.
Example: #ff6b35
OKLCH is the newest way to write a color in CSS, and it is supported in current Chrome, Edge, Safari and Firefox. Unlike HEX and HSL, its lightness matches what the eye sees: two colors with the same L look equally light, which makes building palettes and checking contrast much easier to reason about.
About the formats. A HEX code writes the red, green and blue channels as two hexadecimal digits each, so #ff6b35 is red ff (255), green 6b (107) and blue 35 (53). The leading # is optional here, the short forms #f63 and #f63a work, and the 8-digit form #RRGGBBAA adds transparency. OKLCH is a perceptual color model built on Björn Ottosson's OKLab space: L is lightness from 0% to 100%, C is chroma (how vivid the color is, from 0 for grey up to about 0.32 inside sRGB) and H is the hue angle in degrees. Lightness tracks what the eye sees, so equal L values look equally light.
How exact is it? HEX holds a whole number from 0 to 255 per channel, so every code maps to exactly one color and nothing has to be rounded on the way in. Every sRGB color has an exact OKLCH value. It is shown to four decimals for chroma and two for lightness and hue, so converting it back can differ by one step in a single channel for roughly 1 color in 1,000.
For example, #6366f1 in HEX is oklch(58.54% 0.2041 277.12) in OKLCH. The three numbers are lightness (0 to 100%), chroma (how vivid the color is, roughly 0 to 0.32 within sRGB) and a hue angle. Every HEX color has an exact OKLCH twin, so this direction never clips; it is the reverse direction that can run out of gamut.
Type or paste a HEX value such as #6366f1 and the OKLCH value, oklch(58.54% 0.2041 277.12), appears straight away. Use Copy to put it on your clipboard, or choose a color with the picker.
Yes, in current versions of Chrome, Edge, Safari and Firefox. For older browsers, keep the HEX value as a fallback by declaring it on the line before the oklch() one.
In HSL, yellow and blue at 50% lightness look nothing alike in brightness. In OKLCH, equal lightness looks equally light, so changing the hue or building a scale does not shift perceived brightness by surprise.
HEX holds a whole number from 0 to 255 per channel, so every code maps to exactly one color and nothing has to be rounded on the way in. Every sRGB color has an exact OKLCH value. It is shown to four decimals for chroma and two for lightness and hue, so converting it back can differ by one step in a single channel for roughly 1 color in 1,000.
Yes. Add transparency to the HEX value and it is carried over to the OKLCH result, which supports it too.
No. The conversion runs in your browser and nothing is uploaded.