Pick a colour, and see what it is

Pick a colour, and see what it is

Saturation and value on the square, hue on the bar — and beside them the OKLCH coordinates, the gamut and what the colour can carry.

The square and the bar are HSV, and HSL is a different shape

Almost every picker of this kind — a hue strip beside a saturation-and-value square — is working in HSV, sometimes called HSB. It is popular because the square maps neatly onto two things a person can see: how vivid, and how bright. Pure white sits in one corner, black along an entire edge.

CSS, meanwhile, mostly speaks HSL, and the two disagree about what the third number means. In HSV, value 100% with saturation 100% is the most vivid version of the hue. In HSL, lightness 100% is always white regardless of saturation, and the vivid version lives at 50%. Numbers copied between the two without converting produce colours nowhere near what was intended, and because both notations look plausible, the mistake survives review.

Equal numbers do not mean equal appearance

The deeper limitation is that neither model tracks how bright a colour actually looks. Set a yellow and a blue to identical saturation and lightness and the yellow will appear far brighter — the human eye is much more sensitive in the green-yellow part of the spectrum, and HSL takes no account of it.

This is why a palette assembled by holding S and L constant and walking the hue wheel comes out uneven, with some swatches leaping forward and others receding, even though the numbers are tidy. It is also why contrast has to be measured rather than judged from the lightness figure: two colours both at 50% lightness can sit on opposite sides of a contrast threshold. Pick here for the colour you want, then check the pairing you are going to use it in.