Color converter: HEX, RGB, HSL, OKLCH, LAB, P3 with WCAG contrast

A color isn't a value but a bundle of representations. HEX to write, RGB to send, OKLCH to think in perceptual brightness. The converter below shows six spaces at once with gamut badges (sRGB / Display-P3 / out of gamut), an OKLCH lightness rotator, and a live WCAG meter that tells you immediately if your foreground/background combo trips the accessibility threshold.

Six color spaces, one color

Each space has a strength and a weakness.

HEX is a compact sRGB notation and the CSS classic. But it's sRGB-only - if you want Display-P3, you need color(display-p3 …) notation and HEX no longer applies.

RGB is the screen's native language: three numbers, one per channel. Handy for OS APIs and mixing, but not perceptually uniform. RGB doesn't tell you whether two colors look equally bright.

HSL is the beginner favourite: hue, saturation, lightness. Easy to manipulate in a color picker, but the "lightness" doesn't match perceived brightness. HSL yellow at lightness 50% looks noticeably brighter than HSL red at lightness 50%.

OKLCH is a strong modern choice for web design: lightness, chroma, hue, all perceptually uniform. L = 60% means "medium perceived brightness", regardless of hue. Many newer design systems and CSS workflows use OKLCH for consistent lightness steps (tonal scales, dark mode).

LAB is the older perceptually-uniform space, decades-old in print and prepress workflows. ΔE calculations for Pantone matching run on LAB. OKLCH is its mathematically refined successor - closer to how humans actually perceive lightness.

Display-P3 is Apple's wide-gamut standard, about 25% larger than sRGB by 2D chromaticity area (around 50% larger by gamut volume per CSS Color 4). Mostly extra saturation in reds and greens. Visible only on P3 hardware (Retina Macs, OLED iPhones, some Android flagships). On older LCDs P3 is gamut-mapped or clipped back to sRGB.

Lightness scale in OKLCH

The showcase. Type a color and the tool renders it as a continuous OKLCH lightness gradient from L = 0 to L = 100%. Hue and chroma stay constant. The scale gets evenly lighter from left (dark) to right (light) - that's the perceptually-uniform property of OKLCH. Tap or drag along the scale to set your input's lightness; the tick marks sit at 0, 25, 50, 75, and 100%.

The comparison makes the point: try the same in HSL and you'll see HSL's lightness ladder for yellow looks different from blue. The same tool can't help you with that - but the fact that your own HSL design feels "uneven" comes from this exact property.

How to use it in a design system: define your tonal scale as OKLCH at fixed L steps (e.g. 95 / 80 / 60 / 40 / 20%) and only vary hue and chroma. You get a palette where every hue has the same perceived lightness pattern. HSL can't do that.

Live WCAG meter

Pick a color as foreground, white / black / a custom color as background, and the tool computes the WCAG 2.1 contrast ratio live. The ratio is a number from 1 (no contrast) to 21 (max contrast, black on white).

The four pass/fail badges cover both levels × both text sizes. Plus a sample box rendering actual fg/bg text so you can see the look, not just the number. Important: the meter only checks fg/bg contrast - it doesn't know your font size. Small text on a brand color needs AA Normal.

Gamut badges

Each color space card carries a badge:

• sRGB: the color sits in the classic web gamut. Renders everywhere.
• Display-P3: the color extends past sRGB but stays in Display-P3 - visible on modern Apple hardware and many OLED displays.
• out of gamut: neither in sRGB nor P3 without clipping. Typical for Lab values at the edge of the gamut or for heavily saturated CIELCH values. Browsers will gamut-map or clip the value depending on the output path (CSS Color 4 calls this gamut mapping).

Designing in mind: HEX values are always sRGB. OKLCH values can sit in P3 or beyond depending on chroma. If your oklch(60% 0.4 30) shows the 'out of gamut' badge, you know: on a standard display the user gets a different color than you typed.

Palettes

Four modes, each using your current input as the base:

• Complementary: hue + 180°. Classic foreground/background tension.
• Triadic: hue + 120° + 240°. Balanced three-color composition.
• Analogous: hue ± 30°. Soft tone-on-tone variation.
• Perceptually distinct: hue + 30°/+60°/+90° at constant L and C. Four anchors that don't look like the same color but still feel equally bright.

All math runs in OKLCH, so generated colors keep the same perceived lightness as your base - as long as they fit the displayable sRGB gamut. If a computed OKLCH color falls outside sRGB, the rendered swatch is gamut-mapped or clipped and its L can drift slightly. An HSL-based complementary calculation often hands you a noticeably different lightness even without any gamut issues.

FAQ

What is OKLCH and why is it better than HSL?

OKLCH is perceptually uniform: equal L values feel equally bright across all hues. HSL doesn't have that - HSL yellow at 50% L looks brighter than HSL red at 50% L. The lightness rotator shows it.

How do I convert HEX to OKLCH?

Type the HEX above - the OKLCH card renders the value immediately. The math goes through sRGB → linear → XYZ → Oklab → OKLCH using the culori library.

What's the difference between sRGB and Display-P3?

sRGB is the web standard (older monitors). Display-P3 is Apple's wide-gamut, about 25% larger by 2D chromaticity area (around 50% larger by gamut volume), mostly in reds and greens.

What WCAG contrast counts as accessible?

AA: 4.5:1 normal, 3:1 large. AAA: 7:1 normal, 4.5:1 large. Large = 18 pt regular or 14 pt bold.