COLOR SCIENCE · 20 OCTOBER 2026
Build a scale that feels like one color
A practical introduction to OKLCH, perceptual lightness, and the edges of your screen.
In HSL, two colors with the same lightness can look surprisingly different in brightness. OKLCH is designed to make perceptual differences more predictable. Its three coordinates are lightness (L), chroma (C), and hue (h).
Start with a hue; give lightness a rhythm
The color scale generator uses eleven lightness targets, from 98% down to 19%, with labels 50 through 950. These are product design choices, not a universal standard. Chroma tapers toward the ends of the scale so pale backgrounds and dark text stay related to the middle tones.
A requested color may not fit your screen
OKLCH can describe colors outside sRGB. Simply clipping an RGB channel can alter hue and lightness. Palunio instead holds requested lightness and hue steady and reduces chroma by bisection until the unquantized color fits sRGB. Then it rounds to 8-bit HEX. This strict-boundary method is not identical to the CSS Color 4 local-MINDE gamut mapping algorithm.
For example, paste oklch(70% 0.4 30) into the converter. The requested chroma does not fit sRGB; the tool reports the mapping. Copying the resulting HEX preserves the mapped color across typical web workflows.
Uniform does not mean perfect
OKLCH is useful, but no simple color model captures every viewing condition or every person's perception. The scale is a starting point. Inspect adjacent shades, try them in your interface, and check text contrast separately. A “500” label does not imply AA compliance.
Export with intention
Use numeric tokens for the raw scale and semantic tokens for actual jobs: surface, text, action and border. That separation makes it easier to adapt light and dark themes without changing every component.
Primary references
Björn Ottosson: A perceptual color space for image processing · W3C: CSS Color 4