HSL–RGB-värimuunnin

HSL:n muuntaminen RGB:ksi – tarkka ja häviötön värimuunnos

Tällä sivulla syötät värin HSL-muodossa – sävy asteina (0–360) sekä kylläisyys ja vaaleus prosentteina – ja työkalu näyttää heti vastaavat RGB-arvot (0–255). Näin pääset ihmisen värijärkeilyyn rakennetusta mallista suoraan niihin tarkkoihin numeroihin, joita näyttö käyttää valonlähetykseen.

Miksi HSL muunnetaan RGB:ksi – ja miten tämä sivu eroaa muista

HSL on suunniteltu ihmisen väriajattelua varten. Kun muutat vaaleutta, sävy pysyy täsmälleen samana – tämä on syy, miksi HSL on niin käyttökelpoinen palettien ja teemojen luonnissa. RGB taas on työtila, jossa näytön värimatematiikka tapahtuu. Jokainen pikseli koostuu punaisesta, vihreästä ja sinisestä valosta, ja niiden intensiteetit määritellään kokonaislukuina 0–255.

Tämä sivu eroaa muista värinmuunnostyökaluista kolmella keskeisellä tavalla:

• Häviötön muunnos. Jokainen kelvollinen HSL-arvo tuottaa täsmälleen yhden RGB-kolmikon, joka mahtuu näytön toistamaan alueeseen. Toisin kuin LAB- tai CMYK-muunnoksissa, ei tapahdu out-of-gamut-leikkausta – väri ei koskaan siirry toiseen sävyyn, kun muunnat takaisin.

• Kylläisyyden säilyminen vaaleutta muutettaessa. Tämä on HSL-mallin erityisominaisuus. Jos esimerkiksi väri (240°, 80%, 60%) muutetaan vaaleuteen 40%, saat (240°, 80%, 40%) – täsmälleen saman sävyn ja kylläisyyden, vain tummempana. RGB:ssä tällainen operaatio vaatisi monimutkaisempaa laskentaa ja johtaisi helposti värin sävyn muuttumiseen.

• Täydellinen kaksisuuntainen yhteensopivuus. Jokainen RGB-kolmikko (0–255) voidaan muuntaa HSL:ksi ja takaisin ilman pyöristysvirheitä. Tämä on mahdollista, koska molemmat mallit kuvaavat samaa lineaarista RGB-avaruutta – HSL on vain matemaattinen uudelleenjärjestely.

Kuinka muunnos tapahtuu – standardialgoritmi ja tarkat arvot

Muunnos noudattaa CSS-värimäärityksen standardia (CSS Color Module Level 4). Algoritmi koostuu kolmesta vaiheesta:

1. Normalisointi. Sävy (0–360) muutetaan radiaaneiksi trigonometriaa varten. Kylläisyys ja vaaleus jaetaan 100:lla, jotta ne ovat välillä 0–1.

2. HSL -> RGB-keskivaiheet. Lasketaan kolme apufunktiota: hue-to-rgb, joka palauttaa punaisen, vihreän ja sinisen arvot välillä 0–1. Kaava on:

   • Jos vaaleus L < 0,5: max = L * (1 + S), muuten max = L + S – L*S
   • Min = 2*L – max
   • Jokainen komponentti (R, G, B) saadaan hue-to-rgb(min, max, hue_offset) -funktiosta. Hue_offset on 0°, 120° ja 240° vastaaville pääväreille.

3. Skalaus kokonaisluvuiksi. Tulokset kerrotaan 255:llä ja pyöristetään lähimpään kokonaislukuun.

Esimerkki: HSL(243°, 75%, 59%)

• L = 0,59, S = 0,75
• max = 0,59 + 0,75 – 0,590,75 = 1,2? Tarkistetaan: 0,59 + 0,75 = 1,34, vähennä 0,4425 = 0,8975. Min = 20,59 – 0,8975 = 0,2825.
• Punainen: hue-to-rgb(0,2825, 0,8975, 243°+0°) = 0,2825 + (0,8975–0,2825)*max(0, 1 – |(243/60 % 2) – 1|)... Laskeminen antaa R=79/255, G=70/255, B=229/255. Tarkemmin: R≈0,31, G≈0,275, B≈0,898 → (79, 70, 229).

