HSL kuvaa väriä samalla tavalla kuin ihmiset puhuvat siitä: mikä sävy, kuinka värikäs, kuinka kirkas. HEX-koodin muuntaminen HSL:ksi on nopein tapa saada muokattava väri — vaalentaa, mykistää tai rakentaa koko asteikko.
Kuinka HEX→HSL muunnos toimii
- Muuta HEX ensin RGB:ksi ja jaa kukin kanava 255:llä, jotta arvot ovat 0–1-välillä.
- Etsi kolmen arvon suurin ja pienin. Niiden keskiarvo on vaaleus L.
- Niiden välinen erotus määrää kylläisyyden S: jaa se (2 − max − min):llä vaaleille väreille tai (max + min):llä tummille.
- Suurinta arvoa pitävä kanava päättää sävyn H — punalla 0°, vihreällä 120°, sinisellä 240° — ja muut kaksi kanavaa asemoivat sävyn segmentin sisällä.
Esimerkkilaskelma
Matematiikka on tarkkaa, mutta HSL-arvot yleensä pyöristetään kokonaisiksi asteiksi ja prosenteiksi. Takaisinmuunnos voi siksi olla yhden tai kahden RGB-askeleen päässä alkuperäisestä — käytännössä näkymätöntä, mutta hyvä tietää, jos teet toistuvia round-trip-muunnoksia.
HEX ja HSL selitettynä
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
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
HEX → HSL viitetaulukko
Yleisimmät CSS-värit, muunnettu muodosta HEX muotoon HSL.
| Väri | 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%) |