Hexcodes voor kleur, RGB, HSL en OKLCH uitgelegd

Hexcodes zoals #7c3aed zijn de meest gebruikelijke manier om een kleur op een scherm te schrijven: een # gevolgd door zes tekens die de hoeveelheid rood, groen en blauw geven. RGB schrijft dezelfde getallen decimaal, HSL herschikt ze tot tint, verzadiging en lichtheid en OKLCH beschrijft kleur zoals het oog haar waarneemt. Het zijn verschillende notaties voor dezelfde kleuren, en elk is het best in een ander klusje.

Zo werken hexcodes

Een hexcode is drie paren zestientallige cijfers: #RRGGBB. Het zestientallig stelsel telt van 0 tot 9 en dan a tot f, dus elk paar loopt van 00 (niets) tot ff (255, vol). In #7c3aed is rood 7c (124), groen 3a (58) en blauw ed (237): veel blauw, aardig wat rood, weinig groen, en dat is violet. Drie kanalen met 256 waarden geven 16.777.216 mogelijke kleuren.

• Verkorte schrijfwijze: #f0c is hetzelfde als #ff00cc. Elk cijfer wordt verdubbeld, dus het werkt alleen voor kleuren waarvan de paren zich herhalen.
• Transparantie: een code van acht cijfers voegt aan het eind alfa toe. #7c3aed80 is het violet op ongeveer 50% dekking, omdat 80 128 van 255 is.
• Hoofdletters maken niet uit: #7C3AED en #7c3aed zijn identiek.
• Grijstinten hebben drie gelijke paren: #767676, #1a1a1a en #f4f4f4 zijn allemaal neutraal.

RGB: dezelfde getallen decimaal

RGB schrijft de drie kanalen als gewone getallen van 0 tot 255. Modern CSS scheidt ze met spaties en zet transparantie na een schuine streep; de oudere syntaxis met komma’s en rgba() werkt overal nog. RGB is handig als een tool of API om getallen vraagt, of als je de samenstelling van een kleur in één oogopslag wilt lezen.

/* All four lines are the same violet */
color: #7c3aed;
color: rgb(124 58 237);
color: rgb(124, 58, 237);
color: hsl(262 83% 58%);

/* The same violet at 50% opacity */
color: #7c3aed80;
color: rgb(124 58 237 / 0.5);

HSL: tint, verzadiging en lichtheid

HSL beschrijft een kleur met zijn tint als hoek op het kleurenwiel (0 is rood, 120 groen, 240 blauw), zijn verzadiging van grijs (0%) tot volle kleur (100%) en zijn lichtheid van zwart (0%) via de zuivere kleur (50%) tot wit (100%). Het is makkelijk met de hand aan te passen: voor een donkerder violet verlaag je het laatste getal.

Het addertje is dat de lichtheid van HSL een formule is, geen meting van hoe licht een kleur eruitziet. Geel op 50% lichtheid lijkt veel helderder dan blauw op 50%. Bouw een palet met gelijke HSL-lichtheid en de kleuren lijken niet even licht, en juist daarom zien standaardregenbogen er gestreept uit. Zie regenboogkleurverlopen voor het zichtbare resultaat.

OKLCH: kleur zoals je haar ziet

OKLCH komt van Oklab, een kleurruimte die Björn Ottosson in 2020 publiceerde en die nu deel is van CSS. Hij gebruikt drie waarden: L is waargenomen lichtheid van 0% tot 100%, C is chroma, hoe kleurrijk het is, van 0 voor grijs tot ongeveer 0,37 voor de meest levendige kleuren, en H is de tinthoek. Gelijke L-waarden lijken echt even licht, dus je kunt één eigenschap veranderen zonder de andere te verstoren.

OKLCH blinkt uit in kleurverlopen. Bij mengen in gewoon sRGB, de standaard voor hexkleuren, trekt de overgang een rechte lijn door de RGB-kubus, en kleuren aan tegenovergestelde kanten van het wiel ontmoeten elkaar in grijs. Mengen in OKLCH behoudt chroma en reist in plaats daarvan rond het tintenwiel.

.band {
  /* Tell the browser which space to blend in */
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

:root {
  /* One hue, a scale of equal steps in perceived lightness */
  --violet-90: oklch(90% 0.05 293);
  --violet-70: oklch(70% 0.16 293);
  --violet-54: oklch(54.1% 0.247 293);
  --violet-35: oklch(35% 0.16 293);
  --violet-20: oklch(20% 0.08 293);
}

Welke kleurcode je waar gebruikt

Om een van deze waarden te testen toont oklch.com een kleur in elke notatie en waarschuwt als ze buiten het bereik van een scherm valt, en de kleurreferentie van MDN behandelt elke syntaxis. Kies je kleuren liever dan ze te schrijven, dan is zo kies je merkkleuren de volgende stap, en kleurcontrast laat zien hoe je controleert of tekst leesbaar blijft.