HSLA–HSB / HSV-muunnin

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

Lähtömuoto: HSLA

Tunnistettu: HSL

HSB / HSV-arvohsv(10.59 80% 100% / 0.8)

HSB / HSV–HSLA-muunnin

Sama väri ilman läpinäkyvyyttä, peittävänä HSB / HSV-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–HSB / HSV-esimerkkejä

Väri	HSLA	HSB / HSV
	hsla(0, 100%, 50%, 1)	hsv(0 100% 100%)
	hsla(120, 100%, 50%, 1)	hsv(120 100% 100%)
	hsla(240, 100%, 50%, 1)	hsv(240 100% 100%)
	hsla(0, 0%, 100%, 1)	hsv(0 0% 100%)
	hsla(0, 0%, 0%, 1)	hsv(0 0% 0%)
	hsla(0, 0%, 50.2%, 1)	hsv(0 0% 50.2%)
	hsla(10.59, 100%, 60%, 1)	hsv(10.59 80% 100%)
	hsla(217.22, 91.22%, 59.8%, 1)	hsv(217.22 76.02% 96.47%)
	hsla(160.12, 84.08%, 39.41%, 1)	hsv(160.12 91.35% 72.55%)
	hsla(37.69, 92.13%, 50.2%, 1)	hsv(37.69 95.51% 96.08%)
	hsla(258.31, 89.53%, 66.27%, 1)	hsv(258.31 62.6% 96.47%)
	hsla(330.37, 81.19%, 60.39%, 1)	hsv(330.37 69.49% 92.55%)

Tietoa muodoista HSLA ja HSB / HSV

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.

HSV eli HSB muodostuu sävystä, kylläisyydestä ja kirkkaudesta. Photoshop, Figma ja useimmat värivalitsimet käyttävät sitä neliönmuotoisessa valitsimessa.

Näin muunnos toimii

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

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

Onko HSLA–HSB / HSV-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.