OKLCH Color Explorer

OKLCH Color Space Overview

OKLCH is a perceptually-based modern color space: L (lightness), C (chroma), H (hue). Compared to RGB/HSL, hue stays more consistent when changing lightness, and gradients align better with human perception; it also supports a wider gamut.

This tool converts between OKLCH and HEX/RGB and lets you adjust L, C, and H to explore colors—useful for adopting OKLCH in CSS or design systems for themes and gradients.

How to Use

Enter or Pick a Color

Enter HEX, RGB, or OKLCH, or use a color picker. The tool converts to OKLCH and shows L, C, H and a swatch so you can see what each channel does.

Adjust L / C / H

Use sliders or inputs to change lightness (L), chroma (C), and hue (H). L is typically 0–1; C and H ranges depend on the tool. The swatch and HEX/RGB update as you change values for use in CSS.

Copy and Use

Copy the OKLCH string (e.g. oklch(0.6 0.15 250)) or the converted HEX for CSS. Modern browsers support oklch() for theme variables and gradients.

FAQ

How is OKLCH different from HSL?

OKLCH is based on perceptual modeling; changing L keeps hue more stable and gamut is wider. HSL is simpler but lightness doesn’t match perception as well and is limited to sRGB. OKLCH is a better fit for modern UI and wide-gamut use.

Which browsers support oklch()?

Chrome, Safari, Firefox, Edge and other modern browsers support CSS oklch(). For older browsers, provide HEX fallbacks or use a build-time converter like PostCSS.

What’s a typical range for C and H?

C (chroma) around 0–0.4 is usually safe in sRGB; higher may go out of gamut. H (hue) is often 0–360 degrees, similar in idea to HSL H but values may not match exactly.