Тот же цвет, другой вопрос
RGB отвечает «сколько какого света». HSL отвечает «какой цвет, насколько насыщенный, насколько светлый». Обе записи описывают одну точку, но осознанно двигать её позволяет только одна.
Если каналы пришли из canvas, из пикселя изображения или из API, а вам нужно построить вокруг этого цвета шкалу, — это тот самый шаг.
Как строить шкалу
Имея hsl(11, 100%, 60%), рабочая шкала — тот же тон при разной светлоте: 90%,
80%, 70% и так далее. Насыщенность держите чуть ниже на светлом конце и чуть
выше на тёмном, иначе бледные ступени выглядят выцветшими, а тёмные — грязными.
Округление
Градусы и проценты здесь целые. Перевод обратно в RGB может приехать на единицу мимо исходного — это цена формы, которую читает человек.
Вопросы
Когда это нужно?+
Когда есть каналы — из canvas, из пикселя изображения или из API — и нужно построить шкалу или осознанно поправить цвет, а не подбирать наугад.
Как сделать из этого хорошую шкалу?+
Оставьте тон, меняйте светлоту, а насыщенность слегка опускайте на светлом конце и поднимайте на тёмном. Равные шаги одной только светлоты сверху обычно выглядят выцветшими.
Преобразование без потерь?+
Нет. Градусы и проценты здесь целые, поэтому обратный перевод может сдвинуть канал на единицу.