OKLCH Color Picker
Pick and refine colors directly in OKLCH, with live gamut and contrast readouts.
Recent
sRGB
Boundaries
oklch(0.623 0.188 259.81)
#3b82f6
HEX
#3b82f6RGB
rgb(23.137% 50.98% 96.471%)HSL
hsl(217 91.2% 59.8%)OKLAB
oklab(62.3% -0.033 -0.185)Display P3
color(display-p3 0.305 0.503 0.934)Gamut
sRGBIn gamutP3In gamutRec.2020In gamut
Contrast (WCAG 2.1)
on white3.68:1AA Largeon black5.71:1AA
Edit in perceptual space
The plane maps chroma horizontally and lightness vertically at the current hue. Keyboard users can focus it and nudge with arrow keys; every slider also has a numeric input and announces its value.
Frequently asked questions
What makes an OKLCH picker different?
You edit Lightness, Chroma and Hue directly. Because the space is perceptual, dragging lightness changes only how light the color looks, not its hue.
How do I check if a color is displayable?
The gamut panel shows sRGB, P3 and Rec.2020 membership, and the plane dims colors that fall outside sRGB.