Een kleur kiezen in HSL voelt prettig, maar stylesheets, design-handoffs en merkkaders draaien nog op HEX. Deze converter overbrugt dat en geeft je de zescijferige code voor elke combinatie van tint, verzadiging en lichtheid.
Hoe HSL naar HEX conversie werkt
- Zet verzadiging en lichtheid om in fracties: 60% wordt 0,6.
- Bereken de chroma C = (1 − |2L − 1|) × S — dat is hoe ver de kleur van grijs afzit.
- Gebruik de tint om die chroma op de rood-, groen- en blauwkanaal te plaatsen, en verschuif vervolgens alle drie met L − C/2.
- Vermenigvuldig elk kanaal met 255, rond af en schrijf het als twee hexadecimale cijfers.
Werkend voorbeeld
Afronding gebeurt één keer, in de laatste stap, wanneer elk kanaal naar een geheel 0–255‑waarde wordt gezet. Het resultaat is de dichtstbijzijnde HEX-code bij je HSL‑invoer en meestal identiek aan wat een designtool laat zien.
HSL en HEX uitgelegd
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
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
HSL naar HEX referentietabel
De meest voorkomende CSS-kleuren, geconverteerd van HSL naar HEX.
| Kleur | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |