HSLA–HSL-muunnin
Liitä HSLA-arvo, niin saat HSL-arvon heti. Myös muut muodot käyvät.
Tunnistettu: HSL
Sama väri ilman läpinäkyvyyttä, peittävänä HSL-arvona
Säädä väriä
Kaikki muut muodot
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) |
HSLA–HSL-esimerkkejä
Tietoa muodoista HSLA ja HSL
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.
HSL ilmoittaa sävyn asteina sekä kylläisyyden ja vaaleuden prosentteina. Sitä on helppo lukea, mutta sen vaaleus ei ole havainnollisesti tasainen: 50 %:n keltainen näyttää paljon vaaleammalta kuin 50 %:n sininen.
Näin muunnos toimii
Luemme HSLA-arvon, muunnamme sen CIE XYZ -avaruuteen CSS Color 4 -määrityksen matriiseilla ja siitä edelleen HSL-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 HSLA-arvon HSL-muotoon?
Liitä tai kirjoita HSLA-arvo yllä olevaan kenttään. PickShade muuntaa sen CSS Color 4 -kaavoilla jo kirjoittaessasi, ja HSL-arvon kopioit yhdellä napsautuksella.
Onko HSLA–HSL-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.