OKLCH Color Picker

OKLCH is a modern CSS color space that is perceptually uniform — equal numeric changes produce equal perceived differences in color. It uses Lightness (0–100%), Chroma (color vividness), and Hue (0–360° angle on the color wheel). It's supported in all modern browsers via the oklch() CSS function.

Display P3 is a wide-gamut color space used by modern Apple displays, high-end Android phones, and most new monitors. It can show about 25% more colors than sRGB. When your OKLCH color falls outside sRGB, P3-capable browsers will render the richer version automatically using color(display-p3 ...).

HSL and HEX are tied to the sRGB gamut and are not perceptually uniform — two colors with the same 'saturation' can look very different. OKLCH fixes this: changing L by 10 always looks like the same brightness shift regardless of hue. This makes it ideal for design systems, accessible color palettes, and smooth gradients.

Chroma (C) controls color vividness — how far the color is from gray. A value of 0 produces a neutral gray at the chosen lightness. Higher values produce more vivid colors. The maximum useful chroma varies by hue and lightness; very high chroma may fall outside the sRGB gamut.

All modern browsers (Chrome 111+, Safari 15.4+, Firefox 113+) support oklch() natively. You can write: background: oklch(55.8% 0.228 264). For older browsers, include a hex fallback above the oklch() declaration.