OKLCH is most valuable when it solves a real system problem: keeping lightness changes consistent across different hues.
Why perceptual lightness matters
Two colors with the same HSL lightness can appear very different in brightness. OKLCH lightness is designed to align more closely with human perception, which makes generated steps feel more even.
Keep hue stable, then tune lightness and chroma
For a basic scale, begin with a reference hue. Move lightness gradually from dark to light, then reduce chroma near the extremes where highly saturated colors can clip or become visually harsh.
--violet-900: oklch(31% 0.10 295);
--violet-600: oklch(56% 0.18 295);
--violet-300: oklch(78% 0.11 295);
--violet-100: oklch(94% 0.03 295);Use semantic tokens above raw scales
Components should consume semantic tokens such as action, action-hover, border-subtle, and text-muted rather than reaching directly into a numbered scale. That gives themes room to map different raw colors to the same interface role.
Check the result in context
Perceptual math improves consistency, but it does not replace visual review. Evaluate the scale in real controls, against real backgrounds, and through contrast testing.