HEX naar RGB: De Volledige Conversiegids

Elke kleur die je op een scherm ziet, is uiteindelijk drie getallen: rood, groen en blauw. De vraag is alleen hoe die getallen worden geschreven. HEX-notatie verpakt ze in een string van zes tekens die bekend is bij designers en ontwikkelaars. RGB-notatie pakt ze uit in drie expliciete waarden voor CSS-functies, design tokens en datapipelines.

Deze gids behandelt het volledige plaatje — de wiskunde achter hexadecimale codering, het RGB-model, een stapsgewijze handmatige conversie en de praktische regels voor het kiezen tussen HEX en RGB in echte CSS- en design-workflows.

Hoe hexadecimale codering werkt

Hexadecimaal is een getallenstelsel met grondtal 16 dat de cijfers 0–9 en letters A–F gebruikt, waarbij A=10, B=11, C=12, D=13, E=14, F=15. Een tweetekenig hex-paar kan waarden van 00 (0 decimaal) tot FF (255 decimaal) weergeven. Dat is precies het bereik voor een enkel kleurkanaal. Een zestekenige HEX-code zoals #3A7BD5 bestaat uit drie paren: 3A (rood), 7B (groen), D5 (blauw). Het #-prefix is een CSS-conventie. Verkorte codes zoals #FFF worden uitgebreid tot #FFFFFF — elk cijfer wordt verdubbeld.

Het RGB-kleurmodel

RGB staat voor Rood, Groen, Blauw — de drie primaire kanalen van additieve kleurmenging die elk digitaal beeldscherm gebruikt. Elk kanaal loopt van 0 (geen) tot 255 (maximum). rgb(0, 0, 0) is puur zwart; rgb(255, 255, 255) is puur wit. Het model is additief: rood en groen maximaal mengen levert geel op (rgb(255, 255, 0)). CSS accepteert ook de moderne syntaxis zonder komma's: color: rgb(58 123 213).

Handmatige conversie stap voor stap

Om #3A7BD5 naar RGB te converteren: splits in paren 3A, 7B, D5. Converteer elk paar van hex naar decimaal. Voor 3A: 3 × 16 + 10 = 58. Voor 7B: 7 × 16 + 11 = 123. Voor D5: 13 × 16 + 5 = 213. Resultaat: rgb(58, 123, 213). Voor de omgekeerde bewerking: deel elke decimale waarde door 16, neem het quotiënt als eerste hex-cijfer en de rest als tweede.

#3A7BD5

R = 3A → 3×16 + 10 = 58
G = 7B → 7×16 + 11 = 123
B = D5 → 13×16 + 5 = 213

Resultaat: rgb(58, 123, 213)

HEX vs RGB in CSS: wanneer welke gebruiken

HEX is compact en universeel ondersteund. Gebruik het voor statische kleurwaarden in CSS, design systemen en waar beknoptheid belangrijk is. RGB heeft de voorkeur wanneer je de kleur moet manipuleren in JavaScript of met calc() in CSS. CSS custom properties werken even goed met beide: --brand: #3A7BD5 of --brand: rgb(58 123 213).

Alfakanaal: HEX8 vs rgba()

Transparantie wordt in elk formaat anders toegevoegd. In HEX voeg je twee extra hex-cijfers toe voor alfa: #3A7BD5FF is volledig dekkend, #3A7BD580 is 50% transparant. In CSS was rgba() de traditionele aanpak: rgba(58, 123, 213, 0.5). Moderne CSS staat ook rgb() toe met een optionele alfa: rgb(58 123 213 / 0.5). HEX8 wordt ondersteund in alle moderne browsers maar is minder leesbaar.

Praktische toepassingen

Design tokens slaan kleuren typisch op in HEX voor portabiliteit tussen tools (Figma, Storybook, Style Dictionary). CSS-variabelen kunnen beide formaten bevatten. Bij het doorgeven van kleuren aan de Canvas API of WebGL-shaders zijn RGB-waarden nodig — de HEX-string moet eerst worden geparseerd met parseInt("3A", 16). Voor CSS-animaties met color-mix() of @property-overgangen biedt het rgb()- of hsl()-formaat browsers meer interpolatieflexibiliteit.

Veelgestelde Vragen