HEX naar RGB Kleurenconverter

Wat is een HEX-kleurencode?

Een HEX-kleurencode is een zes karakter tellende alfanumerieke string die in webdesign en digitale graphics wordt gebruikt om een specifieke kleur te vertegenwoordigen. De format volgt het patroon #RRGGBB, waarbij elke twee-karaktersgroep de intensiteit van een van de drie additieve primaire kleuren — rood (RR), groen (GG) en blauw (BB) — vertegenwoordigt met behulp van hexadecimale notatie (basis 16). Elke groep bestaat uit twee karakters die variëren van 00 (nul intensiteit) tot FF (maximale intensiteit, gelijk aan 255 in decimaal).

HEX-codes ontstonden uit de behoefte om kleuren in HTML en CSS te definiëren zonder afhankelijk te zijn van gekleurde woorden. Hoewel CSS nu meerdere kleurformaten ondersteunt, waaronder rgb(), hsl() en oklch(), blijft HEX de meest gebruikte notatie in front-end ontwikkeling, ontwerpoverdrachten en brandingrichtlijnen. Bijna elke kleurenpicker in tools zoals Figma, Sketch, Adobe Photoshop en Canva toont een HEX-waarde standaard.

Het totale aantal unieke kleuren dat kan worden weergegeven met zes-cijferige HEX-codes is 16.777.216 (256 × 256 × 256). Dit wordt vaak "True Color" of "24-bit color" genoemd, wat overeenkomt met de kleurdiepte van de meeste moderne schermen. Elk kanaal krijgt 8 bits (één byte) en drie kanalen produceren samen 24 bits kleurdata.

HEX-codes zijn case-insensitief, dus #ff8000 en FF8000 verwijzen naar dezelfde kleur. Sommige stijlgidsen voorzieven voor hoofdletters voor leesbaarheid, terwijl CSS-minifiers vaak kleine letters gebruiken om bytes te besparen — hoewel in de praktijk de verschillen gering zijn.

Hoe HEX naar RGB stap voor stap om te zetten

Het omzetten van een HEX-kleurencode naar zijn RGB-equivalent is eenvoudig. Het proces bestaat uit het splitsen van de zes-karaktersstring in drie paren en het omzetten van elke groep van hexadecimaal (basis 16) naar decimaal (basis 10). Hier is de stap-voor-stap methode:

1. Verwijder het hash-symbool. Als de HEX-code begint met #, verwijder het. Bijvoorbeeld, #1A2B3C wordt 1A2B3C.
2. Splits in drie paren. Deel de resterende string in drie groepen van twee karakters: 1A, 2B, 3C.
3. Omzet elke groep naar decimaal. Gebruik de hexadecimale plaatswaarde-systeem waarbij de eerste cijfer wordt vermenigvuldigd met 16 en het tweede cijfer wordt toegevoegd:
   • Rood: 1A → (1 × 16) + 10 = 26
   • Groen: 2B → (2 × 16) + 11 = 43
   • Blauw: 3C → (3 × 16) + 12 = 60
4. Schrijf de RGB-waarde. Combineer de drie decimale waarden: rgb(26, 43, 60).

De hexadecimale cijfers en hun decimale equivalenten zijn: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15. Het onthouden van A tot en met F is de enige onderdeel dat afwijkt van standaard decimale rekenkunde.

Voor programmatische omzetting bieden de meeste talen ingebouwde functies. In JavaScript, parseInt("1A", 16) retourneert 26. In Python, int("1A", 16) doet hetzelfde. CSS zelf handelt beide formaten inbegrepen, dus omzetting is voornamelijk nuttig wanneer je individuele kleurenkanalen in code wilt manipuleren — bijvoorbeeld, het aanpassen van de helderheid, het creëren van gradaties programmatisch of het mengen van twee kleuren.

3-Digit vs 6-Digit HEX Codes

