# Hexcodes voor kleur, RGB, HSL en OKLCH uitgelegd

[Canonical HTML page](https://gradiently.design/nl/guide/color-codes-explained)

#7c3aed, rgb(124 58 237), hsl(262 83% 58%) en oklch(54.1% 0.247 293) zijn hetzelfde violet. Dit zegt elke notatie eigenlijk, en wanneer elk zijn plek verdient.

## The short version

- Hexcodes zoals `#7c3aed` zijn een compacte manier om rood-, groen- en blauwwaarden van 0 tot 255 te schrijven, elk als twee cijfers in het zestientallig stelsel.
- RGB, hex en HSL beschrijven dezelfde sRGB-kleuren, dus elke kleur in de ene notatie kan exact naar de andere worden omgerekend.
- HSL is makkelijk met de hand aan te passen, maar de lichtheidswaarde komt niet overeen met hoe licht kleuren echt lijken, dus geel en blauw op 50% zien er heel verschillend uit.
- OKLCH beschrijft kleur met waargenomen lichtheid, chroma en tint, wat het de beste notatie maakt voor paletten, tinten en vloeiende kleurverlopen.
- Een praktische regel: deel merkkleuren als hex en bouw paletten en kleurverlopen in OKLCH.

**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.

- Violet: #7c3aed
- Lucht: #0ea5e9
- Oranje: #f97316
- Groen: #16a34a
- Inkt: #111827

Vijf kleuren die in deze gids als voorbeeld dienen. De tabel hieronder schrijft ze elk in alle vier de notaties.

## 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.

```css
/* 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);
```

Bovenaan de moderne syntaxis met spaties, eronder de oudere met komma’s. Browsers accepteren beide.

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

| Kleur | Hex | RGB | HSL | OKLCH |
| --- | --- | --- | --- | --- |
| Violet | `#7c3aed` | `124 58 237` | `262 83% 58%` | `54.1% 0.247 293` |
| Lucht | `#0ea5e9` | `14 165 233` | `199 89% 48%` | `68.5% 0.148 237` |
| Oranje | `#f97316` | `249 115 22` | `25 95% 53%` | `70.5% 0.187 48` |
| Groen | `#16a34a` | `22 163 74` | `142 76% 36%` | `62.7% 0.17 149` |
| Inkt | `#111827` | `17 24 39` | `221 39% 11%` | `21% 0.032 265` |

Dezelfde vijf kleuren in vier notaties. HSL- en OKLCH-waarden zijn afgerond. Merk op dat HSL het groen donkerder noemt dan het violet, terwijl OKLCH laat zien dat het eigenlijk lichter is.

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.

- Blauw naar geel in sRGB: `linear-gradient(90deg, #2563eb 0%, #facc15 100%)`
- Blauw naar geel in OKLCH: `linear-gradient(90deg, #2563eb 0%, #009edb 25%, #00c49e 50%, #82d14d 75%, #facc15 100%)`

Dezelfde twee stops. In sRGB valt het midden weg naar een grijze olijf; in OKLCH loopt het via turquoise en groen. Meer in [modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients).

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

OKLCH maakt tinten en schaduwen voorspelbaar: verander L in gelijke stappen en verlaag C bij de uiteinden, zodat de kleuren op het scherm blijven.

## Welke kleurcode je waar gebruikt

| Klus | Beste notatie | Waarom |
| --- | --- | --- |
| Huisstijlgids, overdracht aan ontwerp | Hex | Kort, universeel, in elke tool te plakken |
| Transparantie in CSS | RGB of hex met 8 cijfers | Duidelijke alfa na de schuine streep |
| Snelle aanpassingen met de hand | HSL | Makkelijk tint of donkerte bij te stellen |
| Paletten, tinten en schaduwen | OKLCH | Gelijke stappen lijken gelijk |
| Kleurverlopen | OKLCH | Mengt zonder grijze middens |
| Schermen met groot kleurbereik | OKLCH | Kan kleuren buiten sRGB bereiken |
| Drukwerk | CMYK of steunkleuren | Schermcodes drukken nooit exact af; zie [kleurverlopen printen](https://gradiently.design/nl/guide/print-gradients) |

Geen van deze is fout. De kunst is elke te gebruiken waar hij helpt.

> **Schermen zijn geen papier** Hex, RGB, HSL en OKLCH beschrijven allemaal licht van een scherm. Printers mengen inkt, wat een ander kleurbereik dekt, dus proef merkkleuren altijd in drukwerk in plaats van een omgerekende code te vertrouwen.

Om een van deze waarden te testen toont [oklch.com](https://oklch.com) een kleur in elke notatie en waarschuwt als ze buiten het bereik van een scherm valt, en de [kleurreferentie van MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) behandelt elke syntaxis. Kies je kleuren liever dan ze te schrijven, dan is [zo kies je merkkleuren](https://gradiently.design/nl/guide/how-to-choose-brand-colors) de volgende stap, en [kleurcontrast](https://gradiently.design/nl/guide/color-contrast-accessibility) laat zien hoe je controleert of tekst leesbaar blijft.

## FAQ

### Wat betekenen de zes tekens in een hexcode?

Het zijn drie paren zestientallige cijfers voor rood, groen en blauw. Elk paar loopt van `00` (0) tot `ff` (255), dus `#7c3aed` betekent rood 124, groen 58, blauw 237.

### Is hex hetzelfde als RGB?

Ja. Hex is RGB geschreven in het zestientallig stelsel. `#7c3aed` en `rgb(124 58 237)` zijn exact dezelfde kleur.

### Wat is OKLCH?

OKLCH is een kleurnotatie op basis van de kleurruimte Oklab. Hij beschrijft waargenomen lichtheid, chroma en tint, dus gelijke lichtheidswaarden lijken even licht, wat paletten en kleurverlopen veel voorspelbaarder maakt.

### Hoe voeg ik transparantie toe aan een hexcode?

Voeg twee cijfers toe voor alfa. `#7c3aed80` is ongeveer 50% dekking en `#7c3aedcc` ongeveer 80%. In CSS kun je ook `rgb(124 58 237 / 0.5)` schrijven.

### Welke kleurcode gebruik ik in CSS?

Hex is prima voor losse kleuren. Gebruik OKLCH voor paletten, tinten, donkere modus en kleurverlopen, waar zijn waargenomen lichtheid ongelijke stappen en grijze middens voorkomt.