Обычный порядок работы
Подбирать в HSL, потому что его удобно править; отдавать hex, потому что он
универсален. Это вторая половина: у вас есть hsl(11, 100%, 60%) и нужны шесть
символов, чтобы вставить в файл токенов или в редактор.
Тон заворачивается, остальное ограничивается
hsl(400, …) — это то же, что hsl(40, …): тон это угол, он заворачивается. А
насыщенность и светлота — проценты с настоящими краями: 120% это 100%,
-10% это 0%. Оба поведения совпадают с браузерными, так что здесь вы видите
то, что отрисовал бы CSS.
Серые
При нулевой насыщенности тон не значит ничего: hsl(0, 0%, 50%) и
hsl(200, 0%, 50%) — один и тот же серый. Если вы генерируете шкалу
программно, именно на этом случае кажется, будто тон игнорируется. Так и есть.
Вопросы
Заворачивается ли тон?+
Да. `hsl(400, …)` это `hsl(40, …)`, потому что тон — угол. А насыщенность и светлота ограничиваются: 120% это 100%.
Почему мой серый игнорирует тон?+
Потому что при 0% насыщенности иначе и быть не может. `hsl(0, 0%, 50%)` и `hsl(200, 0%, 50%)` — один и тот же серый.
Точен ли результат?+
Полученный hex точен для того HSL, что вы задали. Округляет обратный путь, потому что различимых значений в HSL меньше, чем в RGB.