OKLCH Color Scale - Perceptually Uniform Color Ramps

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