Loading…
Loading…
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.
Every editor writes to the same color — switch tabs without losing sync.
Out-of-gamut values are chroma-mapped into sRGB (same as CSS oklch()): hue and lightness stay fixed, chroma reduces until it fits.
WCAG contrast of this color used as text on white and on black.
Need every format at once? Open the universal color picker →
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.
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.
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.
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.
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.