Color to OKLCH Converter - Online Perceptually Uniform

OKLCH is a perceptually uniform color space defined in CSS Color Level 4. It expresses colors using three components: L (perceived lightness, 0–1), C (chroma/saturation intensity), and H (hue angle in degrees, 0–360). Unlike HSL, OKLCH ensures that changing lightness produces visually consistent steps, and equal hue angles correspond to perceptually similar colors regardless of lightness or chroma.

HSL suffers from perceptual non-uniformity: colors with the same "Lightness" value in HSL can appear very different in brightness (e.g., HSL yellow at 50% L looks much brighter than HSL blue at 50% L). OKLCH fixes this by using the perceptually uniform OKLab color space as its basis. Additionally, OKLCH hue is more stable — rotating hue doesn't shift perceived brightness, making it ideal for design systems and color generation.

L ranges from 0 (pure black) to 1 (pure white). C typically ranges from 0 (fully unsaturated/gray) to about 0.37–0.40 for sRGB-displayable colors, though OKLCH can represent colors with C > 0.5 that exceed the sRGB gamut. H ranges from 0° to 360°, cycling through the color wheel. For CSS, the syntax is oklch(L C H) or oklch(L C H / alpha).

Yes! OKLCH is supported in all modern browsers: Chrome 111+, Firefox 113+, Safari 15.4+, and Edge 111+. It's part of the CSS Color Level 4 specification. You can use it directly: background: oklch(0.7 0.2 180); or with a fallback for older browsers. For progressive enhancement, declare a fallback color before the OKLCH value.

Converting to OKLCH gives you perceptually meaningful values. Designers can adjust lightness independently without affecting hue perception, create uniform color scales, and generate accessible color palettes. OKLCH also enables better color interpolation — gradients between two OKLCH colors appear smoother and more natural than RGB or HSL interpolation.

OKLCH can represent colors beyond the sRGB color space (the standard range of most screens). When you adjust OKLCH sliders — especially increasing chroma (C) — you may create colors that cannot be accurately displayed on standard monitors. This tool clips such colors to the nearest sRGB-displayable value and shows a warning. These out-of-gamut colors may be visible on wide-gamut displays (like P3 or Rec.2020).

This converter uses the official transformation matrices defined in the CSS Color Level 4 specification (W3C). The conversion chain is: sRGB → linear RGB → LMS → LMS' (cube root) → OKLab → OKLCH (and reverse). Precision is maintained to 64-bit floating point throughout the calculation, ensuring professional-grade accuracy suitable for design and development workflows.