MundoKit

OKLCH color converter

Enter two opaque CSS colors to convert them and compare text contrast. Results and swatches update as you type.

Convert opaque CSS colors and inspect their sRGB fallback.

How it works

Conversions follow CSS Color 4 sections 7, 9 and 19: decode sRGB, transform through D65 XYZ and OKLab, then use polar coordinates for OKLCH. Intermediate values stay unrounded. Display values use six decimal places; HEX uses rounded bytes.

HEX, RGB, HSL and swatches use a channel-clipped sRGB fallback. OKLab and OKLCH retain the original color. This clipping can differ from browser gamut mapping.

contrast = (lighter luminance + 0.05) / (darker luminance + 0.05)

WCAG checks use unrounded fallback channels: AA needs 4.5:1 for normal text or 3:1 for large text; AAA needs 7:1 or 4.5:1 respectively. Large means at least 18pt, or 14pt bold.

Worked examples

Black on white

#000000 against #ffffff gives 21:1 and passes all four text contrast checks.

CSS Color 4 reference

oklch(65% 0.15 270) converts to #6c88ea, matching the specification’s rounded example.

Frequently asked questions

Which input syntax is supported?
Use three- or six-digit HEX, numeric or percentage RGB, HSL with percentage saturation and lightness, OKLab or OKLCH. Commas work for RGB and HSL. Hue accepts degrees, grad, radians or turns. Alpha, names, none and calc() are outside this tool’s scope.
Why does the fallback look different?
Colors outside sRGB lose information when channels are clipped. Use the original OKLCH value when your target supports it.
What happens to gray hue?
Near-neutral colors have a powerless hue. The output uses zero degrees for that hue.
Does a pass guarantee an accessible page?
No. The result covers these opaque fallback color pairs. Text size, weight, images, interaction states and other accessibility requirements still need checking.

Sources

Last reviewed 2026-11-14. The method is written out above so you can check our math.