HWB–HSLA-muunnin
Liitä HWB-arvo, niin saat HSLA-arvon heti. Myös muut muodot käyvät.
Peittävyystaulukko: HEX-alfa ja HSLA
8-numeroisessa HEX-koodissa kaksi viimeistä numeroa määrittävät peittävyyden: FF on täysin peittävä, 80 noin 50 % ja 00 täysin läpinäkyvä. Taulukko näyttää esimerkkivärin 5 %:n välein.
| Peittävyys | HEX-alfa | HEX | HSLA |
|---|---|---|---|
| 100% | ff | #ff5733 | hsla(10.59, 100%, 60%, 1) |
| 95% | f2 | #ff5733f2 | hsla(10.59, 100%, 60%, 0.95) |
| 90% | e6 | #ff5733e6 | hsla(10.59, 100%, 60%, 0.9) |
| 85% | d9 | #ff5733d9 | hsla(10.59, 100%, 60%, 0.85) |
| 80% | cc | #ff5733cc | hsla(10.59, 100%, 60%, 0.8) |
| 75% | bf | #ff5733bf | hsla(10.59, 100%, 60%, 0.75) |
| 70% | b3 | #ff5733b3 | hsla(10.59, 100%, 60%, 0.7) |
| 65% | a6 | #ff5733a6 | hsla(10.59, 100%, 60%, 0.65) |
| 60% | 99 | #ff573399 | hsla(10.59, 100%, 60%, 0.6) |
| 55% | 8c | #ff57338c | hsla(10.59, 100%, 60%, 0.55) |
| 50% | 80 | #ff573380 | hsla(10.59, 100%, 60%, 0.5) |
| 45% | 73 | #ff573373 | hsla(10.59, 100%, 60%, 0.45) |
| 40% | 66 | #ff573366 | hsla(10.59, 100%, 60%, 0.4) |
| 35% | 59 | #ff573359 | hsla(10.59, 100%, 60%, 0.35) |
| 30% | 4d | #ff57334d | hsla(10.59, 100%, 60%, 0.3) |
| 25% | 40 | #ff573340 | hsla(10.59, 100%, 60%, 0.25) |
| 20% | 33 | #ff573333 | hsla(10.59, 100%, 60%, 0.2) |
| 15% | 26 | #ff573326 | hsla(10.59, 100%, 60%, 0.15) |
| 10% | 1a | #ff57331a | hsla(10.59, 100%, 60%, 0.1) |
| 5% | 0d | #ff57330d | hsla(10.59, 100%, 60%, 0.05) |
| 0% | 00 | #ff573300 | hsla(10.59, 100%, 60%, 0) |
HWB–HSLA-esimerkkejä
Tietoa muodoista HWB ja HSLA
HWB kuvaa värin sävyn sekä siihen sekoitetun valkoisen ja mustan määrän avulla. Se kuuluu CSS Color 4:ään ja on kätevä vaaleampien ja tummempien vivahteiden tekemiseen.
HSLA on HSL, johon on lisätty peittävyyden alfakanava, esimerkiksi hsla(11, 100%, 60%, 0.5). Alfa vaihtelee 0:sta (täysin läpinäkyvä) 1:een (täysin peittävä), ja moderni CSS hyväksyy sen myös hsl()-funktiossa.
Näin muunnos toimii
Luemme HWB-arvon, muunnamme sen CIE XYZ -avaruuteen CSS Color 4 -määrityksen matriiseilla ja siitä edelleen HSLA-muotoon. Kohdevärialueen ulkopuoliset arvot sovitetaan CSS Color 4:n algoritmilla, joka säilyttää vaaleuden ja sävyn ja pienentää kromaa.
Kysymyksiä ja vastauksia
Miten muunnan HWB-arvon HSLA-muotoon?
Liitä tai kirjoita HWB-arvo yllä olevaan kenttään. PickShade muuntaa sen CSS Color 4 -kaavoilla jo kirjoittaessasi, ja HSLA-arvon kopioit yhdellä napsautuksella.
Onko HWB–HSLA-muunnos tarkka?
Laskenta on tarkka, ja tulos pyöristetään vain näyttämistä varten niin moneen numeroon, että takaisin muunnettuna saat saman värin. Jos väri ei mahdu kohdevärialueelle, PickShade varoittaa ja näyttää lähimmän värin, joka mahtuu.
Saanko muut muodot samalla kertaa?
Kyllä. Kaikki muut muodot, myös OKLCH, Display P3, Tailwind, SwiftUI, Flutter ja Android, näkyvät tuloksen alla, ja ne kopioituvat yhdellä napsautuksella.
Onko muunnin ilmainen?
Kyllä. Se on ilmainen, ei vaadi rekisteröitymistä ja toimii kokonaan selaimessasi.