RGB vertelt een scherm hoeveel licht het moet uitstralen; HSL vertelt je hoe de kleur er eigenlijk uitziet. De drie kanalen naar tint, verzadiging en lichtheid omzetten maakt een kleur gemakkelijk handmatig aanpasbaar.
Hoe RGB naar HSL conversie werkt
- Deel R, G en B door 255 zodat elke waarde tussen 0 en 1 ligt.
- Neem het maximum en het minimum van de drie — hun gemiddelde is de lichtheid L.
- Als maximum en minimum gelijk zijn, is de kleur grijs: tint en verzadiging zijn beide 0.
- Anders leid je S af uit de spreiding tussen maximum en minimum, en lees je H af van welk kanaal de maximumwaarde heeft.
Werkend voorbeeld
In principe exact. Omdat H, S en L meestal als afgeronde gehele waarden worden weergegeven, kan terugconversie een kanaal één of twee stappen verschuiven.
RGB en HSL uitgelegd
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()
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
RGB naar HSL referentietabel
De meest voorkomende CSS-kleuren, geconverteerd van RGB naar HSL.
| Kleur | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |