Modern CSS Colour Syntax Converter
Convert any colour between hex, rgb(), hsl(), hwb(), lab(), lch(), oklab() and oklch(). Edit any row and the rest follow.
About this tool
oklch() is OKLab's newer perceptually-uniform colour space (designed in 2020) expressed in lightness/chroma/hue form — not the same maths as the older CIE Lab/LCH (see the separate LAB/LCH Colour Converter for that). Equal numeric steps in OKLCH look like more equal visual steps than in RGB or HSL, which is why it's increasingly used for generating consistent CSS colour scales. Supported in all current major browsers.
Every row is editable. Paste an oklch() value from a design system and get the hex fallback, or paste a hex and get the oklch() to build a scale from. Lab and LCH use the CSS D50 white point, matching browsers. Some oklch colours, especially vivid ones, can’t be shown on a standard sRGB screen; when that happens the tool maps them to the nearest displayable colour, the same way the CSS specification tells browsers to, and says so.