CSS ondersteunt een afkorting van 3-delig HEX-formaat (#RGB) als een handigheid wanneer elk van de drie paren bestaat uit identieke cijfers. In deze afkorting wordt elk enkelvoudig cijfer verdubbeld. Voorbeeld:

• #F80 wordt uitgebreid tot #FF8800 → rgb(255, 136, 0)
• #FFF wordt uitgebreid tot #FFFFFF → rgb(255, 255, 255)
• #000 wordt uitgebreid tot #000000 → rgb(0, 0, 0)
• #09C wordt uitgebreid tot #0099CC → rgb(0, 153, 204)
• #A3F wordt uitgebreid tot #AA33FF → rgb(170, 51, 255)

De 3-delig notatie vermindert het aantal beschikbare kleuren van 16,7 miljoen tot slechts 4.096 (16 × 16 × 16), dus het kan geen enkele kleur weergeven. Het wordt meestal gebruikt voor eenvoudige of bekende kleuren in CSS-bestanden waar korte notatie gewaardeerd wordt.

CSS ondersteunt ook 4-delig (#RGBA) en 8-delig (#RRGGBBAA) HEX-codes die een alpha (doorzichtigheid) kanaal bevatten. De alpha-waarde volgt dezelfde hexadecimale logica: FF is volledig opaak en 00 is volledig doorzichtig. Voorbeeld: #FF880080 vertegenwoordigt de kleur rgb(255, 136, 0) met 50% doorzichtigheid. Onze converter richt zich op de standaard 3- en 6-delig formaten; als u een code invoert met een alpha-kanaal, verwerkt het alleen de RGB-deel.

HEX tot RGB Referentie Tabel

Hieronder staat een referentie tabel met veelvoorkomende HEX-kleuren en hun RGB-uitvoeringen. Deze tabel omvat de meest gebruikte kleuren in webdesign, CSS-naamkleuren en populaire merkpaletten.

CSS definieert 147 naamkleuren in totaal, elk met een corresponderende HEX-waarde. Hoewel naamkleuren handig zijn voor prototypen, vertrouwen professionele projecten meestal op HEX- of RGB-waarden voor precisie en consistentie over browsers en ontwerpinstrumenten.

Populaire Merkkleuren – HEX en RGB Waarden

Ontwikkelaars en designers hebben vaak de exacte HEX- en RGB-waarden van populaire merkkleuren nodig voor mock-ups, integraties en stijlgidsen. Hieronder staat een snelle referentie voor enkele van de meest gevraagde merkkleuren:

Merkrichtlijnen geven vaak kleuren aan in meerdere formaten (HEX, RGB, CMYK, Pantone). Wanneer u merkkleuren implementeert in CSS, controleer de waarden altijd tegen de officiële merkbronpagina om nauwkeurigheid te waarborgen. Kleuren kunnen licht verschuiven tussen schermen, dus consistentie in code is essentieel.

Kleurmodellen Vergelijking: HEX, RGB, HSL, en CMYK

Door te begrijpen wanneer je elk kleurmodel moet gebruiken, werk je efficiënter over verschillende tools en media:

HEX en RGB zijn mathematisch identiek — ze vertegenwoordigen hetzelfde kleurruimte met verschillende notatie. Om tussen hen om te zetten is een eenvoudige base-16 naar base-10 vertaling met geen verlies van precisie of kleurruimteverschillen. HSL is een transformatie van RGB in een cilindrische coördinatensysteem dat het gemakkelijker maakt om kleur, verzadiging en lichtinval onafhankelijk te redeneren. CMYK is een subtractieve kleurmodel dat in de druk gebruikt wordt en kan geen RGB-kleuren (en omgekeerd) vertegenwoordigen, dus zijn omzettingen tussen RGB en CMYK zijn benaderingen.

In moderne CSS (Niveau 4), de color()-functie en nieuwe kleurruimten zoals oklch() en display-p3 krijgen adoptie, vooral voor breed-gamut-displays. Maar HEX en RGB blijven de basis voor webcompatibiliteit en worden ondersteund door elke browser die vandaag de dag wordt gebruikt.

HEX en RGB gebruiken in CSS en JavaScript

Beide HEX- en RGB-waarden zijn geldig in CSS en produceren identieke resultaten. Hier zijn praktische voorbeelden van hoe elk formaat wordt gebruikt:

CSS declaraties:

/* HEX notatie */
body { achtergrondkleur: #1A2B3C; }

/* RGB notatie */
body { achtergrondkleur: rgb(26, 43, 60); }

/* RGB met alfa (doorzichtigheid) */
.overlay { achtergrondkleur: rgba(26, 43, 60, 0,5); }

/* Moderne CSS — spatiescheidende syntaxis */
.card { kleur: rgb(26 43 60 / 80%); }

JavaScript-conversiefuncties:

// HEX naar RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB naar HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

Wanneer je werkt met de HTML Canvas API, moeten kleuren vaak als strings worden ingesteld. Beide "#FF8000" en "rgb(255, 128, 0)" werken voor fillStyle en strokeStyle. Echter, de getImageData()-methode retourneert pixelgegevens als een array van 0–255 gehele getallen (RGBA), wat RGB de natuurlijke format maakt voor pixelniveau-manipulatie.

In CSS custom properties (variabelen), worden HEX-waarden vaak opgeslagen voor eenvoud:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* voor gebruik met rgba() */
}
.element {
  achtergrond: rgba(var(--primary-rgb), 0,3);
}

Deze patroon van het opslaan van rauwe RGB-kanaalwaarden als een CSS-variabele is een populaire techniek die het toe laat om opaciteit dynamisch toe te passen zonder omzettingen tussen formaten bij runtime te maken.

Toegankelijkheid en kleurcontrast

Het omzetten van HEX naar RGB is vaak de eerste stap bij het berekenen van kleurcontrastverhoudingen voor toegankelijkheid. De Web Content Accessibility Guidelines (WCAG) vereisen een minimumcontrastverhouding van 4,5:1 voor normale tekst en 3:1 voor grote tekst (18px+ bold of 24px+ regelmatig).

De contrastverhoudingformule vereist de relatieve helderheid van elke kleur, die wordt berekend vanuit lineaire RGB-waarden. De stappen zijn:

1. Converteer HEX naar RGB (0–255 per kanaal).
2. Normaliseer elk kanaal naar 0–1 door te delen door 255.
3. Voer de sRGB-lineaire formule toe: als de waarde ≤ 0,04045, deel door 12,92; anders bereken ((waarde + 0,055) / 1,055) ^ 2,4.
4. Bereken de helderheid: L = 0,2126 × R + 0,7152 × G + 0,0722 × B.
5. Bereken de contrastverhouding tussen twee kleuren: (L1 + 0,05) / (L2 + 0,05), waarbij L1 de heldere kleur is.

U kunt zien dat de RGB-waarden de essentiële invoer zijn voor elke toegankelijkheidscontrastberekening. Hulpmiddelen zoals de WebAIM Contrast Checker, de Chrome DevTools kleurkiezer en de axe toegankelijkheidsscanner voeren deze conversie intern uit.

Voor ontwerpers: een snelle regel van duim: donkere tekst op een lichte achtergrond (of omgekeerd) met een helderheidverschil van minstens 125 en een kleurverschil van minstens 500 (met de som van de absolute verschillen over R, G, B-kanaal) zal meestal voldoen aan de WCAG AA-standaarden.