Введите цвет в формате HEX и мгновенно получите точное значение HSL, а заодно все остальные форматы. Работает прямо в браузере.
Когда нужен перевод HEX в HSL
Фирменный цвет обычно присылают в HEX, но править такой код неудобно: чтобы сделать цвет чуть темнее, нужно менять сразу три канала. После перевода в HSL достаточно изменить одно число. Фронтенд-разработчики делают это, чтобы получить hover и active-состояния кнопок, построить шкалу из десяти тонов для дизайн-системы или вывести тёмную версию из одного базового значения. Введите HEX, затем меняйте светлоту или насыщенность в результате, не трогая оттенок, и сразу копируйте готовое значение в стили.
Где это пригодится
- Получить hover, active и disabled-варианты фирменной кнопки, меняя только значение светлоты.
- Задать CSS-переменные --h, --s, --l, чтобы сдвигать всю тему одним числом оттенка.
- Построить шкалу светлых и тёмных тонов для дизайн-системы из одного HEX в брендбуке.
Как перевести HEX в HSL
Приведите R, G и B к диапазону 0-1 и найдите max, min и Δ = max − min. Светлота равна среднему крайних значений: L = (max + min) / 2. Насыщенность S = Δ / (1 − |2L − 1|), для серых цветов (Δ = 0) она равна 0.
Тон зависит от наибольшего канала: для красного H = ((G − B) / Δ) mod 6, для зелёного H = (B − R) / Δ + 2, для синего H = (R − G) / Δ + 4, каждое значение умножается на 60°, чтобы получить градусы. Обратный перевод восстанавливает каналы через цветность C = (1 − |2L − 1|) × S.
Значения HEX сначала переводятся в RGB: код делится на три base-16 пары, затем применяются формулы.
Пример расчёта
HEX в RGB
- R: 2E₁₆ = 2 × 16 + 14 = 46
- G: CC₁₆ = 12 × 16 + 12 = 204
- B: 71₁₆ = 7 × 16 + 1 = 113
RGB в HSL
- Нормализуем каналы: R′ = 46 ÷ 255 = 0.18, G′ = 204 ÷ 255 = 0.8, B′ = 113 ÷ 255 = 0.443
- max = 0.8 (G′), min = 0.18 (R′), Δ = 0.62
- L = (max + min) ÷ 2 = (0.8 + 0.18) ÷ 2 = 0.49 → 49%
- S = Δ ÷ (1 − |2L − 1|) = 0.62 ÷ (1 − |2 × 0.49 − 1|) = 0.632 → 63%
- H = 60 × ((B′ − R′) ÷ Δ + 2) = 60 × ((0.443 − 0.18) ÷ 0.62 + 2) ≈ 145°
#2ECC71 = hsl(145, 63%, 49%)
Совет: Храните оттенок в CSS-переменной, например --brand-h: 14, и пишите hsl(var(--brand-h) 80% 50%). Тогда смена одного числа перекрасит все компоненты, а это намного быстрее, чем править длинный список HEX-кодов.
Популярные цвета: HEX в HSL
| Цвет | HEX | HSL |
|---|---|---|
| Красный | #FF0000 | hsl(0, 100%, 50%) |
| Оранжевый | #FFA500 | hsl(39, 100%, 50%) |
| Жёлтый | #FFFF00 | hsl(60, 100%, 50%) |
| Лайм | #00FF00 | hsl(120, 100%, 50%) |
| Зелёный | #008000 | hsl(120, 100%, 25%) |
| Голубой | #00FFFF | hsl(180, 100%, 50%) |
| Бирюзовый | #008080 | hsl(180, 100%, 25%) |
| Синий | #0000FF | hsl(240, 100%, 50%) |
| Тёмно-синий | #000080 | hsl(240, 100%, 25%) |
| Фиолетовый | #800080 | hsl(300, 100%, 25%) |
| Пурпурный | #FF00FF | hsl(300, 100%, 50%) |
| Розовый | #FFC0CB | hsl(350, 100%, 88%) |
| Коричневый | #A52A2A | hsl(0, 59%, 41%) |
| Серый | #808080 | hsl(0, 0%, 50%) |
| Чёрный | #000000 | hsl(0, 0%, 0%) |
| Белый | #FFFFFF | hsl(0, 0%, 100%) |
Часто задаваемые вопросы
Как сделать тёмную тему на основе полученного цвета?
Оставьте оттенок, снизьте светлоту и чаще всего немного уменьшите насыщенность, чтобы цвет не слепил на тёмном фоне. Затем проверьте контраст с фоном страницы: одни цифры не гарантируют, что текст будет читаться.
Почему у моего серого HEX оттенок равен 0?
У серых цветов вроде #808080 красный, зелёный и синий равны, поэтому оттенка нет. Конвертер ставит 0 по соглашению, и на вид это не влияет, пока насыщенность равна 0%. Менять оттенок бесполезно, если не поднять и насыщенность.
Что означают тон, насыщенность и светлота?
Тон (H) означает положение на цветовом круге в градусах (0° красный, 120° зелёный, 240° синий). Насыщенность (S) означает «сочность» цвета от 0% (серый) до 100% (чистый цвет). Светлота (L) идёт от 0% (чёрный) через 50% (чистый цвет) к 100% (белый).
Зачем использовать HSL вместо RGB?
В HSL проще рассуждать о цвете: чтобы затемнить, уменьшите L, а чтобы приглушить, уменьшите S, тон при этом сохранится. Это удобно для построения палитр и правок в CSS, тогда как в RGB меняются сразу все три канала.
Перевод точный?
Формулы математически точны, но отображаемые значения округляются до целых, поэтому при переводе туда-обратно канал может сместиться на ±1. Для попиксельной точности сохраняйте исходное значение.
Другие конвертеры цветов
Нужно определить цвет пикселя на картинке или скриншоте? Попробуйте бесплатную пипетку цвета →