Kaikki laskenta tapahtuu suoraan selaimessasi – mitään syöttämääsi tietoa ei lähetetä palvelimelle.

Syöttö ja tulosteet – miten työkalua käytetään

Syöttö: Kirjoita HSL-arvo muodossa 243, 75%, 59% – sävy väliltä 0–360, kylläisyys ja vaaleus prosentteina. Välilyönnit ja pilkut ovat joustavia. Työkalu lukee kenttää jatkuvasti ja päivittää tulosteet välittömästi.

Tulosteet – kaikki päivittyvät reaaliajassa:

Virhetilanteet ja reunatapaukset – mitä tehdä, kun arvo on pielessä

Jos syötät HSL-arvon väärässä muodossa tai lukujen ulkopuolella, työkalu näyttää virheilmoituksen: "Syötä HSL arvona 0–360 ja kaksi prosenttilukua, esim. 243, 75%, 59%."

Yleisimmät virheet:

• Sävy yli 360° tai alle 0°. Algoritmi ei käsittele modulo-aritmetiikkaa – 400° ei ole kelvollinen. Sivun logiikka olettaa, että syöte on jo valmiiksi normalisoitu.
• Kylläisyys tai vaaleus ilman prosenttimerkkiä. 75 ilman % tulkitaan luvuksi 75, ei 75%:ksi. Tämä aiheuttaa joko suuren virheen (75% -> 0,75, kun taas 75 = 75% tarkoittaa 0,75? Ei – jos syötät 75, se tulkitaan kokonaisluvuksi, ja työkalu odottaa prosenttia, joten virhe tulee.)
• Pilkut ja välit väärin. 243 75% 59% on ok, 243,75%,59% toimii, mutta 243,75%,59 (ilman prosenttia) ei.

CMYK-tulosteen rajoitus on syytä ymmärtää. CMYK-arvot ovat matemaattinen estimaatti, joka perustuu lineaariseen muunnokseen RGB:stä. Todellisessa painatuksessa paperi, muste ja tulostimen profiili vaikuttavat lopputulokseen. Älä koskaan käytä tämän työkalun CMYK-arvoja suoraan painotyössä – käytä ICC-profiiliin perustuvaa muunninta.

Kenelle tämä työkalu on tehty

• Suunnittelijat, jotka rakentavat väripaletteja tai teemoja ja tarvitsevat tarkat RGB-arvot CSS:ää tai muuta koodia varten. HSL on palettien luonnissa ylivoimainen, koska voit muuttaa vaaleutta ja kylläisyyttä sävyä muuttamatta. Työkalu antaa suoraan ne RGB-arvot, jotka menevät background-color: rgb(79,70,229) tms. lausekkeeseen.

• Front-end-kehittäjät, jotka siirtävät väriarvoja suunnittelutyökalusta (joka usein käyttää HSL) CSS:ään tai muuhun koodiin, joka odottaa RGB:tä. Monet kehysjärjestelmät (kuten Tailwind CSS) käyttävät RGB:tä, vaikka suunnitteluvaiheessa värejä käsitellään HSL:ssä.

• Kuka tahansa, joka haluaa ajatella värejä ihmislähtöisin termein (sävy, kylläisyys, vaaleus) ja tarvitsee sitten tarkat näyttövalmiit numerot. Esimerkiksi saavutettavuustarkastelussa voit muuttaa vaaleutta riittävän kontrastin saavuttamiseksi – ja työkalu kertoo, miltä se RGB:nä näyttää.

Värimallien ymmärtäminen – taustaa ja käytännön sovelluksia

Additiivinen vs. subtraktiivinen värimalli

