HSL is de vriendelijke manier om een kleur te kiezen; RGB is wat schermen, canvas‑API’s en afbeeldingscode daadwerkelijk gebruiken. Deze converter zet elke hue-, saturation- en lightness‑driehoek om in exacte 0–255 kanalen.
Hoe HSL naar RGB conversie werkt
- Zet S en L om naar breuken en bereken de chroma C = (1 − |2L − 1|) × S.
- Deel de hue door 60 om het segment op het kleurenwiel te vinden en bereken de tussenwaarde X = C × (1 − |(H/60 mod 2) − 1|).
- Ken C, X en 0 toe aan de R-, G- en B‑slots afhankelijk van dat segment.
- Voeg de lightness‑offset L − C/2 toe aan alle drie de kanalen en vermenigvuldig met 255.
Werkend voorbeeld
Het resultaat is exact tot aan de laatste afronding naar hele kanalen. Fractionele hue‑ of saturatiewaarden worden ondersteund en landen simpelweg op de dichtstbijzijnde RGB‑driehoek.
HSL en RGB 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 RGB?
RGB beschrijft een kleur als drie lichtkanalen — rood, groen en blauw — elk van 0 tot 255. Het weerspiegelt hoe schermen werken: alle drie op 255 geven wit, alle drie op 0 geven zwart. RGB is de juiste keuze wanneer je met de cijfers wilt rekenen, en rgba() voegt daar transparantie aan toe.
- Syntaxis:
- rgb(R, G, B)
- Bereik:
- 0–255 per kanaal
- Het meest geschikt voor:
- code, canvas, transparantie met rgba()
HSL naar RGB referentietabel
De meest voorkomende CSS-kleuren, geconverteerd van HSL naar RGB.
| Kleur | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |