OKLCH Color Picker
Pick colors in OKLCH space with lightness, chroma, and hue sliders. See P3 and sRGB gamut boundaries live.
Why OKLCH Beats HSL for Real Design Work
HSL has been the go-to non-RGB color space for CSS for over a decade, but it has a quiet problem: equal numerical steps do not feel equal to the human eye. A 10-point lightness jump on a yellow looks much smaller than the same jump on a blue, which is why HSL-generated palettes always need hand-correction in the middle stops. OKLCH fixes this by replacing HSL with a perceptually uniform space. Equal lightness numbers in OKLCH look equally bright across every hue, equal chroma values look equally saturated, and the hue wheel matches how people actually describe color shifts. The space is now native in every modern browser through the CSS oklch() function, which means a value you pick here will render in your CSS without any conversion. The result for designers is fewer hand-tuned palette stops, cleaner brand systems, and predictable behavior across hues. The result for developers is a color format that finally maps cleanly to design tokens and shade scales without the muddy midpoints HSL is known for.
How to Use This OKLCH Picker
Drag the lightness slider to move from black at 0 to white at 1, the chroma slider to move from gray at 0 to maximum colorfulness at roughly 0.4, and the hue slider for the full 360-degree wheel. The live preview swatch updates instantly and the CSS string at the bottom is ready to copy into a stylesheet. Two gamut indicators sit next to the swatch. sRGB is the standard color space every browser and monitor supports, while Display P3 covers a wider range of saturated colors that modern phones, tablets, and most recent laptops can show. When a color falls outside one of these gamuts the corresponding badge turns red and the browser will clip the color when rendering. Pull the chroma slider down until both badges turn green for a value that displays consistently everywhere, or accept the warning and let modern displays show the richer color while older displays fall back gracefully. The tool also outputs the same color in HEX, RGB, and HSL so you can drop it into any workflow that has not adopted OKLCH yet.
Building Shade Scales the OKLCH Way
One of the practical wins from working in OKLCH is the way it transforms shade-scale generation. The traditional HSL approach steps lightness from 95 down to 5 at fixed increments and accepts that the result needs hand-correction at the middle stops, especially for yellow and orange where HSL lightness loses fidelity quickly. The OKLCH approach steps lightness from 0.98 down to 0.18 at the same increments and produces a scale that looks evenly distributed across every hue without any hand-correction. Pick a 500-stop brand color in this picker, then read off the OKLCH lightness value (usually around 0.55 for a vivid mid-tone). To generate the rest of the scale, hold hue and chroma constant and step lightness toward 0.98 for the lighter stops and toward 0.18 for the darker stops. The numerical values match the Tailwind v4 OKLCH convention; the Tailwind v4 OKLCH Palette tool automates this with the canonical 11-stop spacing. The picker is the workbench for designing the 500 stop; the palette generator is the production line for the rest of the scale.
Frequently Asked Questions
What is OKLCH and why does it matter?+
OKLCH stands for Oklab Lightness Chroma Hue, a color space published by Bjorn Ottosson in 2020 that is perceptually uniform across every hue. CSS Color Module Level 4 added native browser support through the oklch() function, which means equal numerical steps look equally different to the human eye. This is the property HSL never had, and it is why design systems like Tailwind v4 and Radix Themes moved to OKLCH for their shade scales.
Which browsers support oklch() in CSS?+
Every major browser has shipped oklch() support: Chrome and Edge 111 and later, Safari 15.4 and later, and Firefox 113 and later. Together that covers more than 95 percent of users worldwide. For older browsers, the tool also outputs HEX and RGB fallbacks so you can layer them in a CSS @supports query if you need to.
What does the chroma slider actually do?+
Chroma is the OKLCH equivalent of saturation, but unlike HSL saturation it is not capped at 100. The maximum usable chroma depends on the hue and lightness: yellows can hit roughly 0.21 in sRGB, blues can reach about 0.31, and most colors live below 0.15. The slider goes up to 0.4 so you can explore the full Display P3 range; the gamut badges warn you when a chroma value falls outside the device space.
Why does the gamut warning sometimes turn red?+
It turns red when the OKLCH value you picked describes a color too saturated for the named gamut to display. The browser will silently clip the color back into gamut when rendering, which usually means it becomes slightly less saturated and slightly different in hue. Picking values where the sRGB badge stays green guarantees consistent results across every screen; accepting a P3-only color trades that consistency for richer saturation on modern displays.
How is OKLCH different from LAB and LCH?+
Older LAB and LCH are based on the CIE 1976 model, which gets the perceptual uniformity roughly right for grays and pastels but breaks down for saturated colors, especially in the blue region. OKLab and OKLCH use a more recent model fitted to broader perceptual data, and the result is noticeably better behavior for purples, blues, and saturated brand colors. OKLCH is the recommended choice for new design system work; legacy LCH stays available in CSS for backwards compatibility.
Can I paste a HEX color and edit it in OKLCH?+
Yes. Type or paste any HEX, RGB, or HSL value into the input at the top and the sliders snap to the OKLCH equivalent. From there you can nudge lightness or chroma without touching the hue, which is the workflow that makes OKLCH genuinely faster than hand-mixing in HSL for shade and tint generation.
Why does my OKLCH color look different in two browsers?+
Two reasons. First, the gamut clipping behavior varies slightly across browser engines, especially for colors at the edge of Display P3. Second, the underlying display matters more than the browser: an OLED phone shows P3 colors faithfully, a standard sRGB laptop monitor clips them. The gamut indicators in this tool flag both cases so you can decide whether to dial the chroma down or accept the variance.
Does the picker run entirely in my browser?+
Yes. All color math happens locally using the culori library, which is MIT-licensed and pinned at version 4.0.2. Nothing about the color you pick is sent to any server. You can confirm by opening the browser developer tools network tab, picking a color, and watching for zero outbound requests after the initial page load.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service