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 но во пократка нотaција. 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%) |