Hex-kleurcodes uitgelegd: zo werkt #RRGGBB

Zo werkt een hex-kleurcode

Elke kleur op een scherm wordt gemengd uit rood, groen en blauw licht. Een hexcode schrijft de sterkte van elk licht als twee tekens na het #-teken: eerst rood, dan groen, dan blauw. Dat is het patroon #RRGGBB.

De tekens zijn hexadecimaal, een manier van tellen met 16 cijfers: 0 tot en met 9, dan a (10), b (11), c (12), d (13), e (14) en f (15). Eén paar dekt 256 waarden, van 00 (0) tot ff (255), precies het bereik van rgb().

Om een paar om te zetten naar een gewoon getal, vermenigvuldig je het eerste cijfer met 16 en tel je het tweede erbij op. Hieronder staat #1e90ff, de CSS-kleur dodgerblue, in vier formaten, en daarna paar voor paar uitgerekend.

Dus #1e90ff is rgb(30, 144, 255): een beetje rood, flink wat groen en vol blauw, samen een helder hemelsblauw. Drie paren van 256 waarden geven 16.777.216 mogelijke kleuren.

Korte hexcodes met 3 of 4 cijfers

Als beide cijfers van elk paar gelijk zijn, kun je elk paar één keer schrijven. #ffcc00 wordt #fc0, en de browser verdubbelt elk cijfer weer. #1e90ff heeft geen korte vorm, omdat 1e en 90 geen dubbele paren zijn.

De korte vorm dekt maar 4096 van de 16,7 miljoen kleuren. Een versie met vier cijfers voegt op dezelfde manier dekking toe, dus #f008 betekent #ff000088.

Hex-transparantie: hex met 8 cijfers en alfa

Een code met acht cijfers voegt een vierde paar toe voor alfa, de dekking: #RRGGBBAA. 00 is volledig transparant en ff volledig dekkend. Elke actuele browser ondersteunt dit in CSS, net als de korte vorm #RGBA met vier cijfers.

Om het paar te vinden, vermenigvuldig je de dekking met 255, rond je af op een heel getal en zet je dat om naar hex. 50% geeft 127,5, afgerond 128, geschreven als 80. Hier is de volledige tabel, toegepast op #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Twee valkuilen. Ten eerste is 80 gelijk aan 128 van 255, dus 50,2% en niet precies 50%: hex-alfa heeft maar 256 stappen, dus de meeste ronde percentages zijn een benadering. Ten tweede zet Android alfa vooraan. In een Android-kleurresource betekent #801e90ff hetzelfde als #1e90ff80 in CSS.

Een hexcode op het oog lezen

Je kunt een kleur raden zonder iets om te rekenen. Kijk naar het eerste cijfer van elk paar, want dat bevat bijna alle informatie.

• Het hoogste eerste cijfer is het overheersende licht. #d2691e heeft d bij rood, 6 bij groen en 1 bij blauw, dus het is oranjebruin.
• Twee hoge kanalen mengen: rood en groen geven geel, groen en blauw geven cyaan, rood en blauw geven magenta of paars.
• Drie gelijke paren geven grijs. #333333 is donkergrijs, #999999 lichtgrijs. Bijna gelijke paren, zoals #708090, geven een gedempte, grijzige kleur.
• Hoge cijfers betekenen een lichte kleur, lage cijfers een donkere. Zijn alle drie de paren c0 of hoger, dan is de kleur bleek. Zijn ze alle drie 30 of lager, dan is ze heel donker.
• Groen oogt veel lichter dan blauw bij hetzelfde getal. #00ff00 heeft een OKLCH-lichtheid van 0,866, #0000ff maar 0,452.

Waarom #808080 geen middengrijs is

#808080 zit qua getallen precies in het midden: 128 van 255 in elk kanaal. Toch ziet het er niet uit als het midden tussen zwart en wit. De OKLCH-lichtheid is 0,600, dus het oogt als 60% van de weg naar wit.

Hexwaarden zijn al gecodeerd met de sRGB-curve, die het oog ruwweg volgt, maar niet precies. #808080 geeft ongeveer 21,6% van het licht van wit, en perceptuele modellen leggen het visuele midden lager: OKLCH bij #636363, CIELAB bij #777777.

Voor tekst is dit belangrijk. Grijs #808080 op wit haalt 3,95:1 en zakt voor WCAG AA bij lopende tekst. #767676 is het lichtste grijs dat 4,5:1 haalt, en #777777, één stap lichter, zakt al met 4,48:1.

Hoofdletters of kleine letters, met of zonder #

Hexcodes zijn niet hoofdlettergevoelig. #1E90FF, #1e90ff en #1E90ff zijn dezelfde kleur in CSS, SVG en designtools. Kies één stijl en houd die overal aan, zodat je bij het zoeken in je code elk gebruik vindt. In CSS zijn kleine letters de gangbare keuze.

Het #-teken hoort bij de CSS-syntax, niet bij de kleur. Figma en veel designtools tonen de code zonder, en programmeertalen schrijven hem vaak als getal met het voorvoegsel 0x, zoals in Flutter, waar Color(0xFF1E90FF) begint met het alfapaar.

De hexcode van een kleur op je scherm vinden

Gebruik een pipet: een tool die de kleur onder je cursor uitleest en de code toont. Die zijn gratis en meestal al geïnstalleerd.

• Chrome en Edge: open DevTools met F12, klik op een kleurvakje in het paneel Styles en gebruik het pipeticoon om een kleur van de pagina te kiezen.
• PickShade: de kleurkiezer op de homepage heeft in Chrome en Edge een pipetknop die overal op het scherm een kleur oppikt.
• Windows: installeer Microsoft PowerToys en druk op Win + Shift + C om Color Picker te openen.
• macOS: open Digitale kleurmeter via Programma’s, Hulpprogramma’s. Zet hem op sRGB en kies dan in het menu Weergave dat waarden hexadecimaal worden getoond.
• Figma, Photoshop en de meeste designapps: druk op I voor het pipet.
• In een foto of screenshot: open die in de kleurkiezer voor afbeeldingen en klik op een pixel. De afbeelding blijft op je apparaat.

Een opgepikte waarde kan een paar eenheden afwijken van het origineel, omdat schermen kleurprofielen toepassen en afbeeldingen gecomprimeerd zijn. Heb je de exacte waarde nodig, kopieer die dan uit het designbestand of de CSS, niet uit een screenshot.

Vragen en antwoorden