RGB naar Hex
RGB naar Hex omrekenen
Met deze RGB naar Hex calculator reken je kleuren eenvoudig om tussen het RGB-kleurmodel en de hexadecimale kleurnotatie. Volg deze stappen:
- Kies de richting: van RGB naar Hex (#RRGGBB) of andersom.
- Voer de drie kleurcomponenten in — rood (R), groen (G) en blauw (B) — elk een waarde van 0 tot 255.
- Klik op Omrekenen en bekijk direct de corresponderende Hex kleurcode.
Het omrekenen van RGB naar Hex is dagelijkse praktijk voor webontwikkelaars, grafisch ontwerpers en iedereen die werkt met kleur in digitale media: van CSS-stylesheets tot beeldbewerking en app-ontwikkeling.
Naast RGB en Hex ondersteunt de calculator ook RGBA, HSL, HSLA, CMYK, HSV en CSS-kleurnamen, zodat je altijd de juiste kleurnotatie hebt voor jouw toepassing.
Wanneer kom je RGB en Hex tegen?
RGB en Hex zijn de twee meest gebruikte kleurnotaties in de digitale wereld. Ze beschrijven dezelfde kleurruimte, het additieve RGB-kleurmodel, maar in een andere schrijfwijze. De keuze tussen RGB en Hex hangt af van de context en het gereedschap.
-
Webontwikkeling en CSS: in CSS worden kleuren opgegeven als Hex-code (
#FFA500), als RGB-functie (rgb(255, 165, 0)) of als kleurwoord (orange). Hex is historisch de meest gebruikte notatie in CSS en HTML vanwege zijn compactheid. Moderne CSS Color Module Level 4 ondersteunt ook RGB met decimale waarden en percentages. - Grafisch ontwerp (Photoshop, Illustrator, Figma): kleurpanelen in Adobe Photoshop, Adobe Illustrator, Figma, Sketch en andere ontwerpprogramma’s tonen kleuren in zowel RGB als Hex. Ontwerpers schakelen regelmatig tussen beide notaties bij het afstemmen van kleuren met developers of bij het documenteren van huisstijlkleuren.
- Huisstijl en merkkleurenpaletten: kleurengidsen en brand guidelines leggen merkkleur vast in Hex-codes voor digitaal gebruik. Een Pantone-kleur wordt vertaald naar zijn dichtste RGB- en Hex-equivalent voor web en digitale publicaties.
- App- en gameontwikkeling: in iOS-ontwikkeling (Swift/UIKit) en Android-ontwikkeling (Kotlin/Jetpack Compose) worden kleuren vaak opgegeven als RGB-componenten of als Hex-strings. Hex wordt daarbij veel gebruikt als uitwisselingsformaat voor kleuren, bijvoorbeeld bij design handoff of styling in documentatie.
- Kleurpipet en kleuranalyse: wie een kleur uit een foto, screenshot of website wil overnemen, gebruikt een kleurpipet-tool (browser DevTools, Digital Color Meter op macOS, of een extensie). Deze tools tonen de opgepakte kleur als RGB of Hex, waarna omrekening naar de gewenste notatie nodig kan zijn.
- Data-visualisatie en infographics: bij het maken van grafieken, kaarten en dashboards in tools als D3.js, Tableau, Power BI of Matplotlib worden kleuren opgegeven als Hex-codes of RGB-waarden. Consistente kleurnotatie is essentieel voor reproduceerbare en toegankelijke visualisaties.
Wat zijn RGB en Hex?
RGB staat voor Rood, Groen en Blauw (Red, Green, Blue). Het is een additief kleurmodel: kleuren worden samengesteld door licht in deze drie primaire kleuren te combineren. Elke component heeft een decimale waarde van 0 tot 255 (8 bits per kanaal), wat 256³ = 16.777.216 verschillende kleuren oplevert. RGB(0, 0, 0) is zwart (geen licht); RGB(255, 255, 255) is wit (maximaal licht in alle drie de kanalen). Het RGB-model is de standaard voor alle apparaten die licht uitstralen: monitoren, smartphones, televisies en projectors.
Een Hex-kleurcode (hexadecimale kleurcode) is een alternatieve schrijfwijze van dezelfde RGB-kleur, waarbij elke component wordt uitgedrukt als een tweecijferig hexadecimaal getal. Hexadecimaal (basis 16) gebruikt de cijfers 0–9 en de letters A–F, waardoor waarden van 0 tot 255 decimaal worden weergegeven als 00 tot FF hexadecimaal. Een volledige Hex-code heeft de vorm #RRGGBB, waarbij RR het rode kanaal is, GG het groene en BB het blauwe. Hex is een hexadecimale representatie van dezelfde 24-bit kleurwaarde. RGB en hex zijn beide representaties van sRGB-kleuren; ze beschrijven dezelfde kleur, maar in een andere numerieke vorm.
Verschil tussen RGB en Hex
RGB en Hex beschrijven exact dezelfde kleur en hetzelfde kleurmodel. Het enige verschil is de notatie: RGB gebruikt drie decimale getallen gescheiden door komma’s; Hex gebruikt één aaneengesloten zescijferige hexadecimale code voorafgegaan door een hekje.
- RGB-notatie: rgb(255, 165, 0): drie decimale waarden van 0–255, leesbaar en intuïtief voor mensen
- Hex-notatie: #FFA500: zes hexadecimale tekens, compact en breed ondersteund in webtalen
- Korte Hex-notatie: #RGB: alleen mogelijk wanneer beide hexadecimale cijfers van elke component identiek zijn; #FFA500 kan niet worden verkort, maar #FF0000 wel: #F00
Waarom dit verschil belangrijk is:
In CSS en HTML worden beide notaties geaccepteerd, maar Hex is compacter en historisch de norm. In JavaScript, Swift, Kotlin en andere programmeertalen wordt Hex vaak gebruikt als compacte notatie of uitwisselingsformaat voor kleurwaarden, terwijl RGB(A)-structuren net zo gangbaar zijn afhankelijk van de context en library.
Hexadecimaal getallenstelsel
Om RGB naar Hex om te rekenen is een basiskennis van het hexadecimale stelsel nuttig. Hexadecimaal is een talstelsel met grondtal 16, dat gebruikmaakt van de symbolen 0–9 en A–F:
- 0–9: dezelfde waarden als decimaal (0 t/m 9)
- A = 10, B = 11, C = 12, D = 13, E = 14, F = 15
- Tweecijferig hex: het eerste cijfer stelt de vermenigvuldiging met 16 voor, het tweede de eenheden. Zo is FF = 15 × 16 + 15 = 255 en A5 = 10 × 16 + 5 = 165.
Met twee hexadecimale cijfers (00–FF) kunnen precies 256 waarden worden weergegeven: precies genoeg voor elk RGB-kanaal (0–255). Dat is waarom Hex zo naadloos aansluit op het RGB-model.
Formules RGB ↔ Hex
RGB naar Hex
Om een RGB-kleur om te rekenen naar een Hex-kleurcode:
waarbij toHex(n) = tweecijferige hexadecimale waarde van n (0–255)
R: 255 decimaal = FF hexadecimaal
G: 165 decimaal = A5 hexadecimaal
B: 0 decimaal = 00 hexadecimaal
→ Hex: #FFA500
Hex naar RGB
Om een Hex-kleurcode om te rekenen naar RGB:
G = decimaalwaarde van de middelste twee hex-tekens (positie 3–4)
B = decimaalwaarde van de laatste twee hex-tekens (positie 5–6)
R: 1A hex = 1 × 16 + 10 = 26
G: 73 hex = 7 × 16 + 3 = 115
B: E8 hex = 14 × 16 + 8 = 232
→ RGB: rgb(26, 115, 232) (Google-blauw)
Korte Hex-notatie (#RGB) naar volledige Hex (#RRGGBB)
Korte Hex-codes worden uitgebreid door elk teken te verdubbelen:
Veelgestelde vragen over RGB en Hex
Een Hex kleurcode is een zescijferige hexadecimale schrijfwijze van een RGB-kleur, altijd voorafgegaan door een hekje (#). De eerste twee tekens staan voor rood (00–FF), de middelste twee voor groen (00–FF) en de laatste twee voor blauw (00–FF). #000000 is zwart; #FFFFFF is wit; #FF0000 is zuiver rood. Hex is geen apart kleurmodel, het is uitsluitend een andere notatie van dezelfde RGB-kleur.
Een Hex-code van zes tekens (twee per kanaal) kan 16.777.216 verschillende kleuren representeren: 256 waarden per kanaal × 256 × 256 = 256³ = 16.777.216. Dit is identiek aan het 24-bits RGB-kleurmodel (8 bits per kanaal). De korte Hex-notatie (#RGB met drie tekens) kan slechts 4.096 kleuren representeren. Alleen de kleuren waarbij beide hexadecimale cijfers van elk kanaal identiek zijn.
De korte notatie #RGB is alleen geldig wanneer beide hexadecimale cijfers van elk kanaal identiek zijn. Bijvoorbeeld: #FF0000 kan worden verkort tot #F00; #AABBCC tot #ABC; #112233 tot #123. #FFA500 (oranje) kan niet worden verkort omdat de kanaalwaarden FF, A5 en 00 niet de dubbele-cijfer-structuur hebben. In moderne webontwikkeling wordt de volledige notatie aanbevolen voor duidelijkheid en consistentie.
RGBA voegt een vierde kanaal toe aan RGB: de alpha-waarde (transparantie), uitgedrukt als een decimaal getal van 0 (volledig transparant) tot 1 (volledig ondoorzichtig). In CSS: rgba(255, 165, 0, 0.5) is oranje met 50% transparantie. In moderne CSS kan transparantie ook als 8-cijferige Hex worden opgegeven: #FFA50080 (de laatste twee tekens, 80 hex = 128 decimaal, staan voor de alpha-waarde van circa 50%). De 8-cijferige Hex-notatie (#RRGGBBAA) wordt ondersteund in CSS4 en alle moderne browsers.
De eenvoudigste methode is via de DevTools van je browser: rechtsklik op een element → Inspecteren → klik op het gekleurde vakje in de CSS-stijlen. De browser toont de kleurcode in Hex, RGB, HSL en andere formaten. Alternatief: gebruik een kleurpipet-extensie (zoals ColorZilla voor Chrome/Firefox) om elke kleur op het scherm op te pikken. Op macOS is Digital Color Meter een ingebouwde tool; op Windows kun je PowerToys Color Picker gebruiken.
CSS definieert 148 standaard kleurnamen die direct in CSS-stijlen kunnen worden gebruikt, zoals red, blue, orange en rebeccapurple. Elke CSS-kleurnaam komt overeen met een vaste Hex-code: orange = #FFA500; tomato = #FF6347; steelblue = #4682B4. Kleurnamen zijn leesbaar maar beperkt (slechts 148 opties); Hex biedt toegang tot alle 16,7 miljoen kleuren. De CSS-kleurspecificatie is vastgelegd door het W3C.
Nee. In CSS en HTML zijn Hex-kleurcodes niet hoofdlettergevoelig: #FFA500, #ffa500 en #FfA500 zijn identiek. Conventioneel worden in CSS hoofdletters (#FFA500) of kleine letters (#ffa500) gebruikt, afhankelijk van de stijlgids van het project. In programmeertalen zoals JavaScript en Swift is Hex eveneens niet hoofdlettergevoelig voor kleurwaarden, hoewel sommige linters of formatters een voorkeur hebben voor één notatie.
Deel de decimale waarde door 16 en noteer het gehele getal als het eerste hexcijfer; de rest is het tweede hexcijfer. Vervang getallen boven 9 door letters (10=A, 11=B, 12=C, 13=D, 14=E, 15=F). Voorbeeld: 165 decimaal → 165 ÷ 16 = 10 rest 5 → eerste cijfer A (=10), tweede cijfer 5 → A5. Omgekeerd: A5 → A × 16 + 5 = 10 × 16 + 5 = 165. Zorg altijd dat het resultaat tweecijferig is: waarden onder 16 krijgen een voorloopnul (0 = 00, 15 = 0F).
Omrekentabel RGB naar Hex
In deze tabel zie je veelgebruikte kleuren omgezet van RGB naar Hex, inclusief een kleurpreview en de bijbehorende CSS-kleurnaam waar van toepassing.
| Kleur | RGB | Hex | CSS naam | Preview |
|---|---|---|---|---|
| Zwart | RGB(0, 0, 0) | #000000 | black | |
| Wit | RGB(255, 255, 255) | #FFFFFF | white | |
| Rood | RGB(255, 0, 0) | #FF0000 | red | |
| Groen | RGB(0, 128, 0) | #008000 | green | |
| Blauw | RGB(0, 0, 255) | #0000FF | blue | |
| Geel | RGB(255, 255, 0) | #FFFF00 | yellow | |
| Cyaan | RGB(0, 255, 255) | #00FFFF | cyan | |
| Magenta | RGB(255, 0, 255) | #FF00FF | magenta | |
| Oranje | RGB(255, 165, 0) | #FFA500 | orange | |
| Paars | RGB(128, 0, 128) | #800080 | purple | |
| Roze | RGB(255, 192, 203) | #FFC0CB | pink | |
| Grijs | RGB(128, 128, 128) | #808080 | gray | |
| Tomaat | RGB(255, 99, 71) | #FF6347 | tomato | |
| Staalablauw | RGB(70, 130, 180) | #4682B4 | steelblue | |
| Google-blauw | RGB(26, 115, 232) | #1A73E8 | — | |
| WhatsApp-groen | RGB(37, 211, 102) | #25D366 | — |
Omrekentabel Hex naar RGB
In deze tabel zie je veelgebruikte Hex-kleuren omgezet naar RGB, met de afleiding van elke kanaalwaarde.
| Hex | RGB | R (hex → dec) | G (hex → dec) | B (hex → dec) |
|---|---|---|---|---|
| #FF0000 | RGB(255, 0, 0) | FF = 255 | 00 = 0 | 00 = 0 |
| #00FF00 | RGB(0, 255, 0) | 00 = 0 | FF = 255 | 00 = 0 |
| #0000FF | RGB(0, 0, 255) | 00 = 0 | 00 = 0 | FF = 255 |
| #FFA500 | RGB(255, 165, 0) | FF = 255 | A5 = 165 | 00 = 0 |
| #1A73E8 | RGB(26, 115, 232) | 1A = 26 | 73 = 115 | E8 = 232 |
| #FFFFFF | RGB(255, 255, 255) | FF = 255 | FF = 255 | FF = 255 |
| #000000 | RGB(0, 0, 0) | 00 = 0 | 00 = 0 | 00 = 0 |
| #808080 | RGB(128, 128, 128) | 80 = 128 | 80 = 128 | 80 = 128 |
| #F00 | RGB(255, 0, 0) | Korte notatie: #F00 = #FF0000 | ||
| #ABC | RGB(170, 187, 204) | AA = 170 | BB = 187 | CC = 204 |
Gerelateerde calculators
Wil je meer kleurmodellen omrekenen of werken met andere kleurnotaties? Gebruik dan deze handige calculators:
Betrouwbaarheid van deze RGB naar Hex omrekeningen
De omrekeningen op deze pagina zijn gebaseerd op de officiële definities van het RGB-kleurmodel en de hexadecimale kleurnotatie zoals vastgelegd door internationale webstandaardenorganisaties. Het RGB-kleurmodel voor webgebruik is gedefinieerd binnen de IEC-norm IEC 61966-2-1 (sRGB), de meest gebruikte RGB-kleurruimte voor digitale schermen en het web.
De hexadecimale kleurnotatie (#RRGGBB) is gestandaardiseerd door het World Wide Web Consortium (W3C) in de CSS-kleurspecificatie. De huidige standaard is vastgelegd in CSS Color Module Level 4, die naast de zescijferige Hex-notatie ook de achtcijferige notatie (#RRGGBBAA) voor transparantie definieert. De omrekening tussen decimale RGB-waarden en hexadecimale representatie is gebaseerd op de wiskundige definitie van het hexadecimale talstelsel (basis 16).
Gebruikte bronnen en relevante links
-
W3C. CSS Color Module Level 4 – Color values.
Bekijk bron -
MDN Web Docs. CSS color value – hex-color.
Bekijk bron -
International Electrotechnical Commission (IEC). IEC 61966-2-1: Multimedia systems and equipment – sRGB colour space.
Bekijk bron -
W3Schools. HTML Color Picker & Color Names.
Bekijk bron
Redactionele controle: R. Teunissen, MSc (2026). Inhoud gecontroleerd op basis van de W3C CSS Color Module Level 4-specificatie, de IEC 61966-2-1 sRGB-definitie en de MDN-documentatie voor hexadecimale kleurnotaties in CSS.
Categorie: Kleur