OKLCH Color Picker

Why use OKLCH?

OKLCH is a modern CSS color space that gives web developers access to high-definition, wide-gamut colors (like Display P3) while being very predictable to work with. It fixes the long-standing flaws of older color models like HSL and RGB.

Here's how it works:

• L is for Lightness (0% to 100%): This controls how dark or bright a color is. Try this: Set the Lightness slider to 70%, then drag the Hue slider all the way across the spectrum. Notice how every single color feels equally bright? In older formats like HSL, a yellow hue appears drastically brighter than a blue hue at the exact same lightness level. OKLCH is "perceptually uniform," meaning it perfectly matches how human eyes perceive brightness.
• C is for Chroma (Amount of color): This is the intensity or purity of the color. Try this: Drop the Chroma slider down to 0 and you will get a pure, neutral gray. Push it to the right, and the color becomes vividly saturated. Notice the warning? If you push the Chroma too high, you might see the yellow "out of sRGB gamut" warning appear. This means you've created a color so vibrant that it can only be displayed on modern wide-gamut monitors (like Apple displays or modern OLEDs).
• H is for Hue (0 to 360): This is the actual color angle on a 360-degree wheel, similar to HSL. Try this: Click and drag your mouse around the 2D canvas box. You are adjusting Lightness (up and down) and Chroma (left and right) simultaneously, while the Hue remains locked.

The Importance of the Fallback

Because OKLCH can define ultra-vibrant colors outside the standard sRGB spectrum, older browsers or standard monitors might not know how to render them. When you select an out-of-gamut color, our tool automatically calculates the closest possible sRGB hex code. By copying the Combined CSS Rule, you ensure that modern devices get the brilliant P3 color, while older devices gracefully fall back to the nearest standard color.