HEX naar HSL converter

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

Van HEX

HSL-waardehsl(10.59, 100%, 60%)

HSL naar HEX

Kleur aanpassen

Kleurtoon11°

Dekking100%

Lichtheid68%

Chroma0,210

Kleurtoon34°

Alle andere formaten

Voorbeelden: HEX naar HSL

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

Over HEX en HSL

HEX schrijft rood, groen en blauw elk als twee hexadecimale cijfers, zoals #ff5733. Het is de meest gebruikte manier om kleuren te noteren op het web en in ontwerptools.

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 HEX-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 HEX om naar HSL?

Plak of typ een HEX-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 HEX 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.