b2KIT

LCH / OKLCH Color Converter

Convert between LCH, OKLCH, and RGB color spaces used in modern CSS specifications.

Tested tool guide Tested browser tools Checked August 16, 2026

What LCH / OKLCH Color Converter does and how it behaves

Enter an LCH, OKLCH, or RGB color to obtain the corresponding coordinates in the other two spaces. LCH is the cylindrical form of CIE Lab used by CSS lch(), while OKLCH is the cylindrical form of OKLab used by CSS oklch(); RGB here is the CSS sRGB model. The common surprise is that the LCH and OKLCH labels do not make their numbers interchangeable. A conversion can also expose colors that sRGB cannot represent exactly, so a plausible RGB triplet is not automatically a lossless equivalent.

How the result is produced

1

Polar color coordinates

In each cylindrical space, lightness is L, distance from neutral is C, and angular direction around the opponent-color axes is h. Chroma and hue correspond to Cartesian components through a = C cos(h) and b = C sin(h). LCH applies this geometry to CIE Lab; OKLCH applies it to OKLab. Because the underlying spaces differ, converting between them requires transforming the color, not relabeling the same values.

2

RGB conversion and gamut

CSS rgb() represents nonlinear sRGB channel values. Moving between RGB and either perceptual space involves the defined sRGB transfer curve and colorimetric transformations; LCH's Lab basis uses a D50 reference white, while OKLCH's OKLab basis uses D65. That reference-white difference is part of the conversion. If the resulting color lies outside the sRGB gamut, no ordinary in-range RGB triplet is an exact match.

Good uses

  • Convert a designer's lch() color token to RGB when checking an sRGB-only asset, stylesheet fallback, screenshot annotation, or system that stores three RGB channels.
  • Translate an existing RGB brand color into OKLCH before building lightness or chroma variations, while retaining a numeric reference to the original sRGB color.
  • Compare an LCH palette with an OKLCH palette when migrating CSS variables, especially where copied L, C, and h values produce visibly different swatches.

Limits and checks

  • Do not compare the raw L, C, and h numbers as though the spaces shared scales. LCH and OKLCH define those coordinates in different underlying models, and the same tuple normally identifies two different colors.
  • Check whether the converted color is inside the sRGB gamut. An out-of-gamut source cannot be represented exactly by ordinary RGB channels; clamping or gamut mapping changes the color, and an integer RGB result may conceal that difference.
  • Hue is not meaningful at zero chroma and becomes visually unstable near neutral. A round trip can therefore return a very different hue number for a gray while leaving its appearance effectively unchanged.

Common questions

Why do identical L, C, and h values look different in LCH and OKLCH?

They are polar forms of different Cartesian color spaces. CIE LCH is derived from CIE Lab, while OKLCH is derived from OKLab. Their lightness and opponent axes were defined differently, so chroma and hue do not have one-to-one numeric interpretations across the pair. Convert the complete color and judge the rendered result rather than copying the three components.

Can every LCH or OKLCH color be converted to an exact CSS RGB value?

No. CSS rgb() is confined to sRGB, while valid LCH and OKLCH coordinates can describe colors beyond that gamut. An exact RGB equivalent exists only when the converted color falls within sRGB. Otherwise gamut mapping or clipping is needed, which changes the color. Even in-gamut conversions may differ slightly after decimal or 8-bit channel rounding.

References and verification

The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.

Related Tools