Color Converter & Gamut Mapper (OKLCH, Lab, P3)

What it is for

Modern CSS lets you write colors as oklch(), lab() or color(display-p3 …), but design files, brand sheets and older code still speak HEX and RGB. This converter takes one color in any of those notations and shows it in all of them at once: HEX, RGB, HSL, HWB, CIELAB and LCH (with the D50 white CSS uses), OKLab, OKLCH, Display P3 and CIE XYZ.

It also answers the question the other converters skip: what happens when a color does not fit on an ordinary screen? Vivid OKLCH and P3 colors often lie outside sRGB. The tool tells you whether the color is inside the sRGB and Display P3 gamuts and gives the HEX that a browser following CSS Color 4 would show, next to the cruder clipped value. Finally it lists the nearest of the 148 CSS named colors and the WCAG contrast against white and black.

It does not handle CMYK, ICC profiles or paint and print libraries.

Worked example

Enter hsl(330 100% 40%) and ask for three named colors. The tool answers that the color is #CC0066 in sRGB and oklch(0.5457 0.2203 2.11) in OKLCH. It is inside both gamuts. The table gives lab(44.58 70.91 4.39), lch(44.58 71.04 3.54) and color(display-p3 0.7331 0.1519 0.3977). Contrast is 5.59:1 against white and 3.76:1 against black, so white text on this magenta passes WCAG AA for normal text. The closest named color is mediumvioletred at ΔE2000 7.53 — noticeably different, so the name is a description, not a match.

Now try color(display-p3 0 1 0), the greenest green a P3 display can show. The tool warns that it is outside sRGB: the gamut-mapped HEX is #00FB29, while plain clipping would give #00FF00. Gamut mapping keeps the OKLCH lightness and hue and only reduces chroma until the result is within one just-noticeable difference of the clipped color, so the fallback looks like the same green, just less intense. The nearest named color is lime (ΔE2000 5.21).

How to read the result

• HEX (sRGB) is what to use as a fallback or in tools that only accept HEX. For out-of-gamut input it is the CSS gamut-mapped value; RGB, HSL, HWB and the contrast ratios describe this mapped color.
• Inside sRGB / Inside Display P3 tell you whether the color survives unchanged on standard and wide-gamut screens.
• The color spaces table gives ready-to-paste CSS values. Lab and OKLab values are of the original color, so you can round-trip a P3 color without losing it.
• Nearest CSS named colors are ranked by CIEDE2000. Below about 1 they look identical; above 5 the name is only a rough family.

Tips and common mistakes

• Use OKLCH for edits: change only L to get lighter or darker versions with the same hue.
• lab() in CSS uses the D50 white. Lab values from Photoshop or a spectrophotometer set to D65 will not match.
• Achromatic colors such as #808080 have no hue; the tool writes none, which is valid CSS.
• Eight-digit HEX and / 50% alpha are kept in the CSS values, but contrast assumes an opaque color.
• Gamut mapping is not clipping. If the mapped and clipped HEX differ a lot, design with the mapped one.

FAQ

Why is my OKLCH color shown with a different HEX in another tool?

Many converters clip each RGB channel to 0–255, which can shift hue. This tool uses the CSS Color 4 algorithm, so its HEX matches what browsers aim to render.

Which named color list is used?

The 148 CSS named colors from CSS Color Level 4. Synonyms such as gray and grey share one value.

Can I paste a P3 color from a design tool?

Yes, as color(display-p3 r g b) with channels from 0 to 1. The tool converts it exactly.

Is the OKLCH lightness the same as HSL lightness?

No. OKLCH lightness follows perceived brightness, so yellow and blue at the same L really look equally light; HSL does not.