Skip to content
arnaud.app

HEX to OKLCH Converter (CSS Color 4)

Convert HEX color codes to OKLCH instantly and free. e.g. #3B82F6 → oklch(0.62 0.19 260). The perceptually uniform CSS Color 4 format.

Runs in your browser

OKLCH is the perceptually uniform color space in CSS Color Level 4 - adjusting lightness or chroma won't accidentally shift the hue like HSL does. Paste a HEX code and we return the oklch() value, ready to drop into modern CSS.

1.00
CSS oklch()

oklch(0.608 0.215 257.4)

HEX

#0a7cff

CSS rgb()

rgb(10 124 255)

CSS hsl()

hsl(212 100% 52%)

HSV

hsv(212 96% 100%)

CMYK

cmyk(96% 51% 0% 0%)

#0A7CFF

Best contrast vs

black text → ratio 5.34:1 (WCAG AA needs 4.5:1)

How to use it

  1. Choose the input format

    Pick HEX, RGB, HSL, HSV/HSB, CMYK, OKLCH or CSS name from the format selector.

  2. Type or paste your color

    Enter the value - or use the color picker and alpha slider - and every other format updates live.

  3. Copy the format you need

    Use the copy button next to the format your destination expects.

What is it?

A color converter translates between the formats CSS, design tools and image editors all use slightly differently. HEX (#0a7cff) is the legacy shorthand for an RGB triplet. RGB describes a colour in red/green/blue intensities. HSL (hue, saturation, lightness) is friendlier for tweaking shades. OKLCH is the new perceptually-uniform model in CSS Color Level 4 - adjusting lightness or chroma doesn't accidentally shift the hue the way HSL does.

When to use it

Whenever a colour value needs to move between contexts: copying a brand colour from a logo SVG (HEX) into a CSS variable system (often HSL or OKLCH), translating a screenshot pixel value (RGB) into a design token, reading the HSV your picker shows, getting an approximate CMYK breakdown for print, or generating accessible variants of a base colour. Also helpful when checking contrast against WCAG thresholds.

Common mistakes

Don't assume HSL lightness is perceptual - it isn't. hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) have the same lightness number but look wildly different in luminance; OKLCH fixes this. Treat CMYK output as an approximation - the real press result depends on the ICC profile. And don't lose precision by truncating HEX channels mid-conversion: round once at the end.

FAQ

Why OKLCH?
OKLCH is the new CSS Color Level 4 format. Unlike HSL it's perceptually uniform, which means adjusting lightness or chroma doesn't accidentally shift the hue.

Color Converter (HEX, RGB, HSL)

Convert colors between HEX, RGB, HSL, HSV, CMYK and OKLCH.

Try it out →

More in this category