Home

Van kleur naar getal

Hexadecimaal: systematische getallenchaos
Programmeurs weten dat computers niets kunnen beginnen met het decimale getallenstelsel. Omdat er maar twee toestanden kunnen worden verwerkt moet alles zich in deze situatie schikken. De twee toestanden waarmee een pc werkt, worden vaak beschreven met enen en nullen, en daaruit kan dan een binair getallenstelsel worden afgeleid

Decimaal, Binair en Hexadecimaal

Decimaal Stelsel
decimaal; deci = 10.
10 is het grondtal van ons hedendaags talstelsel. Wij tellen dus van 1 -> 10.

Binair Stelsel
binair; bi = 2.
2 is het grondtal van dit stelsel. Een computer werkt liever met binaire getallen en je kunt alleen maar de getallen '1' en '0' gebruiken. Een computer heeft flip-flops (geintegreerde schakelaars) en deze dingetjes kunnen 2 niveaus van volts opslaan, meestal 0.5 volt en 5 volt en deze worden dan respectievelijk als 0 en 1 opgevat, de fameuze bits. Groepen van 8 of 16 flip-flops zijn registers.

Een paar namen:
1 bit = kleinste datamogelijkheid (0 of 1)
4 bits = nibble
8 bits (2^3 bits) = byte
2 bytes (2^4 bits) = word
2 words (2^5 bits) = Double Word (DWORD)
1024 bytes (2^10 bytes) = Kilobyte (Kb)
1024 KB = Megabyte (Mb)
1024 MB = Gigabyte (Gb)
1024 GB = Terabyte (Tb)
1024 TB = Petabyte (Pb)
1024 PB = Exabyte (Eb)

Van decimaal naar binair.
Hier bestaan verschillende formules voor, hier eentje (de gemakkelijkste). We beginnen gewoon met een voorbeeldje.
We nemen het decimaal cijfer 99. Dan doen we zo:
99/2= 49 rest= 1
      49/2= 24 rest= 1
            24/2= 12 rest= 0
                  12/2= 6 rest= 0
                        6/2= 3 rest= 0
                             3/2= 1 rest= 1
                                  1/2= 0 rest= 1
Van onder naar boven toe krijgen we: 1100011. Dit is 99 in binair stelsel, gewoon blijven delen door 2, en alle resten van onder naar boven achter elkaar zetten.

Van binair naar decimaal.
Weer een voorbeeldje; we zetten het binair getal 100101011 om naar decimaal. Dit is zelfs nog makkelijker .
  1       0       1       0       1       0       1       1
= 1*2^7 + 0*2^6 + 1*2^5 + 0*2^4 + 1*2^3 + 0*2^2 + 1*2^1 + 1*2^0
= 128   +   0   +   32  +   0   +   8   +   0   +   2   +   1
= 171
 Het is dus het getal (1 of 0) en je vermenigvuldigt dat met 2^x, waar x de plaats van het bit is van rechts naar links oplopend van 0 tot 7., waarbij '^' = tot de macht...

Hexadecimaal Stelsel
hexa+decimaal; (hexa = 6) + (deci = 10) = 16.
Hier is dus 16 het grondtal. Hier tel je van 0 tot 9 en dan ga je verder van A -> F.
1 -> 16 in hexadecimaal stelsel:
0 1 2 3 4 5 6 7 8 9 A B C D E F

En dan nu de conversie, dat gaat van decimaal altijd via binair naar hexadecimaal. We verdelen het binaire getal in groepjes van 4 bits (van rechts te beginnen), en vullen desnoods de laatste op met nulletjes. Dan nemen we van elke nibble apart de hexadecimale waarde.
Even een voorbeeldje, we nemen het decimale getal 59:
59/2= 29 rest= 1
      29/2= 14 rest= 1
            14/2= 7 rest= 0
                  7/2= 3 rest= 1
                       3/2= 1 rest= 1
                            1/2=0 rest= 1
111011:
0011     | 1011
0011 = 3 | 1011 = 11
de hexadecimale waarde van 3 blijft 3 en van 11 is die B.
Dus krijgen we: 0x3B als hexadecimaal voor 111011 (59 decimaal). De '0x' staat voor 'dit is een hexadecimaal getal in C++'
Om van een hexadecimaal getal een binair getal te maken, keren we gewoon die stappen om.

