Izbiranje barve v HSL je udobno, a slogovniki, predaje dizajna in dokumenti blagovnih znamk še vedno delajo na HEX. Ta pretvornik zapre vrzel in ti da šestmestno kodo za poljubno kombinacijo odtenka, nasičenosti in svetlosti.
Kako poteka pretvorba iz HSL v HEX
- Nasičenost in svetlost pretvori v ulomke: 60% postane 0.6.
- Izračunaj kromatičnost C = (1 − |2L − 1|) × S — to pove, kako daleč je barva od sive.
- Uporabi odtenek, da to kromatičnost razporediš po rdečem, zelenem in modrem kanalu, nato pa vse tri premakni za L − C/2.
- Pomnoži vsak kanal z 255, ga zaokroži in zapiši kot dve heksadecimalni števki.
Delujoč primer
Zaokroževanje se zgodi enkrat, v zadnjem koraku, ko vsak kanal pripneš na celo vrednost 0–255. Rezultat je najbližja HEX koda tvojemu HSL vnosu in običajno enaka tisti, ki jo pokaže dizajnersko orodje.
HSL in HEX pojasnjeno
Kaj je HSL?
HSL razdeli barvo na odtenek (0–360° na barvnem krogu), nasičenost (koliko barvita, 0–100%) in svetlost (koliko svetla, 0–100%). Ker vsaka komponenta ustreza načinu, kako ljudje opisujejo barvo, je HSL najlažji format za ustvarjanje odtenkov, tonov in doslednih palet — ročno ali v kodi.
- Sintaksa:
- hsl(H, S%, L%)
- Območje:
- 0–360°, 0–100%, 0–100%
- Najbolj primerno za:
- palete, odtenki in toni, tematizacija
Kaj je HEX?
HEX koda je šestmestno šestnajstiško število, ki shrani rdečo, zeleno in modro komponento barve za vodilnim #. Vsako dvojico mest predstavlja ena komponenta, od 00 (brez) do FF (polno), kar daje enakih 16,7 milijona barv kot RGB v precej krajši notaciji. HEX je privzeta izbira v CSS, oblikovalskih orodjih in smernicah blagovnih znamk.
- Sintaksa:
- #RRGGBB
- Območje:
- 00–FF na komponento
- Najbolj primerno za:
- CSS, predaja oblikovanja, smernice blagovne znamke
Tabela za HSL v HEX
Najpogostejše CSS barve, pretvorjene iz HSL v HEX.
| Barva | 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 |