About OKLCH and HSL

OKLCH is the perceptual color space from CSS Color 4 — lightness, chroma, and hue that track how colors actually look. Equal lightness values appear equally bright, which makes it the best base for design systems and generated palettes. Every modern browser supports it.

HSL describes a color by hue (0–360 on the color wheel), saturation, and lightness. It's easier to reason about than raw channels — rotating a hue or dimming a color is a single number change — which makes it popular for theming.

For example, oklch(0.541 0.247 293) in OKLCH is hsl(262, 83%, 58%) in HSL. Paste your own value above — conversion is instant, runs entirely in your browser, and carries alpha through when your color has one.