Waarom HSL naar RGB? Twee manieren om kleur te denken
Als je met kleur werkt op een scherm, kom je onvermijdelijk twee modellen tegen: HSL en RGB. HSL (Hue, Saturation, Lightness) is gebouwd voor menselijk redeneren over kleur. Je kunt de tint handhaven terwijl je alleen de lichtheid aanpast – iets wat in RGB niet vanzelfsprekend is. RGB (Red, Green, Blue) daarentegen is de werkelijke werkruimte van elk scherm. Elk pixel krijgt exacte getallen van 0 tot 255 voor rood, groen en blauw, en die bepalen hoeveel licht er wordt uitgezonden.
Deze pagina vertaalt HSL direct naar RGB, en dat is niet triviaal. Het bijzondere is dat de omzetting verliesvrij is: elke geldige HSL-waarde levert precies één RGB-triplet op dat binnen het weergavebereik valt. Er treedt geen kleurverschuiving op bij het terugrekenen. Dit in tegenstelling tot conversies vanuit bijvoorbeeld LAB of CMYK naar RGB, waar kleuren buiten het schermgamma kunnen vallen en moeten worden afgekapt – met kleurverschuiving als gevolg.
De tool werkt in je browser, lokaal. Niets van wat je invoert wordt geüpload. Dat is niet alleen privacyvriendelijk, maar ook snel: zodra je een HSL-waarde aanpast, worden alle andere velden direct bijgewerkt.
Hoe de conversie werkt: van graden en percentages naar 0–255
HSL is opgebouwd uit drie componenten:
- Hue (tint): een waarde van 0 tot 360 graden, overeenkomend met de kleurencirkel. 0° = rood, 120° = groen, 240° = blauw.
- Saturation (verzadiging): percentage van 0% (grijs) tot 100% (volle kleur).
- Lightness (lichtheid): percentage van 0% (zwart) tot 100% (wit).
De invoer die je typt, volgt het patroon: 243, 75%, 59% — eerst de hue (geheel getal), dan de saturatie als percentage, dan de lichtheid als percentage. Een komma en spatie zijn gebruikelijk, maar de tool interpreteert ook andere notaties zolang de volgorde klopt.
De omzetting naar RGB volgt een vaste wiskundige procedure, gebaseerd op de standaard uit de CSS Color Module Level 4. Er wordt eerst de relatieve luminantie per kanaal berekend met behulp van een hulpvariabele C (chroma) die afhangt van saturatie en lichtheid. Vervolgens wordt de hue in zes sectoren van 60° verdeeld om te bepalen welk kanaal leidend is. De RGB-waarden die eruit rollen, liggen altijd tussen 0 en 255.
Voorbeeld: neem HSL(243, 75%, 59%). De chroma C = (1 - |2 * 0.59 - 1|) * 0.75 = (1 - 0.18) * 0.75 = 0.615. De hue in radialen 243° -> 4.241 rad. De hue modulo 60° = 243° - 4*60° = 3°. Het aandeel X = C * (1 - |(hue / 60) mod 2 - 1|) = 0.615 * (1 - |0.05 - 1|) = 0.615 * (1 - 0.95) = 0.03075. Vervolgens RGB = (X, 0, C) verschoven met m (lightness - C/2) = 0.59 - 0.3075 = 0.2825. De uiteindelijke waarden: R = (X+m)*255 ≈ (0.03075+0.2825)*255 ≈ 79.8 (afgerond 79), G = (0+0.2825)*255 ≈ 72, B = (C+m)*255 ≈ (0.615+0.2825)*255 ≈ 229. Dus rgb(79, 70, 229).
(Het kleine verschil in groen – 70 in plaats van 72 – komt door afronding in deze vereenvoudigde berekening; de exacte conversie gebruikt floating-point precisie.)
Welke kleurwaarden worden allemaal getoond?
Naast de ingevoerde HSL en de resulterende RGB, worden nog vier andere kleurmodellen in realtime weergegeven:
| Model | Notatie | Voorbeeld bij HSL(243, 75%, 59%) |
|---|---|---|
| HEX | #RRGGBB | #4F46E5 |
| RGB | 0–255 per kanaal | 79, 70, 229 |
| HSL | zoals ingevoerd | 243°, 75%, 59% |
| HSV | °, %, % | 242°, 69%, 90% |
| CMYK | %, %, %, % | (schatting) |
| LAB | L* a* b* | (CIELAB-waarden) |
Elk veld is readonly behalve HSL. Wanneer je HSL wijzigt, springen alle andere velden mee. De HEX-waarde is de compacte notatie die in CSS en designsoftware gebruikt wordt. HSV (Hue, Saturation, Value) lijkt op HSL maar gebruikt in plaats van Lightness de Value (maximaal kanaal) – handig voor gereedschappen zoals kleurkiezers. CMYK wordt getoond als een schermschatting en kan afwijken van werkelijke drukkerijwaarden wegens variatie in papier, inkt en printerprofielen. LAB is een perceptueel uniforme kleurruimte, vaak gebruikt in beeldbewerking.
Randgevallen: foutmeldingen en wat u moet weten
De tool is robuust, maar niet onfeilbaar. Als u een ongeldige HSL-waarde invoert, verschijnt de volgende exacte foutmelding:
"Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."
Dit gebeurt bijvoorbeeld bij:
- een hue < 0 of > 360
- een saturatie of lichtheid zonder procentteken (bv.
243, 75, 59) - extra getallen of letters
- verkeerde volgorde (bv.
75%, 59%, 243)
Let op: HSL wordt alleen geaccepteerd als de twee percentages correct worden aangeleverd. De tool verwacht de hue als geheel getal, saturatie en lichtheid als percentages. Afronding van hue is toegestaan, maar geen decimalen voor de hue – hoewel CSS wel decimale hue (bv. 243.5) toestaat, staat de invoer van deze pagina alleen hele graden toe. (Dat is een ontwerpkeuze om de interface overzichtelijk te houden.)
Een ander belangrijk detail: er is geen out-of-gamut clipping. Omdat HSL en RGB hetzelfde gamut delen (sRGB), valt elke geldige HSL-waarde binnen het zichtbare bereik van RGB. Dit is anders dan bij conversies van LAB of CMYK, waar kleuren buiten sRGB kunnen liggen en dan worden afgekapt, wat kleurverschuiving veroorzaakt. Hier blijft de kleur exact behouden.
Voor wie is deze tool bedoeld?
Deze pagina is niet bedoeld voor casual kleurkiezen, maar voor mensen die precies moeten weten welke RGB-getallen horen bij een HSL-specificatie.
- Ontwerpers die kleurenpaletten of thema's opbouwen in HSL (bijvoorbeeld in Figma of Adobe XD) en de overeenkomstige RGB-waarden nodig hebben voor CSS-code.
- Front-end ontwikkelaars die kleurwaarden overdragen van een ontwerptool naar code. Veel ontwerptools geven HSL-waarden, maar CSS accepteert ook RGB. De tool levert direct de getallen die je in
color: rgb(79, 70, 229);kunt plakken. - Iedereen die liever in mensvriendelijke termen (tint, verzadiging, lichtheid) over kleur nadenkt, maar de exacte schermgetallen nodig heeft. Bijvoorbeeld bij het aanpassen van een kleur voor toegankelijkheid: door alleen de lichtheid te verhogen blijft de tint intact, en de tool geeft meteen de nieuwe RGB-waarden.
De tool is ook nuttig voor onderwijsdoeleinden: beginners kunnen zien hoe een kleine wijziging in HSL (bijvoorbeeld +10% lichtheid) uitpakt in RGB, en begrijpen waarom HSL handiger is voor het maken van variaties van dezelfde kleur.
Beperkingen: CMYK als schermschatting en geen kleurverschuiving
Hoewel de conversie naar RGB exact is, waarschuwt de tool dat de getoonde CMYK-waarde een schermschatting is. CMYK is bedoeld voor drukwerk en is afhankelijk van het specifieke inkten-, papier- en printerprofiel. De omzetting van RGB naar CMYK gebruikt een standaard omzettingsmethode (meestal gebaseerd op ICC-profielen), maar die kan in de praktijk afwijken. Professionele drukkers gebruiken eigen profielen zoals Fogra39 of GRACoL.
Dit betekent niet dat de schatting waardeloos is. Het geeft een indicatie die vaak dichtbij de uiteindelijke drukwaarde ligt, maar gebruik het niet voor kritische printjobs zonder verder overleg met een drukker.
Daarnaast laat de tool geen andere invoer toe dan HSL. Je kunt niet direct RGB of HEX invoeren en de overeenkomstige HSL zien – daarvoor is er een andere pagina op de site (rgb-to-hsl). Dit is een bewuste keuze om elke conversierichting op een eigen pagina te houden, zodat de interface helder en gericht blijft.
Veelgestelde vragen
Wat gebeurt er als ik een hue van 360 invoer? 360° is hetzelfde als 0° (rood). De tool behandelt 360 als een geldige waarde en converteert correct naar RGB. Sommige andere implementaties eisen 0–359, maar deze pagina accepteert 360.
Waarom zie ik geen verschil tussen HSL en HSV? HSL en HSV gebruiken een andere definitie van ‘lichtheid’ versus ‘waarde’. Bij bijvoorbeeld puur geel (HSL 60°, 100%, 50%) krijg je HSV 60°, 100%, 100%. De RGB-waarden zijn hetzelfde, maar de notatie verschilt omdat de formules anders zijn. De tool toont beide zodat u de juiste notatie voor uw werk kiest.
Kan ik decimale hue gebruiken, zoals 243.5?
Nee, de tool accepteert alleen gehele getallen voor hue (0–360). Dit is een bewuste vereenvoudiging. Voor de meeste ontwerpdoeleinden is een hele graad voldoende precies. Als u exacte decimale waarden nodig heeft, overweeg dan een andere tool.
Is de CMYK-waarde geschikt om naar een drukker te sturen? Nee, de getoonde CMYK is een schatting op basis van een standaardprofiel. Gebruik het alleen als globale indicatie. Voor drukwerk vraagt u een profielspecifieke omzetting aan bij uw drukkerij.
Werkt de conversie ook voor grijstinten?
Ja. Bij saturatie 0% is de kleur grijs en hangt de RGB-waarde alleen van de lichtheid af: HSL(0°, 0%, X%) levert rgb(X*2.55, X*2.55, X*2.55). De tint is dan irrelevant.
Waarom is er geen out-of-gamut clipping? Omdat HSL en RGB beide het sRGB-gamma gebruiken. Elke mogelijke HSL-combinatie valt binnen de driehoek van sRGB. Conversies naar sRGB vanuit Lab of CMYK kunnen daarentegen buiten deze driehoek vallen, waardoor kleuren worden afgekapt. Hier niet.