Loading…
Loading…
The modern perceptually uniform color space. Pick, convert, and generate palettes in OKLCH.
oklch(75.0% 0.1500 300.0)#bd96fergb(189, 150, 254)hsl(263, 98%, 79%)color: oklch(75.0% 0.1500 300.0);color: rgb(189, 150, 254);#bd96fe
300°
#a2bb40
120°
OKLCH maintains perceptual uniformity — colors with the same lightness actually look equally bright.
OKLCH — L: 70%, C: 0.15
HSL — S: 70%, L: 60%
Notice how OKLCH colors appear evenly bright, while HSL varies wildly (yellow appears much brighter than blue).
Common questions about the OKLCH Color Picker.
OKLCH is a perceptually uniform color space where equal numeric changes produce equal perceived changes in color. Unlike HSL, where lightness 50% looks different across hues, OKLCH keeps perceived lightness consistent — making it ideal for design systems and accessible palettes.
Yes — oklch() is supported in all modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+). Use it directly in CSS: color: oklch(70% 0.15 200). For older browser support, provide an HSL or HEX fallback.
OKLCH can describe colors outside the sRGB gamut that most displays show. When you pick a high-chroma color, the browser clamps it to the nearest displayable color. This tool shows gamut warnings so you know when a color won't render exactly as specified.
Keep the L (lightness) value constant and vary only the H (hue) component. For example, oklch(65% 0.15 0) through oklch(65% 0.15 360) gives you a full hue wheel where every color looks equally bright — impossible to achieve with HSL.