HSL lýsir lit á þann hátt sem fólk talar um hann: hvaða litblær, hversu litríkur, hversu bjartur. Að umbreyta HEX kóða í HSL er hraðasta leiðin til að fá lit sem þú getur raunverulega stillt — ljósari, dempaðari eða byggt heilann kvarða úr honum.
Hvernig HEX í HSL umbreyting virkar
- Breyttu HEX kóðanum í RGB og deildu hverri rás með 255, svo allar þrjár verði á bilinu 0 til 1.
- Finndu hæsta og lægsta gildi af þeim þremur. Meðaltal þeirra er ljósleikinn L.
- Mismunurinn milli þeirra ræður mettuninni S: deildu honum með (2 − max − min) fyrir ljósari liti, eða með (max + min) fyrir dekkri liti.
- Rásin sem heldur hámarkinu ákveður litblæinn H — rauður á 0°, grænn á 120°, blár á 240° — og hin tvær rásirnar staðsetja litblæðið innan þess hluta.
Dæmi sem virkaði
Reikningurinn er nákvæmur, en HSL-gildi eru venjulega afrituð í heilar gráður og prósentur. Að umbreyta aftur getur því færst um eina eða tvær RGB-einingar frá upprunalega litnum — ósýnilegt í praxi, en gott að vita ef þú fer fram og til baka oft.
HEX og HSL útskýrt
Hvað er HEX?
HEX kóði er sex stafa hexadecimal tala sem geymir rauða, græna og bláa rás litar á undan með #. Sérhvert tvíund getur táknað eina rás, frá 00 (ekkert) til FF (fullt), sem gefur sama 16,7 milljón liti og RGB í mun styttri táknun. HEX er sjálfgefið í CSS, hönnunarverkfærum og leiðbeiningum vörumerkis.
- Syntaks:
- #RRGGBB
- Gildi:
- 00–FF per channel
- Best fyrir:
- CSS, afhending hönnunar, leiðbeiningar vörumerkis
Hvað er HSL?
HSL skiptir lit í litstefnu (0–360° á litahring), mettun (hversu litríkur, 0–100%) og ljósleika (hversu bjartur, 0–100%). Þar sem hver hluti passar við hvernig fólk lýsir lit, er HSL auðveldasta formið til að byggja litasamstæður, ljósari- eða dekkri útgáfur og samræmdar pallettur — handvirkt eða í kóða.
- Syntaks:
- hsl(H, S%, L%)
- Gildi:
- 0–360°, 0–100%, 0–100%
- Best fyrir:
- pallettur, ljósari og dekkri tónar, þemu
HEX í HSL yfirlitstafla
Algengustu CSS-litirnir, umbreyttir frá HEX í HSL.
| Litur | 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%) |