Color Space Converter
Convert between HEX, OKLCH, OKLAB, LAB, LCH, HWB, and Display P3. The modern CSS Color Level 4 converter.
Modern CSS Has Six New Color Spaces You Have Not Used Yet
The classic Color Converter on this site handles HEX, RGB, HSL, HSB, and CMYK, the formats designers have used for years. CSS Color Module Level 4 ships six additional spaces that browsers support today and that the older converter does not cover: OKLCH and OKLab for perceptual uniformity, LCH and LAB for the legacy CIE 1976 model, HWB for an intuitive Hue Whiteness Blackness layout, and Display P3 for the wider gamut on modern phones and laptops. Each space exists for a reason. OKLCH is the modern choice for design system shade scales because equal numerical steps look equally different to the human eye. LAB and LCH still appear in print workflows and color-management tooling that has not migrated to Oklab. HWB is the easiest space to teach because it matches the way artists describe mixing paint with white or black. Display P3 is the format you reach for when you specifically want richer saturation on capable screens and accept a graceful fallback on older ones.
Round-Trip Accuracy and the Gamut Question
Every conversion in this tool runs through culori, an MIT-licensed JavaScript color library that implements the math in the CSS Color Level 4 specification directly. Round-trip accuracy is preserved to several decimal places, which matters when you are layering small perceptual adjustments and do not want the conversion itself to introduce drift. The deeper question with any color converter is what to do when a value cannot be represented exactly in the target space. Display P3 covers more saturation than sRGB, so converting an in-gamut P3 color to HEX clips it; this tool shows the gamut status next to each output so you can decide whether to accept the clipping or pick a different source. For round-trips between OKLCH, OKLab, LCH, LAB, and HWB the conversion is mathematically lossless within the working gamut and the displayed values will reverse back to the original.
When to Reach for Each Format
Reach for OKLCH and OKLab on any new design system work where you need predictable shade and tint scales without hand-correction. Reach for LCH or LAB when integrating with print pipelines or older color-management software that has not adopted Oklab yet. Reach for HWB when you want a space your team can read at a glance without training, since hwb(220 10% 20%) is genuinely intuitive. Reach for Display P3 when shipping product or marketing pages targeted at iPhone, iPad, and recent MacBook viewers, paired with a sRGB fallback. The classic Color Converter remains the right tool for HEX, RGB, HSL, HSB, and CMYK conversions; this converter is the modern companion for the CSS Color Level 4 additions. A common workflow that uses both: design in HSB in Figma, paste the resulting HEX into the classic converter to read the RGB and HSL equivalents for older CSS workflows, then paste the same HEX into this converter to read the OKLCH equivalent for a Tailwind v4 design token. The three values describe the same color from three different perspectives and each is useful in the right tool.
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools