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