OKLCH color picker online.
Stop using outdated CSS formats. Design with perceptually uniform OKLCH colors, preview wide-gamut palettes, and eliminate clipping errors.
Why use a modern OKLCH color picker?
OKLCH is the future of CSS colors, supporting wide-gamut displays without unexpected shift in lightness. Tweak and copy clean code instantly.
Perceptually uniform
Equal steps in Lightness look equally bright regardless of hue. Yellow at L=0.7 and blue at L=0.7 actually look the same brightness — unlike HSL where they don't.
sRGB gamut boundary
See exactly where standard screen colors end. The chroma slider shows a live boundary marker — drag past it to explore Display P3 and Rec.2020 territory.
CSS-native output
Copy oklch() values directly into your CSS. All modern browsers support it. It's the W3C-recommended color function for CSS Color Level 4.
Better color palettes
Generate harmonies that look balanced because OKLCH respects how humans see color. Complementary, analogous, triadic — all perceptually consistent.
3D gamut visualization
Toggle the experimental 3D view to see the full sRGB gamut as an interactive mesh in OKLCH space. Rotate, zoom, and click to pick colors from the surface.
Free, no install
Runs entirely in your browser with no download, no account, and no watermarks. Just open the page and start mixing OKLCH colors.
Frequently
asked questions
Explore more color tools
Expand your workflow with our other precision color pickers.