OKLCH Color Editor

How to use it

1. Drag the lightness L slider from 0 (black) to 1 (white), the chroma C slider from gray to vivid, and the hue H slider around the wheel.
2. Use the alpha slider when the color should be translucent; it is written into the oklch() string as a slash value.
3. Watch the preview swatch and read the CSS, Hex and RGB outputs; the sample text color flips for contrast.
4. Press Generate CSS and copy the oklch() declaration plus its sRGB fallbacks.

Common use cases

• Accessible palettes - hold lightness constant and rotate hue, so every color keeps comparable contrast.
• Gradient smoothing - pick colors with the same L for gradients that stay even, unlike HSL.
• Design tokens - write one oklch() declaration with hex and rgb fallbacks for a component library.
• Wide gamut checks - see where a vivid color leaves the sRGB gamut and gets clipped.

Why it stays private

The editor is plain client-side JavaScript: sliders feed a fixed matrix conversion and a gamut check, all rendered locally. No color values are sent anywhere, and the tool works offline.

FAQ

Q: How is OKLCH different from HSL? A: OKLCH is perceptually uniform: the same L change looks like the same lightness change for every hue, while in HSL yellow always appears far brighter than blue at the same lightness.

Q: What does the gamut warning mean? A: The chroma you picked cannot be reproduced inside sRGB, so the preview reduces it to the closest reproducible color. The oklch() string still declares your values, and a Display P3 screen shows the full color.

Q: Is oklch() safe to ship? A: Current browsers support the CSS Color 4 function directly, and the tool outputs hex and rgb fallbacks for older engines or tools that expect sRGB only.

Q: What do the L, C and H letters stand for? A: Lightness from 0 to 1, chroma as colorfulness from 0 up, and hue as the angle in degrees. The conversion to sRGB runs through the OKLab matrix defined with the color space.