HSL-kleur: kleuren in CSS het prettigst schrijven

Een HSL-kleur schrijf je als drie getallen: tint, verzadiging en lichtheid. In CSS betekent hsl(262 83% 58%) een tint van 262 graden (violet), 83% verzadiging (levendig) en 58% lichtheid (iets boven het midden). Het is hetzelfde violet als #7c3bed, maar dan kun je het lezen. Lichter? Verhoog het laatste getal. Zachter? Verlaag het middelste. Die ene eigenschap, één betekenis per getal, is waarom HSL de prettigste manier is om kleuren met de hand te schrijven.

Wat tint, verzadiging en lichtheid betekenen

Tint is een positie op het kleurenwiel, uitgedrukt in graden. Rood zit op 0 en weer op 360, geel op 60, groen op 120, cyaan op 180, blauw op 240 en magenta op 300. Aan de tint draaien roteert de kleur en houdt de sterkte gelijk.

Verzadiging is hoeveel kleur er is. Op 0% is elke tint hetzelfde grijs; op 100% is hij zo levendig als het scherm toelaat. Lichtheid loopt van zwart op 0% tot wit op 100%, met de zuivere tint op 50%. Het model komt breder aan bod in tint, verzadiging en helderheid, dat ook uitlegt hoe HSB in ontwerpapps verschilt van HSL in CSS.

HSL-syntaxis in CSS

Er zijn twee schrijfwijzen. De moderne scheidt waarden met spaties en zet de alfa na een schuine streep. De oudere gebruikt komma’s en een aparte hsla()-functie. Browsers accepteren beide en hsl() neemt nu ook alfa, dus hsla() is niet meer nodig. De MDN-referentie voor hsl() somt elke vorm op.

.button {
  /* modern syntax */
  background: hsl(262 83% 58%);

  /* with 80% opacity */
  background: hsl(262 83% 58% / 0.8);

  /* older comma syntax, still valid */
  background: hsla(262, 83%, 58%, 0.8);

  /* hue can carry a unit */
  background: hsl(262deg 83% 58%);
}

Een kleurenschaal bouwen door de lichtheid te veranderen

Hier verdient HSL zijn plek. Houd tint en verzadiging vast, loop de lichtheid stapsgewijs door en je hebt een familie van tinten en schakeringen die duidelijk bij elkaar horen. Hier staat één violet in zeven stappen, met de hex waar elk in omgezet wordt.

Combineer dit met CSS-variabelen en je hele thema hangt aan twee getallen. Sla tint en verzadiging één keer op en kies dan een lichtheid per rol. Verander de tintvariabele en de hele interface gaat van violet naar teal, het idee achter CSS-variabelen voor thema’s.

:root {
  --brand-h: 262;
  --brand-s: 83%;

  --brand-50:  hsl(var(--brand-h) var(--brand-s) 95%);
  --brand-200: hsl(var(--brand-h) var(--brand-s) 85%);
  --brand-500: hsl(var(--brand-h) var(--brand-s) 58%);
  --brand-800: hsl(var(--brand-h) var(--brand-s) 30%);
}

/* a teal theme is one line */
.theme-teal {
  --brand-h: 175;
}

Relatieve kleuren

Nieuwere browsers ondersteunen ook relatieve kleursyntaxis, die de HSL-delen van elke kleur uitleest en je laat bijstellen. hsl(from var(--brand) h s calc(l + 15%)) geeft een lichtere versie van wat de merkkleur ook is, zelfs als die in hex was gedefinieerd. Check de actuele ondersteuning op caniuse voordat je erop vertrouwt en houd een gewone fallback. Voor het mengen van twee kleuren in plaats van er een bijstellen is color-mix() in CSS het gereedschap.

Waar HSL tegen je liegt

HSL is een herschikking van RGB, geen model van menselijk zicht. De lichtheid is een eenvoudig gemiddelde van het helderste en dofste kanaal, dus het negeert dat onze ogen geel en groen veel helderder zien dan blauw. Het gevolg: twee kleuren met identieke HSL-lichtheid kunnen qua helderheid totaal niet op elkaar lijken.

Dit speelt op twee plekken. Ten eerste is een schaal die je bouwt door de HSL-lichtheid te stappen ongelijk over tinten: geel op 50% is veel te licht voor tekst terwijl blauw op 50% makkelijk slaagt. Test echte combinaties altijd met een contrastchecker. Ten tweede worden gradiënten en gegenereerde paletten die de tint roteren bij vaste lichtheid helderder en dofer als ze door geel en blauw gaan.

OKLCH behoudt hetzelfde vriendelijke idee (lichtheid, kleurrijkheid, tint) maar meet de lichtheid zoals ogen dat doen. Begin je een nieuw designsysteem, dan is het de betere standaard; bewerk je bestaande CSS of wil je een snelle, leesbare aanpassing, dan blijft HSL prima.

HSL omzetten naar hex en terug

Je hoeft zelden te rekenen, want elk ontwerptool en elk devtoolspaneel van de browser zet voor je om: klik op een kleurstaal in de devtools van Chrome of Firefox en schakel door de formaten. Onder de motorkap wordt HSL eerst RGB en RGB naar hex is eenvoudige rekenkunde met paren, uitgelegd in hex naar RGB. Verwacht kleine afrondingsverschillen: hsl(262 83% 58%) komt uit op #7c3bed, een stap van de #7c3aed waarmee je misschien begon, omdat hele procenten niet elk van de 16,7 miljoen hexwaarden kunnen raken.

Ontwerp je in Gradiently, dan raak je deze getallen zelden aan: een Mark draagt zijn eigen palet en met Pro slaat de merkkit je kleuren op zodat de Designer ze voor je toepast.