HEX, RGB, HSL: Webkleurcodes begrijpen

Je bewerkt een website en ziet #FF5733 in de CSS. Of je werkt samen met een ontwerper die je rgb(255, 87, 51) stuurt. Of een ontwerptool toont een kleur als hsl(11, 100%, 60%). Deze beschrijven allemaal exact dezelfde kleur, een levendig rood-oranje, maar in drie verschillende formaten.

Als je ooit in de war was door webkleurcodes, maakt deze gids het in vijf minuten duidelijk.

Hoe digitale kleuren werken

Elke kleur op je scherm wordt gemaakt door drie primaire lichtkleuren te mengen: Rood, Groen en Blauw. Dit is het RGB-kleurmodel. Door de intensiteit van elk kanaal te variëren van nul (uit) tot maximaal (volle helderheid), kun je elk van de circa 16,7 miljoen kleuren maken die een standaardscherm kan weergeven.

• Rood 255, Groen 0, Blauw 0 = puur rood
• Rood 0, Groen 255, Blauw 0 = puur groen
• Rood 0, Groen 0, Blauw 255 = puur blauw
• Rood 255, Groen 255, Blauw 255 = wit (alle kanalen vol)
• Rood 0, Groen 0, Blauw 0 = zwart (alle kanalen uit)
• Rood 255, Groen 255, Blauw 0 = geel (rood + groen)

Elk kleurformaat dat op het web wordt gebruikt is simpelweg een andere manier om deze kanaalwaarden uit te drukken.

HEX-kleuren

Hoe ze eruitzien

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

Hoe ze werken

Een HEX-kleurcode is een string van zes tekens voorafgegaan door een hekje. De zes tekens zijn verdeeld in drie paren, die elk een kleurkanaal vertegenwoordigen in hexadecimaal (grondtal 16):

Hexadecimaal gebruikt cijfers 0-9 en letters A-F, waarbij A=10, B=11, C=12, D=13, E=14, F=15. Dus FF in hexadecimaal is gelijk aan 255 in decimaal (15 × 16 + 15 = 255).

Ontleding van #FF5733:

• FF = Rood op 255 (maximum)
• 57 = Groen op 87
• 33 = Blauw op 51

Dit produceert een levendig rood-oranje.

Verkorte notatie

Wanneer elk paar twee identieke tekens heeft, kun je een verkorte notatie van drie tekens gebruiken:

• #FF0000 kan worden geschreven als #F00
• #3366FF kan worden geschreven als #36F
• #000000 kan worden geschreven als #000

RGB-kleuren

Hoe ze eruitzien

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

Hoe ze werken

RGB-notatie vermeldt direct de rood-, groen- en blauwkanaalwaarden als decimale getallen van 0 tot 255. Het is het meest intuïtieve formaat omdat de getallen direct corresponderen met de intensiteit van elk lichtkanaal.

rgb(255, 87, 51) betekent:

• Rood: 255 (maximum)
• Groen: 87 (ongeveer een derde)
• Blauw: 51 (ongeveer een vijfde)

RGBA: transparantie toevoegen

RGBA voegt een vierde waarde toe voor dekking (alpha), variërend van 0 (volledig transparant) tot 1 (volledig dekkend):

rgba(255, 87, 51, 0.5)   /* 50% transparant */
rgba(0, 0, 0, 0.8)        /* 80% dekkend zwart */

Dit is nuttig voor overlays, schaduwen en elk ontwerpelement dat inhoud erachter moet tonen.

HSL-kleuren

Hoe ze eruitzien

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

Hoe ze werken

HSL staat voor Hue (tint), Saturation (verzadiging), Lightness (lichtheid). In plaats van te denken in termen van rood/groen/blauw kanaalmenging, beschrijft HSL kleur op de manier waarop mensen er van nature over denken.

Hue is de kleur zelf, uitgedrukt als een graad op het kleurenwiel (0-360):

• 0° / 360° = Rood
• 60° = Geel
• 120° = Groen
• 180° = Cyaan
• 240° = Blauw
• 300° = Magenta

Saturation is hoe levendig de kleur is, van 0% (grijs) tot 100% (volledig verzadigd).

Lightness is hoe licht of donker de kleur is, van 0% (zwart) tot 100% (wit). 50% is de "normale" lichtheid.

hsl(11, 100%, 60%) betekent:

• Hue: 11° (licht oranje rood)
• Saturation: 100% (volledig levendig)
• Lightness: 60% (iets lichter dan normaal)

HSLA: transparantie toevoegen

Net als RGBA voegt HSLA een alfakanaal toe:

hsla(11, 100%, 60%, 0.5)   /* 50% transparant */

Wanneer gebruik je welk formaat

Voor webontwikkeling

HEX is de feitelijke standaard. De meeste CSS wordt geschreven met HEX-codes omdat ze compact zijn en elke ontwikkelaar ze herkent.

Voor ontwerpsystemen

HSL is ideaal voor het maken van consistente kleurpaletten. Om lichtere en donkerdere varianten van een merkkleur te maken, pas je simpelweg de lichtheidswaarde aan:

• Primair: hsl(210, 80%, 50%)
• Lichte variant: hsl(210, 80%, 70%)
• Donkere variant: hsl(210, 80%, 30%)

De tint en verzadiging blijven hetzelfde, wat garandeert dat de varianten dezelfde "kleur" zijn op verschillende helderheidsniveaus.

Voor transparantie

Gebruik RGBA of HSLA wanneer je semi-transparante kleuren nodig hebt voor overlays, schaduwen of glas-effecten.

Converteren tussen formaten

Je zult regelmatig moeten converteren tussen formaten. Een ontwerper stuurt HSL-waarden maar je codebase gebruikt HEX. Een merkgids specificeert RGB maar je hebt HSL nodig voor het maken van varianten.

De wiskunde is eenvoudig maar vervelend om handmatig te doen. Een conversietool doet het direct.

Ga aan de slag met kleuren:

• Kleurcodes converteren
• Kleurconverter Tool
• Kleurpalet Generator

Alle tools zijn gratis en werken direct in je browser.