HSL:ssä värin valitseminen on mukavaa, mutta tyylitaulukot, design-siirrot ja brändidokumentit pyörivät yhä HEX:ssä. Tämä muunnin sulkee kuilun ja antaa kuusinumeroisen koodin mille tahansa sävyn, kylläisyyden ja vaaleuden yhdistelmälle.
Kuinka HSL→HEX muunnos toimii
- Muuta kylläisyys ja vaaleus murto-osiksi: 60% → 0.6.
- Laske kromaasisuus C = (1 − |2L − 1|) × S — näin selvität, kuinka kaukana väri on harmaasta.
- Aseta tuo kromaasisuus punan, vihreän ja sinisen kanaville sävyn mukaan, ja siirrä kaikkia kolmea arvolla L − C/2.
- Kerro jokainen kanava 255:llä, pyöristä ja kirjoita kahden heksadesimaalin numerona.
Esimerkkilaskelma
Pyöristys tapahtuu kerran, viimeisessä vaiheessa, kun kukin kanava napsautetaan kokonaiseksi 0–255-arvoksi. Tulos on lähin HEX-koodi HSL-syötteellesi ja yleensä identtinen design-työkalun näyttämän kanssa.
HSL ja HEX selitettynä
Mikä on HSL?
HSL jakaa värin sävyyn (0–360° väripyörällä), kylläisyyteen (kuinka värikäs, 0–100%) ja vaaleuteen (kuinka kirkas, 0–100%). Koska kukin osa vastaa tapaa, jolla ihmiset kuvaavat väriä, HSL on helpoin formaatti sävyjen, tummennosten ja yhtenäisten palettien rakentamiseen — käsin tai koodissa.
- Syntaksi:
- hsl(H, S%, L%)
- Arvoalue:
- 0–360°, 0–100%, 0–100%
- Parhaiten soveltuu:
- paletit, sävyt ja tummennokset, teemoittaminen
Mikä on HEX?
HEX-koodi on kuusinumeroinen heksadesimaali, joka tallentaa värin punaisen, vihreän ja sinisen kanavan eteen liitetyn # -merkin jälkeen. Kukin kahden merkin pari vastaa yhtä kanavaa, arvot 00 (ei lainkaan) – FF (täysi), mikä antaa saman 16,7 miljoonaa väriä kuin RGB mutta tiiviimmässä muodossa. HEX on oletus CSS:ssä, suunnittelutyökaluissa ja brändiohjeissa.
- Syntaksi:
- #RRGGBB
- Arvoalue:
- 00–FF per kanava
- Parhaiten soveltuu:
- CSS, suunnittelun luovutus, brändiohjeet
HSL → HEX viitetaulukko
Yleisimmät CSS-värit, muunnettu muodosta HSL muotoon HEX.
| Väri | 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 |