hex en hexadecimale kleuren

Ongeacht het soort website dat je maakt, de kans is groot dat u op een bepaald moment met kleuren gaat werken. Dit geldt vooral als je leert coderen met HTML om webpagina’s te ontwerpen.

Als je begint met ontwerpen in kleur, zul je waarschijnlijk een soort grafische interface gebruiken om de kleuren te kiezen die je wilt gebruiken voordat je ze toepast op de verschillende elementen op je pagina.

Naarmate je echter meer vertrouwen krijgt in het gebruik van HTML, en naarmate je meer naar de code zelf begint te kijken in plaats van alleen naar je grafische editor, zul je merken dat de kleuren die je kiest worden aangeduid met vreemd uitziende codes zoals #ff0000.

Deze codes worden Hex kleurcodes genoemd, en ze zijn een fundamenteel onderdeel van de manier waarop zowel HTML als CSS werken. Leren hoe ze werken zal je niet alleen veel tijd besparen, het zal je code ook sneller, eleganter en betrouwbaarder maken.

In deze handleiding nemen we je mee door alles wat je moet weten over hex-kleurcodes, en laten we je zien hoe je ze in je eigen project kunt gebruiken.

Wat betekent hexadecimaal?

Laten we eerst eens kijken naar het “hex” gedeelte van de term “hex kleurcode”. Hex, in deze context, staat voor “hexadecimal”, een getallensysteem met 16 basiscijfers, in plaats van de meer bekende 10. Dit is het getallensysteem dat wordt gebruikt in HTML, en trouwens ook in veel andere programmeertalen, en het is dus de manier waarop kleuren in de taal worden vastgelegd.

Hexadecimaal is, zoals de naam al zegt, een manier om een getallensysteem op basis van 16 te coderen. Decimaal, ons gewone getallensysteem waarmee u al bekend bent, is gebaseerd op 10.
Hexadecimaal gebruikt dezelfde cijfers als het gewone systeem voor de eerste 10 getallen (dus 0 – 9) en schakelt dan over op letters, zodat de getallen 10 – 15 worden gecodeerd met de letters A – F.

Terzijde: de belangrijkste reden waarom hexadecimaal wordt gebruikt is dat het een natuurlijke link heeft met het binaire systeem dat door uw computer op een meer elementair niveau wordt gebruikt. Binaire getallen worden gewoonlijk uitgedrukt als een macht van 2, en 16 is 2 tot de macht 4. Dit maakt het gemakkelijk om te rekenen tussen hexadecimaal en binair (hoewel we dat vandaag niet zullen doen). U hoeft dit niet te weten om hexadecimale kleurcodes te gebruiken, maar het kan van pas komen de volgende keer dat u indruk wilt maken op iemand.

Uit welke componenten bestaat een Hex en RGB kleur?

Hoe gebruiken we het hexadecimale systeem om kleuren in RGB te coderen? Kleuren die worden weergegeven op een computerscherm bestaan uit drie componenten, die overeenkomen met de drie kleuren die aanwezig zijn in elke pixel van uw scherm. Als je heel goed kijkt (of een oud scherm hebt) kun je ze zien – rood, groen en blauw.

De manier waarop wij kleuren coderen is dan ook door aan te geven hoeveel licht elk van de rode, groene en blauwe (RGB) delen van uw pixels moet uitstralen. Zo kan bijvoorbeeld een RGB-waarde (een type waarde dat in veel verschillende softwaresystemen wordt gebruikt) er als volgt uitzien RGB (255, 0, 0).

255 is de maximum waarde voor een component, en dus geeft deze waarde aan dat de eerste component (rood, of R) op maximum moet staan, en de andere twee op minimum. En dat geeft ons (je raadt het al) zuiver rood.

(Overigens heeft de reden dat 255 de maximumwaarde is ook te maken met het gemak waarmee deze waarde [of, eigenlijk, 256 inclusief 0] in binair kan worden gebruikt. 256 is 2^8. Maar dat is een ander weetje dat u echt niet hoeft te weten).

De oplettende lezers onder u zullen al gemerkt hebben dat het, zelfs in dit stadium, vrij eenvoudig is om met kleuren in deze vorm te werken. Zwart, als een RGB-waarde, is RGB (0,0,0), en wit is RGB (255,255,255). Groen is bijvoorbeeld RGB (0,255,0).

SAMENGEVAT
HEX (Hexadecimaal) ziet er zo uit #102945.
En hoe kom je er nu achter wat deze kleur precies is?
De eerste twee cijfers voor rood, de tweede voor groen, en de derde voor blauw. Elk teken kan de volgende waarden aannemen: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 en a, b, c, d, e, f. Waarbij #000000 zwart is, en #ffffffff wit.

Hoe Hex-kleuren werken

Nu we weten hoe kleuren werken, kunnen we kijken naar een echte hex kleurcode. Neem, bijvoorbeeld, #ff0000, en laten we onze kennis van hierboven combineren om uit te vinden wat het betekent.

Kijk eens naar je hexadecimale tabel, en je zult zien dat “FF” vertaald is naar “255” in standaard, base-10 codering.

Dit zou een aanwijzing moeten zijn. De eerste twee tekens van deze hexadecimale kleurcode (en in feite alle hexadecimale kleurcodes) verwijzen naar de rode component, en hier is de waarde 255. De tweede twee karakters verwijzen naar de groene component, en de laatste twee naar de blauwe.

Vanaf hier kun je uitrekenen wat #ff0000 betekent wanneer het vertaald wordt naar een kleur – het is hetzelfde als RGB (255,0,0). Dat wil zeggen, puur rood. Evenzo geeft #ff00ff maximaal rood en blauw tegelijk aan, wat magenta oplevert:

Het is op dit punt dat u de waarde en elegantie van hexadecimale kleurcodes begint te herkennen. Omdat ze hexadecimaal zijn, en omdat 255 de maximumwaarde is voor een component, kan elke mogelijke kleur worden uitgedrukt met slechts 6 cijfers.

Dit systeem betekent ook dat er een enorm scala aan kleuren beschikbaar is, omdat elke component elke waarde van 0 tot 255 kan aannemen. Reken maar eens uit hoeveel verschillende combinaties mogelijk zijn, en je zult zien dat er 16.777.216 kleuren beschikbaar zijn.

Hoe afkortingen in hexcodes te gebruiken

Nu u de hexadecimale kleurcodes begrijpt, kunt u ze gaan gebruiken in uw webprojecten in plaats van een kleurkiezer op uw grafische interface te gebruiken. Voordat we daar echter aan beginnen, is het belangrijk te beseffen dat deze twee opties niet de enige zijn die voor u openstaan.

HTML, dat is ontworpen om eenvoudig in het gebruik te zijn, staat je ook toe om afgekorte hexcodes te gebruiken. Rood, dat in hexcode #FF0000 is, kan worden afgekort tot #F00. Dat wil zeggen, één cijfer voor rood, één cijfer voor groen, één cijfer voor blauw. Browsers zullen #FF0000 en #F00 interpreteren als precies dezelfde kleur. Dit reduceert het totaal aantal mogelijke kleuren tot ongeveer 4.000. Het heeft echter andere voordelen.

Net zoals u steno kunt gebruiken om CSS-aflevering te optimaliseren, kan het coderen van uw kleuren met behulp van afkortingen de prestaties van uw webpagina’s verbeteren. Dit is misschien niet zichtbaar wanneer u met kleine pagina’s werkt, maar kan een aanzienlijke impact hebben wanneer uw projecten complexer worden.