Color Picker & Converter
Convert a single color between HEX, RGB, HSL, and OKLCH, with the OKLCH↔sRGB conversion done through the OKLab color space using Björn Ottosson's published matrices. Use the native color picker or type into any format's fields, and the other formats update as you go, with live swatches. OKLCH is the perceptually uniform color space used in modern CSS (`oklch()`): equal steps in lightness and chroma look equally different to the eye, which HSL doesn't manage. The conversion math runs in your browser.
Reviewed by Vincenzo Manto, Founder & Lead Developer · Last updated September 27, 2026
How it works
- 1
Use the native color picker, or type a value directly into the HEX, RGB, HSL, or OKLCH fields.
- 2
Every other format updates live as you edit any one of them, with a swatch preview.
- 3
Drag the sliders under RGB, HSL, or OKLCH for fine-grained control over individual channels.
- 4
Copy any format's string (e.g. `oklch(0.628 0.225 29.2)`) directly to your clipboard.
Why HSL isn't perceptually uniform
HSL was designed in the 1970s to be easy to reason about, not to match how people actually perceive color. A pure blue and a pure yellow at the same HSL lightness value can look very different in real brightness, which makes HSL a weak basis for color scales, accessible contrast checks, or a set of tints meant to feel evenly spaced.
OKLab and OKLCH fix that with real perceptual math
OKLab, published by Björn Ottosson in 2020, transforms linear sRGB through an LMS-cone-inspired matrix and a cube-root nonlinearity, tuned against perceptual datasets so that distance in OKLab space tracks perceived color difference fairly closely. OKLCH is OKLab expressed in cylindrical Lightness/Chroma/Hue coordinates, which is why CSS Color Level 4 adopted it and why it's common for design-system color ramps that need consistent perceived steps.
Frequently asked questions
What is OKLCH and why would I use it in CSS?
OKLCH is the cylindrical (Lightness/Chroma/Hue) form of the OKLab color space. It's built so equal numeric changes in lightness or chroma produce visually equal changes in color, which HSL doesn't manage (a 50% HSL lightness can look very different in brightness depending on the hue). Modern CSS supports `oklch()` directly, and it's used for building color palettes with predictable perceived contrast.
Is the OKLCH conversion an approximation?
It uses Björn Ottosson's published linear-sRGB↔LMS↔OKLab matrices and the standard sRGB gamma transfer function, the same reference formulas browsers use when implementing CSS Color 4's `oklch()`.
Why do my OKLCH values sometimes not round-trip to the exact same HEX?
OKLCH covers a slightly different, perceptually-based gamut than sRGB, so out-of-range results are clamped back into the visible 0-255 RGB range, and floating-point rounding through several conversion steps can shift a value by roughly ±1 unit. For typical colors this is imperceptible.
Does the native color picker input work on all browsers?
Yes, `<input type="color">` is supported by every modern browser and opens the operating system's or browser's built-in color picker UI.
Is my color data sent anywhere?
No. The conversion math runs in your browser with JavaScript, and none of it leaves your machine.