{}

Color Converter & Contrast

HEX/RGB/HSL/OKLCH conversion plus WCAG contrast checking with a live preview.

Design hands you HEX, your CSS variables prefer HSL, modern CSS is moving to OKLCH — conversion itself is easy; avoiding color shifts is not. HSL round-trips fine in raw sRGB, but reaching OKLCH requires linearization first, and skipping it produces visibly wrong results. This tool follows the standard path (sRGB → linear → OKLab → OKLCH) per the CSS Color 4 spec.

The contrast checker is the daily accessibility chore: body text needs 4.5:1 (AA), large text 3:1, AAA one notch higher. Two color pickers compute the ratio and all four pass/fail grades live, with a real preview of the foreground over the background — your eyes remain the final judge of legibility.

What OKLCH is and why designers keep switching

OKLCH describes color by lightness (L), chroma (C) and hue (H), with all three matching perception: equal-L colors look equally bright, changing C moves vividness in even steps. Traditional HSL cannot do this — an HSL yellow and blue with the same L differ in actual brightness by nearly 2×. Palettes built in OKLCH come out evenly layered, which is why it powers modern accessible theming.

Where 4.5:1 comes from

WCAG 2.x defines contrast as the ratio of relative luminances (with a 0.05 bias): 4.5:1 is the floor for body text at normal vision, 3:1 applies to large text (18pt+), and 7:1 (AAA) covers low-vision users. The ratio depends only on the two luminances — hue is irrelevant, which is why gray-on-red can still pass.

Frequently asked questions

Is alpha supported?
Yes. 8-digit HEX (#RRGGBBAA), rgba() and hsla() all parse, and every output format carries alpha through. Contrast math treats colors as opaque, which is how WCAG defines the measurement.
Can I paste oklch() directly?
Yes — oklch(0.63 0.26 29.2) parses and converts to every other format; browsers from 2023 render OKLCH natively, older ones fall back to an sRGB approximation.
Why do results differ slightly from other tools?
Rounding strategy. This tool uses the CSS Color 4 matrices with 4-decimal precision, matching what getComputedStyle reports in browsers.

Related tools