OKLCH Converter
Convert colors between Hex, RGB, HSL, and OKLCH formats.
Input
hex, rgb(), hsl(), oklch(), named colors
Preview
Outside sRGB
OKLCH Values
Output Formats
#6366f1 rgb(99, 102, 241) hsl(239, 84%, 67%) oklch(0.55 0.24 264) --color-primary: oklch(0.55 0.24 264); What is OKLCH?
OKLCH describes a color with three perceptually meaningful numbers: lightness (L, roughly 0 to 1), chroma (C, how saturated the color is), and hue (H, an angle from 0 to 360 degrees). Because the space is built to match how humans actually perceive brightness, it replaces the guesswork of RGB and HSL with values you can reason about directly.
That perceptual accuracy is the whole point. In HSL, two colors with the same lightness value can look wildly different in brightness — push a yellow and a blue to the same L and the yellow will visibly outshine the blue. OKLCH doesn't have that problem: matching L values produce colors that genuinely read as equally light, which makes building tints, shades, and accessible color scales far more predictable.
OKLCH also unlocks colors outside the sRGB gamut that hex and
rgb() simply cannot express, including the vivid,
wide-gamut shades visible on modern P3 displays. Support has landed
in every major engine — Chrome 111+, Safari 16.4+, and Firefox
113+ — so it's safe to use in production today.
FAQ
What do the L, C, and H values in OKLCH mean?
L is lightness on a 0-to-1 scale, C is chroma (how saturated or intense the color is, typically 0 to around 0.4), and H is the hue angle in degrees, same as in HSL. Together they describe a color the way your eyes actually perceive it.
Why use OKLCH instead of HSL?
HSL's lightness value is not perceptually consistent — a yellow and a blue set to the same 50% lightness will look nothing alike in brightness. OKLCH fixes this: equal L values genuinely look equally light, which makes generating palettes, tints, and shades far more predictable.
What does "outside sRGB" or "out of P3 gamut" mean?
Standard monitors and hex/rgb() colors are limited to the sRGB gamut. OKLCH can describe colors beyond that range, including the wider gamut visible on P3 displays (most modern phones and Macs). When a color falls outside what the current display can show, this tool clamps it to the nearest displayable value and flags it.
Which browsers support OKLCH?
All major engines support it: Chrome 111+, Safari 16.4+, and Firefox 113+. Those are the current baseline versions for the vast majority of visitors, so OKLCH is safe to ship in production CSS today.