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%) |