HSL beschrijft een kleur zoals mensen erover praten: welke tint, hoe kleurrijk, hoe licht. Een HEX-code naar HSL converteren is de snelste manier om een kleur in een vorm te krijgen die je daadwerkelijk kunt bijsturen — lichter maken, dempen of er een hele schaal van bouwen.
Hoe HEX naar HSL conversie werkt
- Converteer de HEX-code naar RGB en deel elk kanaal door 255, zodat alle drie tussen 0 en 1 zitten.
- Vind de grootste en de kleinste van de drie waarden. Hun gemiddelde is de lichtheid L.
- De spreiding daartussen bepaalt de verzadiging S: deel die door (2 − max − min) voor lichte kleuren, of door (max + min) voor donkere.
- Het kanaal met de maximale waarde bepaalt de tint H — rood bij 0°, groen bij 120°, blauw bij 240° — en de andere twee kanalen positioneren de tint binnen dat segment.
Werkend voorbeeld
De rekensommen zijn exact, maar HSL-waarden worden normaal afgerond op hele graden en procenten. Terugconversie kan daardoor één of twee RGB-stappen van het origineel afwijken — in de praktijk onzichtbaar, maar goed om te weten als je kleuren herhaaldelijk heen en weer zet.
HEX en HSL uitgelegd
Wat is HEX?
Een HEX-code is een zescijferig hexadecimaal getal dat de rode, groene en blauwe kanaalwaarde van een kleur opslaat achter een voorloop-#. Elk paar cijfers staat voor één kanaal, van 00 (geen) tot FF (vol), wat dezelfde 16,7 miljoen kleuren levert als RGB in een veel kortere notatie. HEX is de standaard in CSS, ontwerp-tools en merkpagina's.
- Syntaxis:
- #RRGGBB
- Bereik:
- 00–FF per kanaal
- Het meest geschikt voor:
- CSS, design-overdracht, merkrichtlijnen
Wat is HSL?
HSL splitst een kleur in hue (0–360° op het kleurwiel), saturation (hoe kleurrijk, 0–100%) en lightness (hoe helder, 0–100%). Omdat elk deel overeenkomt met hoe mensen kleur beschrijven, is HSL het makkelijkste formaat om tinten, schaduwen en consistente paletten te bouwen — handmatig of in code.
- Syntaxis:
- hsl(H, S%, L%)
- Bereik:
- 0–360°, 0–100%, 0–100%
- Het meest geschikt voor:
- paletten, tinten en schaduwen, theming
HEX naar HSL referentietabel
De meest voorkomende CSS-kleuren, geconverteerd van HEX naar HSL.
| Kleur | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |