RGB geeft je drie decimale kanalen tussen 0 en 255. Omzetten naar HEX verandert elk kanaal in een tweecijferig hexadecimaal getal, zodat de hele kleur in één compact token past dat elke browser, ontwerptool en stijlgids begrijpt.
Hoe RGB naar HEX conversie werkt
- Neem het roodkanaal en deel het door 16: de quotiënt is het eerste cijfer, de rest het tweede.
- Schrijf de cijfers 10 tot 15 als de letters A tot F — 255 wordt FF.
- Herhaal voor groen en blauw, en pad enkele cijfers met een voorloopnul: 5 wordt 05.
- Voeg de drie paren samen en zet een # ervoor.
Werkend voorbeeld
Exact, zolang de kanalen gehele getallen van 0 tot 255 zijn. Breukwaarden zoals rgb(79.5, 70, 229) worden eerst naar het dichtstbijzijnde gehele getal afgerond, omdat HEX niets daartussen kan opslaan.
RGB en HEX uitgelegd
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()
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
RGB naar HEX referentietabel
De meest voorkomende CSS-kleuren, geconverteerd van RGB naar HEX.
| Kleur | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |