HSL описывает цвет так, как о нём говорят люди: какой оттенок, насколько насыщенный, насколько светлый. Конвертация HEX в HSL — самый быстрый способ получить цвет в форме, которую реально корректировать — осветить, приглушить или построить по нему целую шкалу.
Как работает конвертация HEX в HSL
- Преобразуй HEX в RGB и раздели каждый канал на 255, чтобы все три значения были в диапазоне от 0 до 1.
- Найди наибольшее и наименьшее из трёх значений. Их среднее — это светлота L.
- Размах между ними определяет насыщенность S: раздели его на (2 − max − min) для светлых цветов или на (max + min) для тёмных.
- Канал с максимальным значением задаёт оттенок H — красный в 0°, зелёный в 120°, синий в 240° — а два других канала позиционируют оттенок внутри этого сектора.
Рабочий пример
Математика точна, но HSL обычно округляют до целых градусов и процентов. При обратной конвертации это может сдвинуться на один–два шага в RGB — на практике незаметно, но полезно помнить, если часто делать круговые преобразования.
HEX и HSL объяснено
Что такое HEX?
HEX — шестизначное шестнадцатеричное число, которое хранит каналы красного, зелёного и синего цвета после лидирующего #. Каждая пара цифр соответствует одному каналу от 00 (нет) до FF (максимум), что даёт те же 16,7 миллиона цветов, что и RGB, но в более короткой записи. HEX — стандарт в CSS, инструментах дизайна и брендбуках.
- Синтаксис:
- #RRGGBB
- Диапазон:
- 00–FF на канал
- Лучше всего для:
- CSS, передача дизайна, брендбуки
Что такое HSL?
HSL разбивает цвет на hue (0–360° на цветовом круге), saturation (насколько цветной, 0–100%) и lightness (яркость, 0–100%). Поскольку каждая часть совпадает с тем, как люди описывают цвет, HSL — самый простой формат для создания оттенков, тональных вариаций и согласованных палитр вручную или в коде.
- Синтаксис:
- hsl(H, S%, L%)
- Диапазон:
- 0–360°, 0–100%, 0–100%
- Лучше всего для:
- палитры, оттенки и тона, темизация
Таблица соответствий HEX → HSL
Наиболее распространённые цвета CSS, сконвертированные из HEX в HSL.
| Цвет | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |