HEX naar RGB Kleurcode Omrekenen
Met deze kleurcode converter reken je eenvoudig HEX-codes om naar RGB-waarden en andersom. Vul een hexadecimale kleurcode in (zoals #FF5733) of geef afzonderlijke rood-, groen- en blauwwaarden op, en zie direct het resultaat in beide formaten. De tool toont ook de HSL-waarden en kant-en-klare CSS-code. Onmisbaar voor webdesigners, frontend developers en grafisch ontwerpers die dagelijks met kleurdefinities werken in HTML, CSS en designsoftware.
HEX naar RGB Kleurcode Omrekenen
Hoe werkt de berekening?
- Splits de 6-tekens HEX-code in drie paren van twee tekens.
- Converteer elk paar van hexadecimaal naar decimaal met hexdec().
- Het eerste paar is Rood (R), het tweede Groen (G), het derde Blauw (B).
- Voor RGB naar HEX: converteer elke waarde (0-255) naar een 2-cijferige hexadecimale string met dechex().
- Voeg de drie hexadecimale waarden samen en plaats er een # voor.
- Bereken HSL via de standaard RGB-naar-HSL conversieformule.
Voorbeeldberekening
Je wilt de kleurcode #3498DB omrekenen naar RGB-waarden voor gebruik in een designtool.
- HEX-code: #3498DB
- Splits: 34 | 98 | DB
- Rood: hexdec("34") = 52
- Groen: hexdec("98") = 152
- Blauw: hexdec("DB") = 219
- RGB: rgb(52, 152, 219)
- HSL: hsl(204, 70%, 53%)
Resultaat:
De kleurcode #3498DB komt overeen met RGB(52, 152, 219), een helder blauw met hoge verzadiging.
Resultaat interpreteren
De HEX-code en RGB-waarden beschrijven exact dezelfde kleur in verschillende notaties. HEX wordt voornamelijk gebruikt in HTML en CSS, terwijl RGB gangbaar is in designsoftware en programmeertalen. HSL is handig om kleurtinten, verzadiging en helderheid intuïtief aan te passen. De relatieve luminantie helpt bij het bepalen van voldoende contrast volgens WCAG-richtlijnen voor webtoegankelijkheid.
Tips
Gebruik korte HEX-notatie (#F00 in plaats van #FF0000) als alle paren gelijke tekens hebben.
In CSS4 kun je ook hex met alpha gebruiken: #FF573380 voor 50% transparantie.
HSL is intuïtiever voor het aanpassen van kleuren: verander de hue voor een andere tint, saturation voor levendigheid.
Zorg voor een contrastverhouding van minimaal 4,5:1 tussen tekst en achtergrond voor WCAG AA-compliance.
Online kleurenpaletten als Coolors of Adobe Color werken met HEX-codes; deze tool helpt bij de conversie.
Veelgemaakte fouten
Het hekje (#) vergeten bij HEX-codes in CSS, waardoor de kleur niet wordt herkend.
Verwarring tussen 3-tekens en 6-tekens HEX: #F00 is #FF0000 (rood), niet #F00000.
RGB-waarden boven 255 of onder 0 invoeren, wat ongeldige kleuren oplevert.
HEX-codes met ongeldige tekens (G-Z) invoeren; alleen 0-9 en A-F zijn geldig.
Aannemen dat HEX-codes hoofdlettergevoelig zijn; #ff5733 en #FF5733 zijn dezelfde kleur.
De alfa-component (transparantie) vergeten bij RGBA of HEXA notaties.
Veelgestelde vragen
Een HEX-kleurcode is een zescijferige hexadecimale waarde die een kleur representeert in het RGB-kleurmodel. De eerste twee cijfers staan voor rood, de middelste voor groen en de laatste voor blauw. Waarden lopen van 00 (minimum) tot FF (maximum, oftewel 255 in decimaal). Voorafgegaan door een hekje (#), bijvoorbeeld #FF5733.
RGB definieert een kleur met drie kanalen: Rood, Groen en Blauw (elk 0-255). RGBA voegt een vierde kanaal toe: Alpha, een transparantiewaarde van 0 (volledig transparant) tot 1 (volledig dekkend). Bijvoorbeeld: rgba(255, 87, 51, 0.5) geeft een half-transparant oranje.
De korte notatie gebruikt 3 tekens in plaats van 6, waarbij elk teken wordt verdubbeld. Zo staat #F00 voor #FF0000 (rood), #09C voor #0099CC (blauw) en #FFF voor #FFFFFF (wit). Gebruik dit alleen als elk kanaal uit twee identieke tekens bestaat.
HSL staat voor Hue (kleurtint, 0-360°), Saturation (verzadiging, 0-100%) en Lightness (helderheid, 0-100%). HSL is intuïtiever dan RGB omdat je makkelijk variaties kunt maken: verander de hue voor een andere kleur, saturation voor meer of minder levendigheid, of lightness voor lichter of donkerder.
WCAG 2.1 vereist een contrastverhouding van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst (niveau AA). De relatieve luminantie die deze tool berekent, helpt daarbij. Gebruik de aanbevolen tekstkleur als uitgangspunt en controleer met een specifieke contrastchecker voor exacte verhoudingen.
HEX en RGB zijn bedoeld voor schermweergave (additieve kleurmenging). Voor print wordt CMYK (Cyan, Magenta, Yellow, Key/Black) gebruikt, een subtractief kleurmodel. Kleuren kunnen er op papier anders uitzien dan op scherm. Gebruik voor printontwerp een CMYK-converter of designsoftware met kleurprofielen.
Over deze berekening
Auteur
Mastercalc Redactie
Financieel en technisch redactieteam
Laatst bijgewerkt
2026-08-24
Aannames bij deze berekening:
- De tool accepteert zowel 3- als 6-tekens HEX-codes, met of zonder hekje (#).
- RGB-waarden worden beperkt tot het bereik 0-255 per kanaal.
- HSL wordt berekend via de standaard conversieformule en afgerond naar gehele getallen.
- De luminantie wordt berekend volgens de WCAG 2.1 specificatie voor relatieve luminantie.
- Bij invoer van zowel HEX als RGB wordt de HEX-code als leidend beschouwd.
Kleurweergave kan variëren per scherm, browser en besturingssysteem. De berekende waarden zijn wiskundig correct, maar de visuele weergave is afhankelijk van de kalibratie van je monitor. Voor professioneel kleurwerk gebruik je gekalibreerde schermen en ICC-kleurprofielen.