Изменение цветовых тонов и оттенков

Этот инструмент генерирует tints (более светлые варианты) и shades (более тёмные варианты) базового цвета, поэтапно изменяя его светлоту HSL в сторону 100% и 0% соответственно. Вы выбираете количество шагов (5-20) и щёлкаете по любому образцу, чтобы скопировать его шестнадцатеричное значение. Tints сохраняют оттенок и насыщенность неизменными, повышая светлоту; shades её понижают.

1. Выберите базовый цвет с помощью палитры или ввода шестнадцатеричного значения. 2. Установите ползунок Шаги между 5 и 20. 3. Карточка Tints показывает более светлые варианты (каждый с подписью шестнадцатеричного значения и процента шага); карточка Shades показывает более тёмные варианты. 4. Щёлкните по любому образцу, чтобы скопировать его шестнадцатеричное значение; значок галочки подтверждает копирование.

Базовый цвет преобразуется в HSL. Для шага `i` из N tint задаёт `L = baseL + (100 - baseL) * (i / N)`, а shade задаёт `L = baseL - baseL * (i / N)`, при постоянных оттенке и насыщенности. Подпись в процентах — `round((i / N) * 100)`, она отражает прогресс вдоль шкалы, а не значение светлоты. Полученный HSL преобразуется обратно в RGB, а затем в шестнадцатеричное значение для отображения.