OKLCH Scale Generator

Generate scales in a perceptually uniform color space — every step has truly equal lightness for the eye

Pick Color

Chroma Mode

OKLCH Scale

Click a swatch to view all values; CSS shown below each oklch() Function Value

Compare with HSL Scale

The grayscale row shows perceptual lightness — OKLCH is more even than HSL, proving equal steps

OKLCH Perceptual Lightness HSL Perceptual Lightness

CSS Output

Supported natively in modern browsers oklch(); with sRGB HEX fallback comments

About OKLCH Color Scale

Generate perceptually uniform color ramps in OKLCH color space. Smoother lightness transitions than HSL or RGB. Outputs CSS oklch() values for CSS Color Level 4. Steps are generated in the OKLCH perceptually uniform model, so each lightness increment is visually even — none of the jumps or muddy grays a traditional HSL scale produces.

Well suited to teams building or upgrading a design system color spec, especially projects that have already committed to CSS Color Level 4 features.

Common questions

Why generate scales in OKLCH? OKLCH is perceptually uniform, so equal lightness steps look equally spaced — scales come out smooth instead of the uneven jumps you get from HSL.

Is OKLCH supported in browsers? Yes, all current major browsers support the oklch() function and fall back to the nearest sRGB color on older displays.

Can OKLCH show colors HEX can't? Yes — it can address wide-gamut P3 colors that fall outside sRGB, the more vivid colors modern screens can display.