Why convert colors to OKLCH?
Unlike RGB and HEX, OKLCH is designed around perceived lightness. Equal changes in lightness or chroma tend to produce more consistent visual steps, which is useful for design tokens, themes and accessible palettes.
color: oklch(58.5% 0.210 277.1);
background: #6366F1; /* sRGB fallback */Understand L, C and H
- L
- Lightness from 0% (black) to 100% (white).
- C
- Chroma, or color intensity. Higher values are more vivid.
- H
- Hue angle from 0 to 360 degrees.
OKLCH converter FAQ
What is OKLCH?
OKLCH is a perceptual CSS color space. L controls lightness, C controls chroma and H controls hue, making systematic palettes easier to build.
Can CSS use OKLCH directly?
Modern CSS supports the oklch() color function. A HEX fallback can still help when a workflow or older environment only accepts sRGB.
Why can an OKLCH color be outside sRGB?
OKLCH can describe colors beyond the smaller sRGB gamut. When that happens, this converter reports it and provides a clipped HEX fallback.