HSL on ystävällinen tapa valita väri, RGB taas on se, mitä näytöt, canvas-API:t ja kuvakoodit todella käyttävät. Tämä muunnin kääntää minkä tahansa sävyn, kylläisyyden ja valoisuuden tarkan 0–255 -kanavatriplaaksi.
Kuinka HSL→RGB muunnos toimii
- Muunna S ja L murtoluvuiksi ja laske kroma C = (1 − |2L − 1|) × S.
- Jaa sävy H kuudellakymmenellä löytääksesi sen segmentin väripyörällä ja laske välivaiheen arvo X = C × (1 − |(H/60 mod 2) − 1|).
- Aseta C, X ja 0 R-, G- ja B-paikoille kyseisen segmentin mukaan.
- Lisää valoisuuspoikkeama L − C/2 kaikkiin kanaviin ja kerro lopuksi 255:llä.
Esimerkkilaskelma
Tulos on tarkka siihen asti, kunnes pyöristetään kokonaisiin kanava-arvoihin. Murtosävyjä tai -kylläisyyksiä tuetaan — ne sijoittuvat yksinkertaisesti lähimpään RGB-triplaukseen.
HSL ja RGB 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 RGB?
RGB kuvaa väriä kolmella valokanavalla — red, green ja blue — kukin 0–255. Se peilaa sitä, miten näytöt toimivat: kaikki kanavat 255 antavat valkoisen, kaikki 0 mustan. RGB on oikea valinta, kun sinun täytyy laskea väreillä, ja rgba() lisää läpinäkyvyyden päälle.
- Syntaksi:
- rgb(R, G, B)
- Arvoalue:
- 0–255 per kanava
- Parhaiten soveltuu:
- koodi, canvas, läpinäkyvyys rgba():lla
HSL → RGB viitetaulukko
Yleisimmät CSS-värit, muunnettu muodosta HSL muotoon RGB.
| Väri | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |