HEX en RGB: twee manieren om dezelfde kleur te schrijven
Elke kleur die je op een scherm ziet, wordt samengesteld uit drie lichten: rood, groen en blauw. Zet alle drie op vol vermogen en je krijgt wit; zet ze allemaal uit en je krijgt zwart. HEX en RGB zijn simpelweg twee notaties om te beschrijven hoe helder elk van die drie kanalen moet zijn. Ze verwijzen naar exact dezelfde kleur, dus een goede converter vertaalt gewoon tussen de twee schrijfsystemen zonder de werkelijke tint ooit te veranderen. Dat is wat dit tool doet, volledig in je browser, terwijl hij een live kleurvlak toont zodat je het resultaat met eigen ogen kunt bevestigen.
Hoe je een hexcode leest
Een hexkleur ziet eruit als #1E90FF. Het hekje markeert alleen het begin; de zes tekens erna zijn drie paren in het patroon #RRGGBB. Het eerste paar is rood, het tweede is groen, het derde is blauw. Elk paar is een getal geschreven in hexadecimaal, ofwel grondtal 16, waarbij de cijfers 0-9 lopen en vervolgens A, B, C, D, E en F staan voor 10 tot en met 15. Eén paar kan waarden bevatten van 00 (het kanaal volledig uit) tot FF (volledig aan). In decimaal is dat bereik precies 0 tot 255, dezelfde schaal die RGB gebruikt. Met 256 mogelijke niveaus per kanaal kan de zescijferige vorm 16.777.216 afzonderlijke kleuren beschrijven.
Conversie in beide richtingen, met een uitgewerkt voorbeeld
Om van HEX naar RGB te gaan, splits je de code in de drie paren en converteert elk van grondtal 16 naar gewone decimalen. Neem #1E90FF. Het rode paar is 1E: dat is 1 maal 16, plus 14 (E), wat 30 geeft. Het groene paar 90 is 9 maal 16, plus 0, wat 144 geeft. Het blauwe paar FF is 15 maal 16, plus 15, wat 255 geeft. Dus #1E90FF wordt rgb(30, 144, 255) — het bekende dodgerblauw.
De andere richting is hetzelfde proces in omgekeerde volgorde. Neem elk RGB-getal en schrijf het als twee hexcijfers. Zuiver rood, rgb(255, 0, 0), geeft FF, 00 en 00, die samen #FF0000 vormen. Eén ding om te onthouden: als een waarde kleiner is dan 16, heb je toch beide cijfers nodig, dus 5 schrijf je als 05 en niet als 5. De converter regelt die opvulling voor je, maar het gaat mensen mis als ze het met de hand doen.
Waar elk formaat wordt gebruikt
HEX is de dagelijkse taal van het web. CSS, HTML en de meeste code die je schrijft, grijpen naar hexcodes omdat ze compact zijn en makkelijk te kopiëren. RGB duikt meestal op in ontwerp- en beeldbewerkingtoepassingen — Figma, Photoshop, Sketch en Illustrator tonen doorgaans schuifregelaars of velden in het 0-255-bereik, en schermopname- of videotoepassingen verwachten RGB ook vaak. Dus pak je regelmatig een hexcode uit een stylesheet en heb je de RGB-vorm nodig om in een ontwerppaneel te typen, of andersom. Die heen-en-weergaande conversie is precies waarom een converter handig is. Als je een complete set bijpassende tinten wilt samenstellen in plaats van één kleur te vertalen, is onze kleurpalettengenerator het betere startpunt, en je vindt meer hulpmiddelen zoals dit onder ontwikkelaarstools.
Alpha, doorzichtigheid en HSL
Beide notaties hebben een uitgebreide vorm die transparantie toevoegt. RGB wordt rgba(30, 144, 255, 0,5), waarbij de vierde waarde alpha is — 0 is volledig doorzichtig en 1 is volledig ondoorzichtig. HEX voegt een vierde paar toe voor hetzelfde doel en geeft een achtcijferige #RRGGBBAA-code; 80 staat bijvoorbeeld voor ongeveer 50 procent dekking. Sommige converters bieden ook HSL (hue, saturation, lightness), dat kleur beschrijft zoals een mens dat zou doen — kies een tint op het wiel, stel dan de levendigheid en helderheid in. HSL is een ander mentaal model in plaats van een ander palet, en kan intuïtiever zijn als je een kleur lichter of minder verzadigd wilt maken zonder drie afzonderlijke getallen te moeten balanceren.
Veelgestelde vragen
Maakt het hekje deel uit van een hexcode?
Het hekje is een markering die CSS en ontwerptoepassingen vertelt dat je een hexkleur geeft. De kleur zelf zijn de zes tekens erna. De meeste tools accepteren de code met of zonder hekje en voegen het terug toe.
Wat is het verschil tussen een 3-cijferige en een 6-cijferige hexcode?
Een 3-cijferige code is een afkorting waarbij elk cijfer wordt verdubbeld, dus #1AF betekent #11AAFF. Hij bereikt maar 4.096 kleuren, terwijl de volledige 6-cijferige vorm meer dan 16 miljoen kleuren bereikt.
Waarom heeft mijn hexcode acht tekens?
Een 8-cijferige hexcode voegt een vierde paar toe voor alpha, ofwel transparantie. De eerste zes tekens zijn nog steeds rood, groen en blauw, en de laatste twee stellen de dekking in van 00 (onzichtbaar) tot FF (ondoorzichtig).
Zijn hexcodes hoofdlettergevoelig?
Nee. #1e90ff en #1E90FF beschrijven exact dezelfde kleur. Hexadecimale letters werken hetzelfde in hoofd- of kleine letters, dus gebruik wat je team verkiest.
Zien HEX en RGB er ooit anders uit op het scherm?
Nee. Als ze dezelfde kanaalwaarden beschrijven, zijn het identiek dezelfde kleur. Elk zichtbaar verschil komt van een typefout of van één code die transparantie bevat die de andere weglaat.
Hoeveel kleuren kan een standaard hexcode weergeven?
Een 6-cijferige hexcode biedt 256 niveaus voor elk van de drie kanalen, wat zich vermenigvuldigt tot 16.777.216 mogelijke kleuren.