HSL в RGB онлайн — перевод цвета для CSS

H — это положение на цветовом круге в градусах, то есть сам оттенок. S показывает, насколько цвет далек от серого: 100% дает чистый тон, 0% — нейтральную серую шкалу. L отвечает за примесь черного и белого, 50% соответствует самой насыщенной версии оттенка.

Так устроена модель: при L равном 100 цвет полностью выбелен, а при 0 полностью затемнен, и тон с насыщенностью на результат уже не влияют. Если нужны разные светлые оттенки, держите светлоту в диапазоне примерно от 85 до 95 процентов и меняйте насыщенность.

Нет, это разные модели с похожими названиями. В HSB яркость 100% дает насыщенный цвет, а в HSL насыщенный тон находится на середине шкалы светлоты при 50%. Числа из панели редактора нельзя переносить в поля напрямую, иначе оттенок уедет заметно светлее ожидаемого.

Зафиксируйте H и S и меняйте только L: 92% подойдет для фона блока, 50% — для основной кнопки, 35% — для состояния нажатия, 25% — для текста на светлой подложке. Затем переведите каждый вариант в каналы и сохраните набор как переменные проекта.

Пересчет из процентов и градусов почти всегда дает дробные результаты, поэтому каналы округляются до целых чисел от 0 до 255. Отклонение не превышает половины деления и глазом не различается, но при обратном переводе в HSL цифры могут отличаться на единицу.

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