🎨 OKLCH Color Converter & Picker
Convert and pick OKLCH colors online with HEX, RGB, HSL output and sRGB / Display-P3 gamut checks.
About this tool
OKLCH is a perceptual color space from CSS Color Level 4, written as oklch(L C H): L is lightness from 0 (black) to 1 (white), C is chroma (colorfulness, roughly 0–0.37 for visible colors), and H is the hue angle in degrees. Because the lightness axis is tuned to human vision, an equal step in L looks like an equal step everywhere on the wheel — so you can build palettes and dark-mode variants by nudging one number instead of hand-tuning every shade.
Drag the L, C, and H sliders to design a color, or paste an existing value — an oklch() string, a #hex, rgb(), hsl(), or a CSS color name — into the parse box to convert it. Every format updates live, and the native color picker stays in sync.
The preview badge tells you the gamut: whether the color fits inside standard sRGB, only inside wider Display-P3 (modern phones and laptops), or falls outside both. High-chroma OKLCH colors often leave sRGB, so the Clamp to sRGB button lowers chroma just enough to bring the color back in range while keeping the same lightness and hue.
Example: oklch(0.6 0.15 260) converts to #5b73d6 = rgb(91, 115, 214). Push chroma to oklch(0.7 0.3 150) and the badge flips to Display-P3 — a vivid green that sRGB screens cannot show. For general-purpose conversion between HEX, RGB, HSL, and named CSS colors with WCAG contrast checking, see the Color Converter.
FAQ
What do L, C, and H mean in OKLCH? ›
L is perceptual lightness from 0 to 1, C is chroma (how colorful, from 0 for gray up to about 0.37), and H is the hue angle in degrees from 0 to 360. Unlike HSL, OKLCH lightness matches what the eye sees, so equal L steps look equally spaced.
Why is my color outside the sRGB gamut? ›
OKLCH can describe more saturated colors than the sRGB space used by older screens. When chroma is high the color may only exist in Display-P3 or beyond. Use the Clamp to sRGB button to reduce chroma until it fits, keeping the same lightness and hue.
What is the difference between OKLCH and HSL? ›
Both are cylindrical (lightness/colorfulness/hue), but HSL is derived directly from sRGB and its lightness is perceptually uneven — the same L can look very different across hues. OKLCH is built on the Oklab model, so lightness and hue behave consistently, which makes it far better for generating palettes.
Do all browsers support the oklch() CSS function? ›
Yes. oklch() is supported in all current versions of Chrome, Edge, Safari, and Firefox. For very old browsers you can provide a HEX or RGB fallback, both of which this tool generates for you.