HSLA–HWB-muunnin

Liitä HSLA-arvo, niin saat HWB-arvon heti. Myös muut muodot käyvät.

Lähtömuoto: HSLA

Tunnistettu: HSL

HWB-arvohwb(10.59 20% 0% / 0.8)

HWB–HSLA-muunnin

Sama väri ilman läpinäkyvyyttä, peittävänä HWB-arvona

Säädä väriä

Sävy11°

Peittävyys80 %

Vaaleus68 %

Kroma0,210

Sävy34°

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–HWB-esimerkkejä

Väri	HSLA	HWB
	hsla(0, 100%, 50%, 1)	hwb(0 0% 0%)
	hsla(120, 100%, 50%, 1)	hwb(120 0% 0%)
	hsla(240, 100%, 50%, 1)	hwb(240 0% 0%)
	hsla(0, 0%, 100%, 1)	hwb(0 100% 0%)
	hsla(0, 0%, 0%, 1)	hwb(0 0% 100%)
	hsla(0, 0%, 50.2%, 1)	hwb(0 50.2% 49.8%)
	hsla(10.59, 100%, 60%, 1)	hwb(10.59 20% 0%)
	hsla(217.22, 91.22%, 59.8%, 1)	hwb(217.22 23.14% 3.53%)
	hsla(160.12, 84.08%, 39.41%, 1)	hwb(160.12 6.27% 27.45%)
	hsla(37.69, 92.13%, 50.2%, 1)	hwb(37.69 4.31% 3.92%)
	hsla(258.31, 89.53%, 66.27%, 1)	hwb(258.31 36.08% 3.53%)
	hsla(330.37, 81.19%, 60.39%, 1)	hwb(330.37 28.24% 7.45%)

Tietoa muodoista HSLA ja HWB

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.

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.

Näin muunnos toimii

Luemme HSLA-arvon, muunnamme sen CIE XYZ -avaruuteen CSS Color 4 -määrityksen matriiseilla ja siitä edelleen HWB-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 HWB-muotoon?

Liitä tai kirjoita HSLA-arvo yllä olevaan kenttään. PickShade muuntaa sen CSS Color 4 -kaavoilla jo kirjoittaessasi, ja HWB-arvon kopioit yhdellä napsautuksella.

Onko HSLA–HWB-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.