OKLCH Color Picker
Edit colors the perceptual way: lightness, chroma and hue sliders with numeric inputs, live sRGB and P3 gamut badges, honest gamut mapping, and OKLCH-built palettes with Tailwind v4 export.
Advanced spaces & developer export
Contrast checker
WCAG contrast applies to the final rendered colors. Transparent foregrounds and backgrounds are composited over the backdrop below, exactly like a browser renders them, before the ratio is calculated.
AA needs 4.5:1 for normal text, 3:1 for large (24px, or 18.5px bold). AAA needs 7:1 and 4.5:1.
Tints, shades & harmonies
Generated in OKLCH (perceptually even lightness steps, constant hue) and gamut-mapped to sRGB. Click any swatch to copy its hex.
Working in OKLCH without surprises
Two habits make OKLCH productive. First, watch the gamut badges while you push chroma: the most vivid representable color varies a lot by hue and lightness, and the badge plus delta-E readout above tells you the moment your value stops surviving the trip to hex. Second, build scales by varying lightness at fixed hue and chroma, which is precisely what the tints and shades below do; the gamut mapper trims chroma near the extremes so every step remains a real sRGB color. When you are done, take the @supports pair from the developer exports so old browsers get your mapped hex and new ones get the exact oklch().
OKLCH picker FAQ
What do L, C and H mean in OKLCH?
Lightness (0% to 100%) is perceived brightness, and unlike HSL it is honest: 70% looks equally bright whether the hue is yellow or blue. Chroma (0 upward, in practice 0 to about 0.37) is colorfulness, where 0 is gray. Hue (0-360) is the angle around the color wheel. The sliders above edit all three plus alpha, with numeric inputs for exact values.
Why is OKLCH replacing HSL for design systems?
Because arithmetic on it matches what eyes see. Build a 10-step scale by decrementing HSL lightness and the steps bunch and jump unevenly per hue; do it in OKLCH and the ramp is visually even for every hue in the palette. Same for hue rotation: OKLCH keeps perceived brightness stable, HSL does not. Tailwind v4 moved its entire default palette to OKLCH for exactly this reason, and this page exports @theme variables for it.
Why does my OKLCH color say "outside sRGB"?
OKLCH can express colors no monitor gamut fully covers, and many that sRGB specifically cannot, especially high-chroma values. The badges show whether your color fits sRGB and Display-P3. When it does not fit sRGB, the hex output is produced by CSS-style gamut mapping (reduce chroma in OKLCH until it fits) and the introduced difference is reported as delta-E, so nothing clips silently.
Which browsers support oklch() in CSS?
All current ones: Chrome and Edge since 111, Safari since 15.4, Firefox since 113, which in 2026 covers effectively all traffic. For long-tail legacy support, ship a hex fallback first and the oklch() value behind @supports; the developer export section above generates exactly that pair.
More free tools: Color Converter · Contrast Checker · HSL to HEX · HEX to RGB · Favicon Generator