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 розбиває колір на відтінок (0–360° на колі), насиченість (наскільки яскравий/кольоровий, 0–100%) і світлість (наскільки світлий, 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%) |