Вибирати колір у HSL зручно, але стилі, передача дизайну та бренддокументи все ще працюють на HEX. Цей конвертер заповнює розрив і дає шестизначний код для будь-якої комбінації відтінку, насиченості та світлості.
Як працює конвертація HSL у HEX
- Перетвори насиченість і світлість у дроби: 60% стає 0.6.
- Обчисли хрому C = (1 − |2L − 1|) × S — це показник віддаленості кольору від сірого.
- Використай відтінок, щоб розмістити ту хрому на R, G і B, потім змісти всі три на L − C/2.
- Помнож кожен канал на 255, округли і запиши як двозначні шістнадцяткові цифри.
Приклад роботи
Округлення відбувається один раз, на останньому кроці, коли кожен канал фіксують до цілих 0–255. Результат — найточніший HEX-код, що відповідає твоєму HSL, і зазвичай збігається з тим, що показує дизайн-інструмент.
HSL і HEX пояснено
Що таке HSL?
HSL розбиває колір на відтінок (0–360° на колі), насиченість (наскільки яскравий/кольоровий, 0–100%) і світлість (наскільки світлий, 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 |