OKLCH Color Picker
Pick colors the way you see them. Lightness, chroma and hue behave independently, so small adjustments do exactly what you expect.
oklch(0.7971 0.1339 211.53)
sRGB
Color value
Lightness0.797
Chroma0.134
Hue211.53°
Light Cyan
CyanClosest CSS keyword: darkturquoise · nearest Tailwind shade: cyan-400
Instant 50–950 scale
Open in scale generator →Three channels, no surprises
L is perceptual lightness from 0 (black) to 1 (white). C is chroma — how far the color sits from grey. H is hue in degrees, with red near 30°, green near 145° and blue near 265°.
Working with gamut limits
Not every L/C/H combination exists on a screen: a very light color cannot also be very colorful. When the picker reports Display-P3 or Rec.2020 you are asking for more chroma than sRGB can render, and the HEX shown is the clamped equivalent.
Frequently asked questions
- What makes an OKLCH color picker different?
- Its three sliders map to lightness, chroma and hue as the eye perceives them. Dragging lightness does not change how colorful a swatch looks, and dragging hue does not change how bright it looks — which is not true of an HSL picker.
- What is chroma and how high can it go?
- Chroma is colorfulness with no upper bound in theory. In practice sRGB tops out near 0.37 for the most saturated hues and much lower for others, so the picker flags when a value leaves the sRGB gamut.
- Can I pick colors outside sRGB?
- Yes. Raise chroma past the sRGB boundary and the badge switches to Display-P3 or Rec.2020. Those colors look richer on modern hardware and are automatically clamped for older screens.