Избирањето боја во HSL е удобно, но stylesheet-ите, предавањата на дизајн и бренд-документите сè уште користат 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 но во пократка нотaција. 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 |