Что даёт HSL
Hex-строка не говорит ни о чём. #FF5733 и #FF5734 выглядят одинаково и
читаются как несвязанные. В HSL тот же цвет — hsl(11, 100%, 60%), и теперь у
каждого вопроса ответ в одно число:
- Светлее? Поднять третье.
- Менее насыщенно? Опустить второе.
- Подходящий акцент? Сдвинуть первое на 180 для противоположного или на 30 для соседнего.
Поэтому дизайн-системы обычно описывают в HSL, а отдают в hex.
Обратный путь неточен
HSL здесь оперирует целыми градусами и целыми процентами, поэтому 16,7 млн значений RGB ложатся на заметно меньшее число троек HSL. Переведите hex в HSL и сразу обратно — можно приехать на шаг в сторону. На экране незаметно, но реально, если вы сравниваете строки в тесте.
Храните hex, а HSL считайте рабочей формой.
Вопросы
Зачем вообще переводить в HSL?+
Потому что HSL правится. Сделать цвет светлее — это одно число в HSL и три попытки угадать в hex; поэтому дизайн-системы описывают в HSL, а отдают в hex.
Переведётся ли обратно точно?+
Обычно да, но не всегда. Целые градусы и проценты не могут адресовать все 16,7 млн значений RGB, поэтому круговой путь может приехать на шаг мимо: на экране незаметно, в тесте со сравнением строк — вполне.
Какой тон у серого?+
Не определён и выводится как 0. При нулевой насыщенности тон не влияет ни на что.