Pick colors in OKLCH for better palettes

The job

Design systems want 'the same color but darker' to actually look uniform. In HSL, navy at 50% lightness is nearly black while yellow at 50% is still bright. OKLCH measures lightness perceptually, so equal L values read as equal brightness.

Convert a color

Enter a HEX like #3b82f6. The tool shows OKLCH (L, C, H), CIELAB, and LCH side by side. Lightness around 0.63 with chroma ~0.19 and hue ~254 — that is the perceptual fingerprint of that blue.

• L (0–1) is perceived lightness — change it and the color keeps its character.
• C is chroma; pushing past ~0.3 leaves the sRGB gamut and clips on conversion back.
• H is hue angle, 0–360.

Worked example

Building a button scale: take your brand blue, hold H and C constant, and step L from 0.9 down to 0.4 — every step looks evenly darker, which HSL lightness never achieves. Check each pair against the contrast checker afterward.

Limits

Conversions run through D65 sRGB math — accurate enough for screen work, not lab instruments. Colors outside sRGB clip on the way back to HEX; the swatch shows the clipped result, which is the honest answer.