OKLCH Color Converter

OKLCH (Lightness-Chroma-Hue) is a modern colour space introduced by Björn Ottosson in 2020. It is part of CSS Color Level 4 and is designed to be perceptually uniform - meaning that equal numerical changes in OKLCH values produce equal perceived colour differences. This is a significant improvement over older colour spaces like HSL and sRGB, which are not perceptually uniform and can produce inconsistent visual results when interpolating colours.

The OKLCH converter supports the full OKLCH pipeline: it converts between OKLCH, OKLab (the underlying rectangular coordinate space), linear sRGB, and standard sRGB formats including HEX, RGB, and HSL. All conversions use Ottosson's exact matrix mathematics with no approximations.

1. Adjust the OKLCH sliders: Set Lightness (L: 0-1), Chroma (C: 0-0.4+), and Hue (H: 0-360°) using the interactive sliders or numeric inputs. You can also click any sample colour chip to instantly load a preset OKLCH value. Alpha transparency is supported for semi-transparent colours.
2. Conversion runs in real time: As you adjust any slider, the OKLCH value is converted through OKLab to linear sRGB and then to HEX, RGB, and HSL formats. All values update instantly with no button to press. The colour swatch shows a visual preview of the converted colour.
3. Gamut check performed automatically: The OKLCH converter automatically detects if the colour falls outside the sRGB gamut. If it does, a warning is displayed along with the closest in-gamut colour achieved by reducing chroma while keeping lightness and hue constant.
4. Copy any value:Click the Copy button next to any output row or format card to copy that specific value, or use “Copy All Values” to copy the complete colour data including the raw OKLab components.

• Lightness (L): Ranges from 0 (black) to 1 (white). Unlike HSL lightness, OKLCH lightness closely matches human perception. A lightness of 0.5 looks visually halfway between black and white, regardless of the hue or chroma.
• Chroma (C): Controls colour intensity or saturation. Most sRGB colours have chroma values between 0 and 0.25, though some deep purples and cyans can reach up to 0.3. Values above 0.3 are increasingly likely to be outside the sRGB gamut. The theoretical maximum for OKLCH chroma is unbounded.
• Hue (H): The colour angle from 0-360 degrees, matching the same hue angles as OKLab. 0° = red/pink, 90° = yellow, 180° = green, 270° = blue. OKLCH hues are perceptually uniform - equal angular steps produce equal perceived hue differences.
• Alpha (A): Controls transparency from 0 (fully transparent) to 1 (fully opaque). The alpha value is passed through the conversion pipeline to all output formats, so you can use the resulting colour in any CSS context that requires transparency.

OKLCH vs HSL: HSL is not perceptually uniform - two colours with the same HSL lightness can look dramatically different in brightness (e.g., yellow at L=50% looks much brighter than blue at L=50%). OKLCH fixes this fundamental issue. HSL also produces muddy midpoints when interpolating between two colours, while OKLCH gradients maintain consistent saturation and visual quality.

OKLCH vs LCH: LCH (CIE L*a*b* based) has been available in CSS for longer but has a significant flaw - it can produce invalid colours when measuring hue linearity. OKLCH was specifically designed to be more robust and to better represent how the human visual system perceives colour. Both are supported in modern CSS, but OKLCH is the recommended choice for new projects.

OKLCH vs sRGB: sRGB is the standard colour space for web content but is device-dependent and not perceptually uniform. OKLCH is a device-independent colour space that can represent colours outside the sRGB gamut (wide-gamut displays). The OKLCH converter helps you understand when your colours exceed sRGB and shows you the closest in-gamut alternative.