Kleurformaten uitgelegd: HEX, RGB en HSL

Op het web kan dezelfde kleur op meerdere manieren worden geschreven — #3498db, rgb(52, 152, 219) en hsl(204, 70%, 53%) zijn allemaal exact hetzelfde blauw. Weten wat elk formaat betekent (en wanneer je welke pakt) maakt het kiezen, bijstellen en matchen van kleuren veel makkelijker. Deze gids ontleedt HEX, RGB en HSL, en hoe ze samenhangen.

Alles begint met rood, groen en blauw

Schermen maken kleur door drie gekleurde lichten te mengen: rood, groen en blauw. Elke kleur die je ziet is een combinatie van die drie kanalen, elk ingesteld op een intensiteit van 0 (uit) tot 255 (vol). Helemaal zwart is 0, 0, 0; helemaal wit is 255, 255, 255. HEX en RGB zijn slechts twee notaties voor diezelfde drie getallen.

RGB

RGB geeft de drie kanaalwaarden rechtstreeks aan:

rgb(52, 152, 219)
     R    G    B

Het is de best leesbare van de drie omdat de getallen direct overeenkomen met „hoeveel rood, groen, blauw”. Handig als je over de kanalen zelf wilt redeneren.

HEX

HEX codeert diezelfde 0–255-kanaalwaarden hexadecimaal (basis 16), als een # gevolgd door drie paren:

#3498db
 34 98 db
 R  G  B     →  R=52, G=152, B=219

Elk paar loopt van 00 (0) tot ff (255). HEX is compact en is de standaard in de meeste designtools en in CSS, en daarom het formaat dat je het vaakst kopieert en plakt. Er is ook een korte vorm: #39f breidt uit naar #3399ff door elk cijfer te verdubbelen.

HSL

HSL beschrijft kleur zoals mensen er intuïtief over denken, met drie verschillende assen:

• Tint (Hue) (0–360°) — de kleur zelf op een wiel: 0° rood, 120° groen, 240° blauw.
• Verzadiging (Saturation) (0–100%) — hoe levendig, van grijs tot volle kleur.
• Lichtheid (Lightness) (0–100%) — hoe helder, van zwart via de kleur naar wit.

hsl(204, 70%, 53%)
    hue  sat  light

De superkracht van HSL is het bijstellen van kleur. Wil je een donkerdere versie van een kleur? Verlaag de lichtheid en laat tint en verzadiging met rust. Wil je een set bijpassende tinten? Houd de tint vast en varieer de lichtheid. Dat in HEX of RGB doen betekent alle drie de kanalen herberekenen; in HSL is het één getal.

Alfa: transparantie toevoegen

Elk formaat heeft een variant met een alfa-kanaal voor dekking, van 0 (volledig transparant) tot 1 (volledig ondoorzichtig): rgba(52, 152, 219, 0.5) en hsla(204, 70%, 53%, 0.5). Modern CSS staat ook een 8-cijferige HEX toe waarbij het laatste paar de alfa is — #3498db80 is hetzelfde blauw op 50%.

Welke moet je gebruiken?

• HEX — een vaste merkkleur kopiëren, of in een designtool plakken. Compact en universeel.
• RGB / RGBA — wanneer je over de ruwe kanalen redeneert of eenvoudige transparantie nodig hebt.
• HSL / HSLA — wanneer je ontwerpt: paletten bouwen, hover-/actieftinten, of een kleur op gevoel bijstellen.

Het goede nieuws is dat je niet met de hand hoeft om te rekenen. Onze HEX↔RGB-omzetter vertaalt direct tussen formaten, en de kleurkiezer laat je een kleur visueel kiezen en de HEX-, RGB- en HSL-waarden ineens aflezen — plus verlopen en paletten bouwen. Moet je een kleur uit een afbeelding halen? De afbeeldingskleurkiezer doet precies dat.