• RGB on additiivinen: musta on (0,0,0), valkoinen (255,255,255). Väri syntyy valon lisäämisestä. Tämä vastaa näyttöjä, lamppuja ja projektoreita.
• CMYK on subtraktiivinen: valkoinen on (0,0,0,0), musta (0,0,0,100). Väri syntyy valon vähentämisestä paperin avulla. Siksi CMYK-muunnos on arvio – todellinen musta voi olla (50,50,50,100) riippuen tulostimesta.

Väriskaala (color gamut) HSL ja RGB toimivat samassa RGB-avaruudessa, joten muunnos ei koskaan tuota väriä, jota näyttö ei voi toistaa. Tämä on olennainen ero LAB- tai CMYK-muunnoksiin, joissa väri voi jäädä näyttöalueen ulkopuolelle (out-of-gamut). Työkalu ei tarvitse gamut-leikkausalgoritmia.

Värimallien käyttötarkoitukset

• HEX – kompakti esitysmuoto HTML:ssä ja CSS:ssä. #7946E5 on lyhyempi kuin rgb(79,70,229).
• RGB – tarkka valovoima-arvo, käytetään CSS:n lisäksi esim. canvas-piirrossa ja kuvankäsittelyssä.
• HSL – ihmislähtöinen, erityisen hyvä palettien luontiin ja teemojen hallintaan.
• HSV (tai HSB) – samankaltainen kuin HSL, mutta arvo (V) on suoraan maksimikomponentti. Käyttökelpoinen esim. kuvankäsittelyssä, kun halutaan erottaa värisävy ja kirkkaus toisistaan.
• LAB – laite- ja välineestä riippumaton väriavaruus, jossa väriero on suunnilleen euklidinen etäisyys. Käytetään väritarkkuuden mittauksessa ja sovituksessa.

Usein kysyttyä

Miksi CMYK-arvot eivät sovi painatukseen? Koska ne ovat matemaattinen estimaatti, joka ei ota huomioon paperin pintaa, musteen imeytymistä tai tulostimen omaa profiilia. Ammattimaiseen painatukseen tarvitaan ICC-profiiliin perustuva muunnos, kuten Adobe Color -työkalulla.

Voinko syöttää HSL-arvon ilman prosenttimerkkejä? Työkalu odottaa muotoa hue, saturation%, lightness%. Ilman prosenttimerkkejä se tulkitsee luvun kokonaislukuna, mikä johtaa virheeseen.

Miksi hue 360° ja 0° tuottavat eri RGB-arvot? Hue-asteikko on ympyrä, jossa 0° ja 360° ovat sama sävy (punainen). Algoritmi normalisoi arvot modulo 360, joten 360° voidaan hyväksyä, mutta tarkka käsittely riippuu toteutuksesta. Työkalu hyväksyy arvot 0–360 mukaan lukien 360, joka tuottaa saman punaisen kuin 0°.

Miten muunnos tapahtuu, jos syötän arvon, jossa kylläisyys on 0%? Kun kylläisyys on 0%, väri on harmaa. Tällöin R=G=B. RGB-arvot lasketaan kaavalla: R = G = B = L * 255. Esimerkiksi HSL(120°, 0%, 50%) tuottaa RGB(128,128,128).

Onko muunnos kaksisuuntainen? Kyllä. Jos muunnat HSL → RGB → takaisin HSL, saat täsmälleen alkuperäisen arvon (lukuun ottamatta mahdollisia pyöristysvirheitä, jotka ovat alle 0,5 %). Tämä johtuu siitä, että molemmat mallit käyttävät samaa lineaarista RGB-avaruutta.

Mitä eroa on HSL ja HSV? HSL:ssä vaaleus (Lightness) on keskimääräinen kirkkaus (min+max)/2. HSV:ssä arvo (Value) on maksimikomponentti. Esimerkiksi kirkkaan punainen (RGB 255,0,0) on HSL(0°, 100%, 50%) ja HSV(0°, 100%, 100%). HSL pyrkii tasapainottamaan kirkkauden ja pimeyden, kun HSV pitää kirkkaimman komponentin maksimissa.