# HSL-kleur: kleuren in CSS het prettigst schrijven

[Canonical HTML page](https://gradiently.design/nl/guide/hsl-colors)

Hex vertelt de browser wat hij moet schilderen. HSL vertelt jou wat de kleur is: welke tint, hoe levendig, hoe licht. Daardoor is het het makkelijkste formaat om met de hand te bewerken.

## The short version

- Een HSL-kleur beschrijft een kleur met tint, verzadiging en lichtheid in plaats van hoeveelheden rood, groen en blauw.
- Tint is een hoek op het kleurenwiel van 0 tot 360 graden, waarbij 0 rood is, 120 groen en 240 blauw.
- Verzadiging loopt van 0% (grijs) tot 100% (volle kleur) en lichtheid van 0% (zwart) via 50% (de zuivere tint) tot 100% (wit).
- Moderne CSS schrijft het als hsl(262 83% 58%), met een optionele alfa na een schuine streep, en elke browser in gebruik ondersteunt het.
- HSL-lichtheid is niet hoe helder een kleur voor mensen lijkt, dus twee kleuren met dezelfde lichtheid kunnen enorm verschillen in contrast.

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](https://gradiently.design/nl/guide/color-wheel), 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.

Tint van 0 tot 360 graden: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%)`

Elke tint op 100% verzadiging en 50% lichtheid. Van links naar rechts: 0, 60, 120, 180, 240, 300 en terug naar 360.

**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](https://gradiently.design/nl/guide/hue-saturation-brightness), dat ook uitlegt hoe HSB in ontwerpapps verschilt van HSL in CSS.

| Waarde | Bereik | Wat veranderen doet |
| --- | --- | --- |
| Tint | 0 tot 360 (graden) | Roteert de kleur: violet naar blauw naar teal |
| Verzadiging | 0% tot 100% | Van grijs naar volle kleur |
| Lichtheid | 0% tot 100% | Van zwart, via de zuivere tint op 50%, naar wit |
| Alfa (optioneel) | 0 tot 1, of 0% tot 100% | Van onzichtbaar naar ondoorzichtig |

Vier getallen, elk met één taak. Die scheiding is de hele aantrekkingskracht.

## 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()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) somt elke vorm op.

```css
.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%);
}
```

Alle vier zijn hetzelfde violet. De tweede en derde voegen 80% dekking toe.

## 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](https://gradiently.design/nl/guide/tints-tones-shades) die duidelijk bij elkaar horen. Hier staat één violet in zeven stappen, met de hex waar elk in omgezet wordt.

- L 95% #efe8fd: #efe8fd
- L 85% #d0b9f8: #d0b9f8
- L 70% #a273f2: #a273f2
- L 58% #7c3bed: #7c3bed
- L 45% #5914d2: #5914d2
- L 30% #3c0d8c: #3c0d8c
- L 15% #1e0746: #1e0746

hsl(262 83% L) op zeven lichtheidswaarden. Lichte stappen voor achtergronden, het midden voor knoppen, donkere stappen voor tekst.

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](https://gradiently.design/nl/guide/css-custom-properties-theming).

```css
: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;
}
```

Elke merkkleur is afgeleid van dezelfde tint, dus de schaal kan nooit uit de familie lopen.

### 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](https://gradiently.design/nl/guide/css-color-mix) 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.

- hsl(60 100% 50%): #ffff00
- hsl(120 100% 50%): #00ff00
- hsl(0 100% 50%): #ff0000
- hsl(240 100% 50%): #0000ff

Alle vier hebben 50% lichtheid. Tegen wit heeft het geel een contrastverhouding van ongeveer 1,07:1 en het blauw ongeveer 8,6:1.

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](https://gradiently.design/nl/guide/color-contrast-accessibility). 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.

### HSL is goed voor

- Kleuren met de hand lezen en bewerken
- Tinten en schakeringen van één tint
- Snel van thema wisselen met variabelen
- Een kleur minder verzadigen voor een gedempte status

### Gebruik liever OKLCH voor

- Schalen die over verschillende tinten gelijk zijn
- Voorspelbaar contrast uit een lichtheidswaarde
- Gradiënten die gelijk blijven in helderheid
- Gegenereerde paletten voor designsystemen

[OKLCH](https://gradiently.design/nl/guide/oklch-explained) 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](https://gradiently.design/nl/guide/hex-to-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.

## FAQ

### Waar staat HSL voor?

Hue, saturation en lightness: tint, verzadiging en lichtheid. Tint is de hoek op het kleurenwiel, verzadiging is hoe levendig de kleur is en lichtheid is hoe dicht hij bij zwart of wit zit.

### Hoe schrijf ik een HSL-kleur in CSS?

Gebruik hsl(tint verzadiging% lichtheid%), bijvoorbeeld hsl(262 83% 58%). Voeg transparantie toe na een schuine streep: `hsl(262 83% 58% / 0.5)`.

### Is hsla() nog nodig?

Nee. hsl() accepteert in elke huidige browser een alfawaarde, dus hsla() blijft alleen bestaan voor oudere code.

### Wat is het verschil tussen HSL en RGB?

RGB zegt hoeveel rood, groen en blauw licht je mengt; HSL zegt welke tint, hoe levendig en hoe licht. Ze beschrijven dezelfde kleuren, maar HSL is makkelijker met de hand aan te passen.

### Waarom zien twee HSL-kleuren met dezelfde lichtheid er verschillend uit?

HSL-lichtheid negeert hoe gevoelig ogen zijn voor elke tint, dus geel lijkt bij dezelfde waarde veel helderder dan blauw. OKLCH lost dit op met waargenomen lichtheid.