OKLCH color picker
Edit color the way perception works: perceptual lightness (L), chroma (C) and hue (H). Every value maps to CSS oklch() with automatic sRGB gamut mapping.
Loading…
Need every format at once? Open the universal color picker →
FAQ
What is OKLCH?
OKLCH is the polar form of OKLab (Björn Ottosson, 2020): L is perceptual lightness (0–100%), C is chroma (colorfulness), H is the hue angle. Equal steps look equal, which makes scales and gradients even by construction.
What is gamut mapping?
Some OKLCH triples cannot exist in sRGB (they are too saturated for the screen). CSS (and this picker) reduce chroma while keeping L and H fixed until the color fits — so your intended hue survives.
Can I use oklch() in CSS today?
Yes — the syntax is supported in all current evergreen browsers, and CSS supports gradients interpolated in OKLCH (in oklch). Provide a HEX fallback for very old clients if you must.
How do I make a Tailwind-style ramp in OKLCH?
Use the Design System Generator: it builds a 50–950 ramp with OKLCH lightness steps, chroma easing and gamut-safe output, then exports CSS variables, Tailwind config and W3C tokens.
Related tools
Universal picker — HEX, RGB, HSL, HSV, OKLCH and CMYK in one place, with an eyedropper.
HSL Color PickerHue, saturation and lightness sliders with instant HEX/RGB values.
Design System GeneratorBrand color to a full 50–950 OKLCH ramp, semantic roles, states and token exports.
HEX Color PickerPick a color and read it as a HEX code — sliders, native picker and instant copy.