Það er þægilegt að velja lit í HSL, en stíllblöð, afhendingar til hönnunar og vörumerkjaskjöl nota enn HEX. Þessi breytir lokar bilið og gefur þér sex stafa kóðann fyrir hvaða samsetningu af litblæ, mettun og ljósleika sem er.
Hvernig HSL í HEX umbreyting virkar
- Breyttu mettun og ljósleika í tugabrot: 60% verður 0.6.
- Reiknaðu kromu C = (1 − |2L − 1|) × S — það segir hversu langt liturinn er frá gráum.
- Notaðu litblæðið til að staðsetja þá kromu á rauðu, grænu og bláu rásirnar, og færa síðan allar þrjár um L − C/2.
- Fjölgaðu hverja rás með 255, nákvæmduðuðu og skrifaðu sem tvær hexadecimal tölustafir.
Dæmi sem virkaði
Nákvæmni tapast aðeins við eina umgerð, seinasta skrefið, þegar hver rás er fest við heila 0–255 tölu. Niðurstaðan er næst besta HEX-kóði miðað við HSL-inntakið og er venjulega eins og það sem hönnunarforrit sýnir.
HSL og HEX útskýrt
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
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
HSL í HEX yfirlitstafla
Algengustu CSS-litirnir, umbreyttir frá HSL í HEX.
| Litur | 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 |