Введите цвет в формате HSL и мгновенно получите точное значение HEX, а заодно все остальные форматы. Работает прямо в браузере.
Когда нужен перевод HSL в HEX
Вы работали в HSL, потому что там удобно подбирать цвет: выбрать оттенок и двигать светлоту, пока контраст не станет приемлемым. Но рано или поздно значение приходится передавать дальше. Документы для передачи макетов, поля заливки в Figma, HTML-письма, настройки манифеста и многие конвейеры токенов по-прежнему ждут строку HEX. Перевод из HSL в HEX фиксирует подобранный цвет в компактном коде, который любой коллега вставит куда угодно, не думая об углах и процентах.
Где это пригодится
- Опубликовать подобранный в CSS цвет как HEX в гайдлайне или в списке стилей Figma.
- Подготовить цвета для HTML-писем, где HEX остаётся самой надёжной записью для почтовых клиентов.
- Записать итоговое значение в theme_color манифеста или в конфиг Tailwind после экспериментов с HSL.
Как перевести HSL в HEX
Приведите 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 пары, затем применяются формулы.
Пример расчёта
HSL в RGB
- C = (1 − |2L − 1|) × S = (1 − |2 × 0.4 − 1|) × 0.4 = 0.32
- X = C × (1 − |(H ÷ 60) mod 2 − 1|) = 0.32 × (1 − |(235 ÷ 60) mod 2 − 1|) = 0.027
- m = L − C ÷ 2 = 0.4 − 0.32 ÷ 2 = 0.24
- 180° ≤ H < 240°: (R′, G′, B′) = (0, X, C) = (0, 0.027, 0.32)
- R = (R′ + m) × 255 = (0 + 0.24) × 255 = 61
- G = (G′ + m) × 255 = (0.027 + 0.24) × 255 = 68
- B = (B′ + m) × 255 = (0.32 + 0.24) × 255 = 143
RGB в HEX
- R: 61 ÷ 16 = 3, остаток 13 → 3D
- G: 68 ÷ 16 = 4, остаток 4 → 44
- B: 143 ÷ 16 = 8, остаток 15 → 8F
hsl(235, 40%, 40%) = #3D448F
Совет: Оставляйте в исходном CSS значение в HSL, а HEX выгружайте только туда, где иначе нельзя: в письма, документацию, внешние сервисы. Так тема остаётся легко настраиваемой, а копии одного цвета со временем не расходятся между собой.
Популярные цвета: HSL в HEX
| Цвет | HSL | HEX |
|---|---|---|
| Красный | hsl(0, 100%, 50%) | #FF0000 |
| Оранжевый | hsl(39, 100%, 50%) | #FFA500 |
| Жёлтый | hsl(60, 100%, 50%) | #FFFF00 |
| Лайм | hsl(120, 100%, 50%) | #00FF00 |
| Зелёный | hsl(120, 100%, 25%) | #008000 |
| Голубой | hsl(180, 100%, 50%) | #00FFFF |
| Бирюзовый | hsl(180, 100%, 25%) | #008080 |
| Синий | hsl(240, 100%, 50%) | #0000FF |
| Тёмно-синий | hsl(240, 100%, 25%) | #000080 |
| Фиолетовый | hsl(300, 100%, 25%) | #800080 |
| Пурпурный | hsl(300, 100%, 50%) | #FF00FF |
| Розовый | hsl(350, 100%, 88%) | #FFC0CB |
| Коричневый | hsl(0, 59%, 41%) | #A52A2A |
| Серый | hsl(0, 0%, 50%) | #808080 |
| Чёрный | hsl(0, 0%, 0%) | #000000 |
| Белый | hsl(0, 0%, 100%) | #FFFFFF |
Часто задаваемые вопросы
Дадут ли оттенки 360 и 0 один и тот же HEX?
Да. Оттенок задаёт положение на круге, поэтому 360 градусов возвращают к началу, то есть к красному при оттенке 0. И hsl(360 100% 50%), и hsl(0 100% 50%) дают #ff0000.
Какой синтаксис hsl() считается верным в CSS?
Современный вариант пишется через пробелы: hsl(210 60% 40%). Старый, с запятыми, hsl(210, 60%, 40%), тоже работает. К углу можно добавить единицу, например 0.5turn вместо 180deg. Если инструменты старые, безопаснее отдавать готовый HEX.
Что означают тон, насыщенность и светлота?
Тон (H) означает положение на цветовом круге в градусах (0° красный, 120° зелёный, 240° синий). Насыщенность (S) означает «сочность» цвета от 0% (серый) до 100% (чистый цвет). Светлота (L) идёт от 0% (чёрный) через 50% (чистый цвет) к 100% (белый).
Зачем использовать HSL вместо RGB?
В HSL проще рассуждать о цвете: чтобы затемнить, уменьшите L, а чтобы приглушить, уменьшите S, тон при этом сохранится. Это удобно для построения палитр и правок в CSS, тогда как в RGB меняются сразу все три канала.
Перевод точный?
Формулы математически точны, но отображаемые значения округляются до целых, поэтому при переводе туда-обратно канал может сместиться на ±1. Для попиксельной точности сохраняйте исходное значение.
Другие конвертеры цветов
Нужно определить цвет пикселя на картинке или скриншоте? Попробуйте бесплатную пипетку цвета →