Как конвертировать HSL в HEX
Подобрать в HSL, отдать в HEX
HSL задает цвет через оттенок, насыщенность и светлоту, поэтому им удобно подбирать тон: сдвинули H - сменили цвет, убавили L - затемнили. Но браузеру в готовой верстке привычнее короткий код HEX.
Инструмент закрывает этот разрыв. Вы подбираете цвет в понятной модели HSL, а на выходе получаете шестизначный код, который сразу вставляется в CSS. Обратный перевод из HEX в HSL тоже доступен - впишите код в поле HEX.
Когда HSL удобнее прямого HEX
- нужно сделать несколько оттенков одного цвета, меняя только светлоту L;
- собираете тему оформления и подгоняете насыщенность по всей палитре;
- цвет описан словами (глубокий синий, приглушенный) и его проще нащупать по H, S, L.
Примеры перевода
| HSL | HEX |
|---|---|
| hsl(217, 91%, 53%) | #2563EB |
| hsl(0, 100%, 50%) | #FF0000 |
| hsl(0, 0%, 50%) | #808080 |
Как перевести HSL в HEX
-
Задайте цвет в HSL
Укажите оттенок H в градусах (0-360), насыщенность S и светлоту L в процентах.
-
Или вставьте готовый HEX
Впишите код в поле HEX - поля H, S и L посчитаются в обратную сторону.
-
Возьмите код для CSS
В блоке HEX появится шестизначный код для свойства color, а плашка сверху покажет получившийся оттенок.
Частые вопросы
Всегда шестизначный код вида #2563eb, готовый для свойств color и background в CSS. Регистр букв в коде значения не имеет.
Да, впишите код в поле HEX - значения H, S и L пересчитаются автоматически.
S - насыщенность от 0 (серый) до 100 (чистый цвет), L - светлота от 0 (черный) до 100 (белый).