# Hex naar RGB: kleurcodes omzetten met de hand of in code

[Canonical HTML page](https://gradiently.design/nl/guide/hex-to-rgb)

Een hexcode is gewoon drie getallen in grondtal 16. Zodra je de paren ziet, is omzetten met de hand een kwestie van seconden en de codeversie telt vier regels.

## The short version

- Om hex naar RGB om te zetten splits je de code van zes cijfers in drie paren en reken je elk paar om van grondtal 16 naar een getal tussen 0 en 255.
- Elk paar reken je uit als het eerste cijfer maal 16 plus het tweede cijfer, waarbij de letters a tot en met f staan voor 10 tot en met 15.
- De hexcode #7c3aed is rgb(124 58 237): 7c is 124, 3a is 58 en ed is 237.
- Een hexcode van drie cijfers is een afkorting waarbij elk cijfer verdubbeld wordt, dus #f60 is dezelfde kleur als #ff6600.
- Hex en RGB beschrijven precies dezelfde sRGB-kleuren, dus omzetten tussen beide verandert nooit hoe een kleur eruitziet.

Om **hex naar RGB** om te zetten splits je de code in drie paren tekens, een voor rood, groen en blauw, en reken je elk paar van grondtal 16 om naar een gewoon getal tussen 0 en 255. Voor `#7c3aed` zijn de paren `7c`, `3a` en `ed`, die 124, 58 en 237 worden, dus de kleur is `rgb(124 58 237)`. Er verandert niets aan de kleur. Hex en RGB zijn twee schrijfwijzen van dezelfde drie getallen.

## Hoe een hexkleurcode is opgebouwd

Een hexcode heeft zes tekens na het hekje. De eerste twee zijn het rode kanaal, de middelste twee groen en de laatste twee blauw. Elk kanaal kan 256 waarden bevatten, van 0 (geen licht van die kleur) tot 255 (alles). Met grondtal 16 schrijf je elk van die 256 waarden in precies twee tekens, en daarom werd hex de compacte manier om kleuren op het web te typen. Voor het grotere plaatje van hoe deze codes zich tot elkaar verhouden, zie [hexkleurcodes uitgelegd](https://gradiently.design/nl/guide/color-codes-explained).

Grondtal 16 telt van 0 tot 9 en gaat dan door met letters. Dat is het enige wat je hoeft te onthouden:

| Hexcijfer | Waarde | Hexcijfer | Waarde |
| --- | --- | --- | --- |
| 0 tot 9 | 0 tot 9 | c | 12 |
| a | 10 | d | 13 |
| b | 11 | e | 14 |
| f | 15 | ff (een paar) | 255 |

Letters zijn niet hoofdlettergevoelig: #7C3AED en #7c3aed zijn dezelfde kleur.

## Zo zet je hex met de hand om naar RGB

Elk paar is een getal van twee cijfers in grondtal 16. Het linkercijfer telt zestientallen en het rechtercijfer eenheden. Vermenigvuldig het linkercijfer met 16, tel het rechtercijfer erbij op en je hebt de waarde van dat kanaal.

1. **Laat het hekje vallen en splits in paren** `#7c3aed` wordt `7c`, `3a` en `ed`. Dat zijn in die volgorde rood, groen en blauw.
2. **Reken het rode paar om** `7c`: 7 × 16 = 112 en c is 12, dus rood is 112 + 12 = **124**.
3. **Reken het groene paar om** `3a`: 3 × 16 = 48 en a is 10, dus groen is 48 + 10 = **58**.
4. **Reken het blauwe paar om** `ed`: e is 14, 14 × 16 = 224 en d is 13, dus blauw is 224 + 13 = **237**.
5. **Schrijf het resultaat op** Moderne CSS neemt `rgb(124 58 237)`. De oudere vorm met komma’s, `rgb(124, 58, 237)`, werkt overal nog.

Twee snelle controles houden je scherp. `00` is altijd 0 en `ff` is altijd 255, dus elk paar dat begint met een letter van a tot f is 160 of meer, en elk paar dat begint met 0 tot 7 ligt onder 128. Komt je antwoord voor `ed` laag uit, dan heb je de cijfers in de verkeerde volgorde gelezen.

- #7c3aed = 124 58 237: #7c3aed
- #336699 = 51 102 153: #336699
- #ff6600 = 255 102 0: #ff6600
- #0d9488 = 13 148 136: #0d9488
- #1e293b = 30 41 59: #1e293b

Vijf uitgewerkte omzettingen. Probeer er een met de hand en controleer hem dan aan de naam van het staal.

## Verkorte codes en alfa

Een **code van drie cijfers** is een snelkoppeling: verdubbel elk cijfer voor de volledige code. `#f60` betekent `#ff6600`, wat `rgb(255 102 0)` is. `#fff` is wit en `#000` is zwart. Alleen kleuren waarvan de paren een cijfer herhalen kunnen zo geschreven worden, dus `#7c3aed` heeft geen korte vorm.

Een **code van acht cijfers** voegt een vierde paar toe voor dekking. Die zet je op dezelfde manier om en deelt dan door 255 voor een breuk. `#7c3aed80` eindigt op `80`, dat is 128, en 128 ÷ 255 is ongeveer 0,5, dus het is gelijk aan `rgb(124 58 237 / 50%)`. Een code van vier cijfers zoals `#f608` is de verkorte versie van hetzelfde idee.

```css
.card {
  /* the same violet written four ways */
  color: #7c3aed;
  color: rgb(124 58 237);
  color: rgb(124, 58, 237);

  /* half transparent */
  background: #7c3aed80;
  background: rgb(124 58 237 / 50%);
}
```

Elke regel in elke groep wordt identiek weergegeven. Gebruik wat je team het snelst leest en blijf consequent.

## Hex naar RGB in JavaScript

In code doet `parseInt` met grondtal 16 de omrekening voor je. De functie hieronder accepteert codes van drie, vier, zes en acht cijfers, met of zonder hekje, en geeft de kanalen terug plus een alfa tussen 0 en 1.

```js
function hexToRgb(hex) {
  let h = hex.replace(/^#/, '');
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map((c) => c + c).join('');
  }
  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(h)) {
    throw new Error('Not a hex colour: ' + hex);
  }
  const n = (i) => parseInt(h.slice(i, i + 2), 16);
  return {
    r: n(0),
    g: n(2),
    b: n(4),
    a: h.length === 8 ? Math.round((n(6) / 255) * 100) / 100 : 1,
  };
}

hexToRgb('#7c3aed');   // { r: 124, g: 58, b: 237, a: 1 }
hexToRgb('f60');       // { r: 255, g: 102, b: 0, a: 1 }
hexToRgb('#7c3aed80'); // { r: 124, g: 58, b: 237, a: 0.5 }
```

Geen bibliotheek nodig. De validatieregel voorkomt dat een typefout stilletjes zwart wordt.

## Zo zet je RGB om naar hex

Terug gaan is delen. Deel het kanaal door 16: het hele getal is het eerste cijfer en de rest het tweede. Voor 153 is 153 ÷ 16 gelijk aan 9 rest 9, dus het paar is `99`. Voor 51 is het 3 rest 3, wat `33` geeft, en 102 geeft 6 rest 6, oftewel `66`. Dus `rgb(51 102 153)` is `#336699`. In JavaScript doet `toString(16)` het, met een opvulling zodat losse cijfers hun voorloopnul houden:

```js
const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');

rgbToHex(51, 102, 153); // '#336699'
rgbToHex(13, 148, 136); // '#0d9488'
```

Zonder padStart zou 13 d worden in plaats van 0d en zou de code een teken te kort zijn.

## Wanneer je hex, RGB of iets anders gebruikt

Hex is compact en makkelijk te plakken tussen tools, daarom gebruiken huisstijlgidsen en ontwerpbestanden het. RGB is makkelijker om over na te denken als je in code één kanaal wilt aanpassen of transparantie wilt toevoegen. Geen van beide is goed in de vragen die ontwerpers echt stellen, zoals ‘maak dit wat lichter’ of ‘zoek een zachtere versie van dit blauw’. Daarvoor beschrijven [HSL-kleur](https://gradiently.design/nl/guide/hsl-colors) en [OKLCH](https://gradiently.design/nl/guide/oklch-explained) kleuren naar tint en helderheid, zodat kleine aanpassingen voorspelbaar uitpakken.

### Hex of RGB past bij

- Huisstijlgidsen en overdracht aan ontwikkelaars
- Een kleur kopiëren tussen apps
- Transparantie toevoegen in CSS of canvas
- Een exacte waarde uit een specificatie overnemen

### Pak HSL of OKLCH voor

- Een kleur lichter of donkerder maken
- Tinten en schakeringen voor een palet bouwen
- Vloeiendere gradiënten tussen verre tinten
- Thema’s met CSS-variabelen

Nog een onderscheid telt voor print. Hex en RGB beschrijven licht op een scherm, dus een printer moet ze vertalen naar inkt, en zeer felle schermkleuren kunnen op papier dof worden. [RGB versus CMYK](https://gradiently.design/nl/guide/rgb-vs-cmyk) legt uit wat je kunt verwachten. Op een scherm zijn de omgezette kleuren identiek en als je wilt dat een kleur vervaagt, schrijf je de alfavormen hierboven; [transparante gradiënten in CSS](https://gradiently.design/nl/guide/css-gradient-transparent) laat ze aan het werk zien.

Controleer elke omgezette kleur die je als tekst gebruikt voor je live gaat tegen de achtergrond met een [kleurcontrastchecker](https://gradiently.design/nl/guide/color-contrast-accessibility). In Gradiently hoeft dat zelden: auto ink kiest voor elke regel lichte of donkere letters uit het eigen palet van de Mark, zodat de woorden leesbaar zijn.

## FAQ

### Hoe zet je hex om naar RGB?

Splits de code van zes cijfers in drie paren en reken elk om vanuit grondtal 16: vermenigvuldig het eerste cijfer met 16 en tel het tweede erbij op, waarbij a tot f staan voor 10 tot 15. #7c3aed wordt 124, 58, 237.

### Wat is #ffffff in RGB?

Het is rgb(255 255 255), zuiver wit. Elk paar is ff, dat is 15 × 16 + 15 = 255.

### Hoe zet ik hex om naar RGBA?

Reken de eerste drie paren om zoals gewoonlijk. Heeft de code acht cijfers, reken dan ook het laatste paar om en deel het door 255 voor de alfa, dus 80 geeft ongeveer 0,5.

### Verandert omzetten van hex naar RGB de kleur?

Nee. Beide zijn notaties voor dezelfde sRGB-waarden, dus de kleur wordt op beide manieren identiek weergegeven.

### Hoe zet ik RGB terug om naar hex?

Deel elk kanaal door 16: het hele getal is het eerste hexcijfer en de rest het tweede. In JavaScript gebruik je value.toString(16).padStart(2, '0').