Een HEX-code pakt drie 8-bits getallen in zes hexadecimale cijfers. HEX naar RGB converteren betekent die cijfers in paren splitsen en elk paar lezen als een decimaal getal tussen 0 en 255 — precies de waarden die CSS, Figma en afbeeldingseditors verwachten.
Hoe HEX naar RGB conversie werkt
- Verwijder de voorloop-# en, als de code maar drie cijfers heeft, verdubbel elk cijfer: #f53 wordt #ff5533.
- Splits de zes cijfers in drie paren — RR, GG en BB.
- Lees elk paar als een base-16 getal en zet het om naar base 10: FF wordt 255, 57 wordt 87, 33 wordt 51.
- Schrijf de drie resultaten als rgb(R, G, B).
Werkend voorbeeld
Deze conversie is exact. HEX en RGB beschrijven dezelfde sRGB-waarden in een andere notatie, dus er wordt niets afgerond of verloren in beide richtingen.
HEX en RGB uitgelegd
Wat is HEX?
Een HEX-code is een zescijferig hexadecimaal getal dat de rode, groene en blauwe kanaalwaarde van een kleur opslaat achter een voorloop-#. Elk paar cijfers staat voor één kanaal, van 00 (geen) tot FF (vol), wat dezelfde 16,7 miljoen kleuren levert als RGB in een veel kortere notatie. HEX is de standaard in CSS, ontwerp-tools en merkpagina's.
- Syntaxis:
- #RRGGBB
- Bereik:
- 00–FF per kanaal
- Het meest geschikt voor:
- CSS, design-overdracht, merkrichtlijnen
Wat is RGB?
RGB beschrijft een kleur als drie lichtkanalen — rood, groen en blauw — elk van 0 tot 255. Het weerspiegelt hoe schermen werken: alle drie op 255 geven wit, alle drie op 0 geven zwart. RGB is de juiste keuze wanneer je met de cijfers wilt rekenen, en rgba() voegt daar transparantie aan toe.
- Syntaxis:
- rgb(R, G, B)
- Bereik:
- 0–255 per kanaal
- Het meest geschikt voor:
- code, canvas, transparantie met rgba()
HEX naar RGB referentietabel
De meest voorkomende CSS-kleuren, geconverteerd van HEX naar RGB.
| Kleur | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |