Осветлить или затемнить цвет

Выберите исходный цвет, а затем напрямую задайте ползунком компонент яркости HSL (значение от 0 до 100, а не относительный процент), чтобы осветлить или затемнить цвет. Обработка на 100% локально в вашем браузере — ничего не отправляется на сервер.

0 = абсолютный чёрный, 50 = чистый оттенок, 100 = абсолютный белый.
Получившийся цвет

Как это работает

В отличие от простого смешивания с белым или чёрным, настройка яркости (L) в модели HSL точно сохраняет исходные оттенок (H) и насыщенность (S): цвет сохраняет свою хроматическую идентичность по всей длине ползунка — от абсолютного чёрного (L=0) до абсолютного белого (L=100), проходя через чистый оттенок посередине (L=50). Именно этот метод используют большинство профессиональных палитр для получения согласованных вариаций одного оттенка.

Почему этот ползунок не показывает процент осветления?

Относительный процент («+20% яркости») зависит от исходного значения и быстро становится неоднозначным возле крайних значений. Здесь ползунок напрямую задаёт абсолютное значение L в пространстве HSL (от 0 до 100), что даёт предсказуемый и воспроизводимый результат независимо от исходного цвета.

Меняются ли при этом оттенок (H) и насыщенность (S)?

Нет, изменяется только яркость. Если вам нужен более или менее яркий цвет, поменяйте исходный цвет через палитру: она переопределяет оттенок и насыщенность до того, как вы настроите яркость.

Никакие данные не покидают ваше устройство: расчёт HSL полностью выполняется на JavaScript в вашем браузере.