Изборът на цвят в HSL е удобен, но стиловете, предаването към дизайнери и бранд документите все още работят с HEX. Този конвертор запълва празнината и ти дава шестцифрения код за всяка комбинация от нюанс, наситеност и светлинност.
Как работи преобразуването от 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 |