HSLA naar LCH converter

Plak een HSLA-waarde en krijg direct LCH. Andere formaten werken ook.

Van HSLA

Gelezen als HSL

LCH-waardelch(61.03 84.67 41.37 / 0.8)

LCH naar HSLA

Dezelfde kleur zonder transparantie, als dekkende LCH

Kleur aanpassen

Kleurtoon11°

Dekking80%

Lichtheid68%

Chroma0,210

Kleurtoon34°

Alle andere formaten

Dekkingstabel: HEX-alfa en HSLA

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	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)

Voorbeelden: HSLA naar LCH

Kleur	HSLA	LCH
	hsla(0, 100%, 50%, 1)	lch(54.29 106.84 40.86)
	hsla(120, 100%, 50%, 1)	lch(87.82 113.33 134.38)
	hsla(240, 100%, 50%, 1)	lch(29.57 131.2 301.36)
	hsla(0, 0%, 100%, 1)	lch(100 0 0)
	hsla(0, 0%, 0%, 1)	lch(0 0 0)
	hsla(0, 0%, 50.2%, 1)	lch(53.59 0 0)
	hsla(10.59, 100%, 60%, 1)	lch(61.03 84.67 41.37)
	hsla(217.22, 91.22%, 59.8%, 1)	lch(54.62 66.37 277.59)
	hsla(160.12, 84.08%, 39.41%, 1)	lch(66.69 53.46 161.39)
	hsla(37.69, 92.13%, 50.2%, 1)	lch(72.79 80.1 70.35)
	hsla(258.31, 89.53%, 66.27%, 1)	lch(50.69 85.19 302.56)
	hsla(330.37, 81.19%, 60.39%, 1)	lch(57.31 68.24 354.01)

Over HSLA en LCH

HSLA is HSL met een alfakanaal voor de dekking, geschreven als hsla(11, 100%, 60%, 0.5). Alfa loopt van 0 (volledig transparant) tot 1 (volledig dekkend), en moderne CSS accepteert het ook binnen hsl().

CIE LCH is Lab in poolcoördinaten: lichtheid, chroma en kleurtoon. Het is makkelijker om mee te werken dan Lab en CSS ondersteunt het als lch().

Zo werkt de omzetting

We lezen de HSLA-waarde, zetten die met de matrices uit de specificatie CSS Color 4 om naar CIE XYZ en daarna naar LCH. 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 HSLA om naar LCH?

Plak of typ een HSLA-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 LCH-waarde.

Is de omzetting van HSLA naar LCH 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.