RGBA naar HSL converter

Plak een RGBA-waarde en krijg direct HSL. Andere formaten werken ook.

Van RGBA

Gelezen als RGB

HSL-waardehsla(10.59, 100%, 60%, 0.8)

HSL naar RGBA

Dezelfde kleur zonder transparantie, als dekkende HSL

Kleur aanpassen

Kleurtoon11°

Dekking80%

Lichtheid68%

Chroma0,210

Kleurtoon34°

Alle andere formaten

Dekkingstabel: HEX-alfa en RGBA

Bij 8-cijferige HEX bepalen de laatste twee cijfers de dekking: FF is volledig dekkend, 80 is ongeveer 50%, 00 is volledig transparant. De tabel toont de voorbeeldkleur in stappen van 5%.

Dekking	HEX-alfa	HEX	RGBA
100%	ff	#ff5733	rgba(255, 87, 51, 1)
95%	f2	#ff5733f2	rgba(255, 87, 51, 0.95)
90%	e6	#ff5733e6	rgba(255, 87, 51, 0.9)
85%	d9	#ff5733d9	rgba(255, 87, 51, 0.85)
80%	cc	#ff5733cc	rgba(255, 87, 51, 0.8)
75%	bf	#ff5733bf	rgba(255, 87, 51, 0.75)
70%	b3	#ff5733b3	rgba(255, 87, 51, 0.7)
65%	a6	#ff5733a6	rgba(255, 87, 51, 0.65)
60%	99	#ff573399	rgba(255, 87, 51, 0.6)
55%	8c	#ff57338c	rgba(255, 87, 51, 0.55)
50%	80	#ff573380	rgba(255, 87, 51, 0.5)
45%	73	#ff573373	rgba(255, 87, 51, 0.45)
40%	66	#ff573366	rgba(255, 87, 51, 0.4)
35%	59	#ff573359	rgba(255, 87, 51, 0.35)
30%	4d	#ff57334d	rgba(255, 87, 51, 0.3)
25%	40	#ff573340	rgba(255, 87, 51, 0.25)
20%	33	#ff573333	rgba(255, 87, 51, 0.2)
15%	26	#ff573326	rgba(255, 87, 51, 0.15)
10%	1a	#ff57331a	rgba(255, 87, 51, 0.1)
5%	0d	#ff57330d	rgba(255, 87, 51, 0.05)
0%	00	#ff573300	rgba(255, 87, 51, 0)

Voorbeelden: RGBA naar HSL

Kleur	RGBA	HSL
	rgba(255, 0, 0, 1)	hsl(0, 100%, 50%)
	rgba(0, 255, 0, 1)	hsl(120, 100%, 50%)
	rgba(0, 0, 255, 1)	hsl(240, 100%, 50%)
	rgba(255, 255, 255, 1)	hsl(0, 0%, 100%)
	rgba(0, 0, 0, 1)	hsl(0, 0%, 0%)
	rgba(128, 128, 128, 1)	hsl(0, 0%, 50.2%)
	rgba(255, 87, 51, 1)	hsl(10.59, 100%, 60%)
	rgba(59, 130, 246, 1)	hsl(217.22, 91.22%, 59.8%)
	rgba(16, 185, 129, 1)	hsl(160.12, 84.08%, 39.41%)
	rgba(245, 158, 11, 1)	hsl(37.69, 92.13%, 50.2%)
	rgba(139, 92, 246, 1)	hsl(258.31, 89.53%, 66.27%)
	rgba(236, 72, 153, 1)	hsl(330.37, 81.19%, 60.39%)

Over RGBA en HSL

RGBA is RGB met een alfakanaal voor de dekking, geschreven als rgba(255, 87, 51, 0.5). Alfa loopt van 0 (volledig transparant) tot 1 (volledig dekkend). Dezelfde dekking kun je als 8-cijferige HEX schrijven, zoals #ff573380.

HSL beschrijft de kleurtoon in graden en de verzadiging en lichtheid in procenten. Het is makkelijk te lezen, maar de lichtheid is niet gelijkmatig voor het oog: geel op 50% oogt veel lichter dan blauw op 50%.

Zo werkt de omzetting

We lezen de RGBA-waarde, zetten die met de matrices uit de specificatie CSS Color 4 om naar CIE XYZ en daarna naar HSL. Waarden buiten de doelgamut worden aangepast met het algoritme van CSS Color 4: lichtheid en kleurtoon blijven, de chroma daalt.

Vragen en antwoorden

Hoe zet ik RGBA om naar HSL?

Plak of typ een RGBA-waarde in het veld hierboven. PickShade zet hem al tijdens het typen om met de formules van CSS Color 4, en met één klik kopieer je de HSL-waarde.

Is de omzetting van RGBA naar HSL exact?

De berekening is exact en het resultaat wordt alleen voor de weergave afgerond, met genoeg cijfers om terug te rekenen naar dezelfde kleur. Past de kleur niet in de doelgamut, dan waarschuwt PickShade je en toont de dichtstbijzijnde kleur die wel past.

Kan ik tegelijk andere formaten krijgen?

Ja. Alle andere formaten, waaronder OKLCH, Display P3, Tailwind, SwiftUI, Flutter en Android, staan onder het resultaat en kopieer je met één klik.

Is deze converter gratis?

Ja. Hij is gratis, vraagt geen account en draait volledig in je browser.