OKLCH Color Picker

Report an Issue

Help us improve by telling us what went wrong.

Embed this Tool

Customize and copy the embed code for your website.

A Modern Color Picker Built for the OKLCH Color Space

Color on the web has been stuck in the same paradigm for decades. Designers pick hex codes, maybe dabble in HSL, and call it a day. But anyone who has tried to build a consistent color palette knows the dirty secret: HSL and RGB are perceptually uneven. A hue shift of ten degrees in one part of the wheel looks dramatic, while the same shift elsewhere is barely noticeable. That inconsistency makes systematic palette design frustrating and error-prone.

Enter OKLCH. The OKLCH Color Picker on this page gives you direct, intuitive control over a color space that was designed from the ground up to match how humans actually see color. Every step in lightness feels equally bright. Every step in chroma feels equally saturated. And hue rotations are smooth and predictable across the entire spectrum. Once you try building palettes in OKLCH, going back to HSL feels like navigating with a broken compass.

What Exactly Is OKLCH and Why Should You Care?

OKLCH stands for OK Lightness, Chroma, Hue. It is a cylindrical representation of the Oklab color space, which was published by Bjorn Ottosson in 2020 and quickly gained traction among color scientists and CSS specification authors. In fact, CSS Color Level 4 includes native support for the oklch() function, meaning modern browsers can render these values directly without any conversion step.

The practical benefit is simple: when you adjust lightness in OKLCH, only the perceived brightness changes. The color does not shift toward blue or yellow the way it does in HSL. When you crank up chroma, the color gets more vivid without accidentally becoming lighter or darker. This orthogonality makes OKLCH the ideal color model for design systems, where you need predictable relationships between shades, tints, and accent colors.

How to Use This OKLCH Color Picker

The interface is divided into three main controls that map directly to the OKLCH channels. The lightness slider runs from zero (black) to one (white). The chroma slider controls saturation intensity, from zero (completely gray) up to the gamut boundary for the current hue. And the hue wheel lets you rotate through the full 360-degree spectrum with smooth, perceptually uniform steps.

As you adjust any control, the tool updates a live preview swatch and simultaneously outputs the color in multiple formats: oklch(), hex, rgb(), hsl(), and even the raw Oklab coordinates. Copy any value with a single click and paste it straight into your stylesheet, design tool, or component library. There is no signup, no rate limit, and no server round-trip. Everything computes instantly in your browser.

Building Accessible Palettes with Perceptual Uniformity

Accessibility is not optional anymore, and contrast ratios are at the heart of WCAG compliance. The problem with traditional color models is that two colors can have the same HSL lightness yet wildly different perceived brightness. That makes it nearly impossible to guarantee contrast programmatically.

With OKLCH, lightness is perceived brightness. If your background has a lightness of 0.95 and your text has a lightness of 0.25, you know the contrast will be strong regardless of hue. This OKLCH color picker makes it trivial to build entire shade scales where every step maintains a reliable contrast relationship with its neighbors. Design tokens generated this way are more robust and require fewer manual overrides.

Comparing OKLCH to HSL, LCH, and Lab

You might wonder how OKLCH differs from the older CIE LCH color space, which also claims perceptual uniformity. The answer is that CIE LCH, while better than HSL, still has noticeable hue shifts in the blue-purple region when you change lightness. Oklab and OKLCH correct this by using an improved transform matrix that keeps hue stable across the entire lightness range. The improvement is subtle in theory but very visible in practice when you are generating ten-step shade ramps.

Compared to plain Lab or Oklab, OKLCH simply wraps the same math in a cylindrical coordinate system that humans find more intuitive. Thinking in terms of hue angle, saturation amount, and brightness level is natural. Thinking in terms of a/b opponent channels is not, unless you are a color scientist.

Real-World Use Cases

Frontend developers building Tailwind CSS custom themes can generate an entire color scale by fixing a hue, choosing a chroma, and stepping lightness from 0.97 down to 0.20. The result is a shade palette where every swatch feels evenly spaced. Brand designers exporting to Figma can use the hex output as a starting point and know that the palette will hold up when applied to UI components at different sizes and contexts.

Data visualisation engineers use OKLCH to create categorical color sets where every color is equally prominent. Because chroma and lightness are decoupled, you can keep them constant and rotate only hue, producing a set of colors that are maximally distinguishable without any one color dominating the chart. This is something that is almost impossible to achieve reliably in HSL.

No Installation, No Dependencies

This OKLCH color picker runs entirely in your browser as a self-contained tool. There is nothing to install, no Node package to add to your project, and no cloud service to authenticate against. Open the page, tweak the sliders, copy the value, and get back to work. It is the fastest path from a color idea to a production-ready CSS value, and it respects the modern color space that the web platform is moving toward.