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

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.

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

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

   Reken het rode paar om

   7c: 7 × 16 = 112 en c is 12, dus rood is 112 + 12 = 124.

3. 3

   Reken het groene paar om

   3a: 3 × 16 = 48 en a is 10, dus groen is 48 + 10 = 58.

4. 4

   Reken het blauwe paar om

   ed: e is 14, 14 × 16 = 224 en d is 13, dus blauw is 224 + 13 = 237.

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

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.

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

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.

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 }

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:

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'

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 en OKLCH kleuren naar tint en helderheid, zodat kleine aanpassingen voorspelbaar uitpakken.

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