The usual workflow
Pick in HSL because it is adjustable, ship hex because it is universal. This is
the second half of that: you have hsl(11, 100%, 60%) and you need the six
characters to paste into a token file or a design tool.
Hue wraps, the rest clamps
hsl(400, …) is the same as hsl(40, …) — hue is an angle, so it wraps. But
saturation and lightness are percentages with real ends: 120% is 100%, and
-10% is 0%. Both behaviours match what a browser does, so what you see here
is what CSS would render.
The greys
At zero saturation the hue is meaningless — hsl(0, 0%, 50%) and
hsl(200, 0%, 50%) are the same grey. If you are generating a scale
programmatically, that is the case that makes hue look like it is being ignored.
It is.
Questions
Does hue wrap?+
Yes. `hsl(400, …)` is `hsl(40, …)`, because hue is an angle. Saturation and lightness clamp instead — 120% is 100%.
Why does my grey ignore the hue?+
Because at 0% saturation it has to. `hsl(0, 0%, 50%)` and `hsl(200, 0%, 50%)` are the same grey.
Is the result exact?+
The hex you get is exact for the HSL you gave. It is the return trip that rounds, because HSL has fewer distinct values than RGB.