Set four chips to the same HSL lightness and saturation. Rotate only the hue. You now have a palette on paper.
On screen, one shouts. Yellow turns into a siren. Blue sits down. The numbers match. The room does not.
That is the problem with authoring color as if the sliders were honest. HSL's L is not perceived brightness. You can be rigorous in the file and still make a palette that feels uneven.
Siblings and shades
OKLCH gives you a better model for the job. Its lightness axis is designed around perceived lightness, so colors with the same L and similar chroma tend to feel much closer in visual weight.
Start with a sibling rule: hold L and C, rotate H, then inspect the result in the gamut you actually ship.
oklch(0.65 0.16 30) and oklch(0.65 0.16 250) are not guaranteed to look mathematically identical to every eye on every display. That is not the promise. The useful part is that the model gives you a far more coherent starting point than HSL.
Shades are the next rule. Keep the hue stable, move lightness, and let chroma taper when the gamut requires it. A blue ramp should still feel like one blue getting lighter and darker, not a family changing identity between token names.
If blue-400 feels like a different product from blue-700, the token name is not the problem. The color model might be.
Gamut is part of the design
Valid CSS is not the same as displayable color.
An OKLCH value can sit outside sRGB, or outside the gamut of the screen in front of you. The browser can map it back into range, but automatic gamut mapping is recovery, not art direction.
Author to the gamut you mean to support. If the conservative target is sRGB, keep the ramp inside it. If you are intentionally designing for P3, say so and test there. When a color falls out of gamut, reduce chroma deliberately instead of trusting a number because the syntax accepted it.
OKLCH is widely supported in modern browsers now. A hex fallback is still useful when legacy support is a real requirement. It is not a way to make the same color more vivid.
Two rows
Build two rows of four chips.
Row one: HSL with the same lightness and saturation, changing only hue.
Row two: OKLCH with the same L and C, changing only hue.
Then build a shade ramp in each model.
Do not stare at the values. Stare at the family.
If the numbers match and the colors do not, the model is part of the design.