Terug naar begin

Waarom eigenlijk hexcode?
In de dagelijkse omgang met computers is het niet interessant hoe de invoer wordt verwerkt. Ook bij het maken van afbeeldingen zul je de kleuren willen selecteren naar je beeld ervan, en geen gedachten willen verspillen aan de getalswaarden en het kleurensysteem waar ze in thuishoren.
Als het gaat om webdesign zul je je echter bezig moeten houden met de gewraakte kleurwaarden. Altijd als je kleuren gebruikt in webpagina's - bijvoorbeeld voor de achtergrond, gekleurde tekst en bonte hyperlinks - moet je de kleuren benoemen met een getal. "Donkergroenviolet" beschrijft een bepaalde kleur misschien correct naar eigen smaak, maar wat moet een computer ermee aanvangen? Computers kunnen alleen getallen verwerken. Omdat de omgang met binaire waarden allesbehalve gemakkelijk is, worden getallen vaak opgeschreven met behulp van het hexadecimale stelsel. Zoals je ondertussen wel weet, worden kleuren in de praktijk genoteerd volgens het RGB-kleurenmodel, omdat dit past bij combinaties van gekleurde lichtbronnen zoals op een monitor. In het RGB-model komen alleen getalswaarden van 0 tot 255 voor. Natuurlijk is dat geen toeval, want met een enkele byte - dus acht bits (een combinatie van acht nullen en enen) - kun je exact deze 256 verschillende toestanden beschrijven (zie kader boven).

Het hexadecimale stelsel is in tegenstelling tot het decimale stelsel een systeem met 16 cijfers. Dat betekent dat de basis van het stelsel het getal 16 is in plaats van 10 (zie kader boven). De logica van het hexadecimale stelsel vertelt ons dat hexgetallen decimalen tot en met 255 kunnen weergeven in maar 2 cijfers, terwijl het decimale stelsel daarvoor 3 posities nodig heeft. Dat bespaart een beetje ruimte. Wordt men het er ook nog over eens dat alle getallen systematisch in twee cijfers worden weergegeven, dan kan men meerdere hexadecimale waarden achter elkaar zetten, zonder het overzicht te verliezen. Om duidelijk te maken dat het bij het nieuwe getal om een hexadecimaal getal gaat, wordt de getallenreeks voorafgegaan door het teken #.

Gevoel voor hexwaarden voor kleuren ontwikkelen
Ook als de hexadecimale schrijfwijze op het eerste gezicht alleen maar verwarrend is - het is niet half zo ingewikkeld als het lijkt en met wat oefening kun je zelfs een aantal basiskleuren snel herkennen. Achter de HTML-hexnotatie zit een praktisch systeem: als je onthoudt dat de decimale 0 overeenkomt met de hexwaarde 00, en het getal 255 (de hoogste waarde voor een RGB-kleur) zich laat noteren als FF, dan kun je al enkele basiskleuren uit het hoofd mengen. Je hebt al eerder kunnen lezen dat de RGB-basiskleuren worden berekend aan de hand van het in- en uitschakelen van drie lichtbronnen. De secundaire kleuren zijn het resultaat van een vermenging van slechts twee basiskleuren. Daar komt wit nog bij, waarvoor alle kleurbronnen aan staan en zwart, waarvoor ze allemaal uit worden gezet. De toestand uit wordt vertegenwoordigd door de waarde 0, en volledig aan door de waarde 255. Hexadecimaal komen die waarden overeen met 00 en FF.

Wilt u een nieuwe kleur genereren, dan noteert u gewoon in drie blokken na elkaar de toestand van elke basiskleur en daar hebt u dan al de HTML-getalswaarde.

Rood Groen Blauw HTML Kleur
00 00 00 #000000 Zwart  
FF 00 00 #FF0000 Rood  
00 FF 00 #00FF00 Groen  
00 00 FF #0000FF Blauw  
FF FF 00 #FFFF00 Geel  
FF 00 FF #FF00FF Magenta  
00 FF FF #00FFFF Cyaan  
FF FF FF #FFFFFF Wit  

Alle overige mengkleuren kun je nu genereren door de afzonderlijke RGB-waarden te variëren.

Terug naar begin