HSLA–HEX-muunnin

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

Lähtömuoto: HSLA

Tunnistettu: HSL

HEX-arvo#ff5733cc

HEX–HSLA-muunnin

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

Väri	HSLA	HEX
	hsla(0, 100%, 50%, 1)	#ff0000
	hsla(120, 100%, 50%, 1)	#00ff00
	hsla(240, 100%, 50%, 1)	#0000ff
	hsla(0, 0%, 100%, 1)	#ffffff
	hsla(0, 0%, 0%, 1)	#000000
	hsla(0, 0%, 50.2%, 1)	#808080
	hsla(10.59, 100%, 60%, 1)	#ff5733
	hsla(217.22, 91.22%, 59.8%, 1)	#3b82f6
	hsla(160.12, 84.08%, 39.41%, 1)	#10b981
	hsla(37.69, 92.13%, 50.2%, 1)	#f59e0b
	hsla(258.31, 89.53%, 66.27%, 1)	#8b5cf6
	hsla(330.37, 81.19%, 60.39%, 1)	#ec4899

Tietoa muodoista HSLA ja HEX

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.

HEX kirjoittaa punaisen, vihreän ja sinisen kukin kahdella heksadesimaalinumerolla, esimerkiksi #ff5733. Se on yleisin tapa merkitä värejä verkossa ja suunnittelutyökaluissa.

Näin muunnos toimii

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

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

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