What this does
Edit any field — hex, RGB, HSL, or the native color picker — and watch the others update in real time. Includes OKLCH (modern perceptually-uniform color space, supported in CSS) for design system work.
The four formats
- Hex (
#6ee7b7) — the web's default. Compact, universal, but not intuitive to tweak by hand. - RGB (
rgb(110, 231, 183)) — 0–255 per channel. Direct and easy to reason about for additive mixing. - HSL (
hsl(157, 71%, 67%)) — hue (0–360°), saturation (%), lightness (%). Easier for "make it more red" or "less saturated" by hand. - OKLCH (
oklch(82% 0.13 167)) — perceptually uniform. Equal numeric distance ≈ equal visual distance. Use this for design system scales — the gaps actually look even.
Why OKLCH matters for design systems
HSL feels intuitive but it lies. hsl(60, 100%, 50%) (yellow) and
hsl(240, 100%, 50%) (blue) have the same "lightness" value but
the yellow looks far brighter. OKLCH fixes this — the L axis maps to actual
perceived lightness, so a 10% scale step looks like a 10% step at every hue.
Is my data private?
Yes. All conversion happens in your browser. The OKLCH transform is an inline JavaScript implementation, not a server call.