Bidirectional · Real-time · Copy-ready — 100% local, no upload
Type or paste any color value in HEX, RGB, HSL, or OKLCH format and all other representations update instantly. Includes a live color preview and one-click copy for each format. Everything runs in your browser — no data ever leaves your device.
Different workflows use different color spaces. CSS historically relied on hex and rgb(), while design tools like Figma prefer HSL for its human-readable hue/saturation/lightness model. OKLCH is the modern standard: it is perceptually uniform, meaning equal numerical steps produce visually equal color differences — perfect for generating accessible color palettes, predictable gradients, and design tokens that work across dark and light themes.
OKLCH stands for Lightness, Chroma, Hue — built on the OKLab perceptual color model. Unlike HSL, it guarantees that two colors at the same L value appear equally bright to the human eye. This makes it far better for building accessible design systems, dark-mode palettes, and CSS custom-property color scales.
Yes. The oklch() function is supported in all modern browsers since 2023 (Chrome 111+, Firefox 113+, Safari 15.4+). You can use it directly: color: oklch(0.7 0.15 200);. It can even express colors outside the sRGB gamut for wide-gamut P3 displays.
HSL is a cylindrical remapping of sRGB — simple but not perceptually uniform. A yellow at HSL lightness 50% looks much brighter than a blue at the same value. OKLCH corrects this: equal L values produce visually equal brightness, making it much more predictable for design work.
A hex color like #3b82f6 splits into three pairs: 3b=59 (Red), 82=130 (Green), f6=246 (Blue). Each pair is a hexadecimal number between 0 and 255. Shorthand like #fff expands to #ffffff by doubling each digit.
No. All color conversion runs entirely in JavaScript inside your browser. No color values, no requests, no tracking — your data never leaves your device.