Les 05 - Hexadecimaal en kleurcodes

• ALGO
• MBO
• Studiejaar 1

Python intro

Programming basics-II

Les 3 / Week 7a

Algoritmiek

ALGO

Lesweek 5

Les 5: Hexadecimaal en kleurcodes

Aan het einde van deze les kun je:

• herkennen wat het hexadecimaal tal-stelsel is
• uitleggen hoe kleurcodes in html/css werken
• de functies MOD en DIV toepassen

DIV en MOD

Bij binaire getallen berekenen, kijken we hoe vaak een bepaalde macht van 2 in ons decimale getal past. Met datgene wat er overblijft reken je dan verder.

Om dat te berekenen gebruikt een computer 2 functies.

DIV

DIV staat voor integer division.
In plaats van de exacte uitkomst van een deling te geven, rondt het de uitkomst af naar het dichtstbijzijnde gehele getal dat kleiner is dan of gelijk aan het werkelijke resultaat. 

Bij 10 DIV 3 is het resultaat 3, omdat 10 gedeeld door 3 gelijk is aan 3.33333333333333333333333333333333333 etc.

Maar dit wordt afgerond naar beneden naar het gehele getal 3

Niet te verwarren met DIV in HTML!

MOD

MOD staat voor de modulo-operator.
Het resultaat van een MOD-operatie is het overschot van de deling. Bij een integer wil je een geheel getal. 

Alles wat niet meer past, wordt 'rest' genoemd.

Bij 10 MOD 3 is het resultaat 1, omdat 10 gedeeld door 3 gelijk is aan 3 met een rest van 1. 3 past 3x in het getal 10. De rest, in dit geval 1, houd je over. Zo blijf je dus werken met gehele getallen.

Al die getallen

Afgelopen weken zijn we bezig geweest 

met verschillende tal-stelsels

Uiteraard kennen we ons eigen decimale stelsel:

0 1 2 3 4 5 6 7 8 9

Al die getallen

En we kunnen ondertussen werken 

met binaire getallen

00100111

Welk getal is dit decimaal?

Nog een talstelsel

Naast ons eigen decimale stelsel en het binaire stelsel werken computers met nóg een ander soort tal-stelsel:

Hexadecimaal

Nog een talstelsel

Bij hexadecimaal is de basis 16. Iedere positie in een hexadecimaal getal kan dus 16 verschillende waardes hebben.

Getalstelsels

Een decimaal getal van 2 posities kan maximaal 

100 verschillende waardes hebben:

Het kleinste getal is: 00 

Het grootste getal is: 99

Getalstelsels

Een binair getal van 2 posities kan maximaal 

4 verschillende waardes hebben:

00 

01

10

11

Getalstelsels

Een hexadecimaal getal van 2 posities kan maximaal 

256 verschillende waardes hebben.

Iedere positie kan immers 

16 verschillende "cijfers" zijn

Voor 2 posities geldt dus:

16 x 16 = 256 mogelijkheden

16 verschillende "cijfers". 

Waarom staat cijfers tussen aanhalingstekens?

Wij kennen maar 10 verschillende cijfers (0 t/m 9)
Om de 16 posities te kunnen vullen van een hexadecimaal getal, gebruiken we als notatie:

0 1 2 3 4 5 6 7 8 9 A B C D E F

codepen.io

Getalstelsels

Getalstelsel	Basis	Symbolen	Aantal symbolen	Maximale waarde 1 symbool
Decimaal	10	0 - 9	10	9
Binair	2	0 - 1	2	1
Hexadecimaal	16	0 - 9 A - F	16	15

Getalstelsels

10_dec = 10

10_bin = 2

10_hex = 16

Hexadecimaal bij WEB

Zonder het misschien te weten ben je hexadecimale getallen wel eens tegengekomen. We gebruiken deze notatie namelijk voor de kleurcodes in HTML en CSS.

RGB - Red Green Blue

De kleuren op een beeldscherm worden 

opgebouwd uit 3 kleuren

Rood

Groen

Blauw

RGB

#FF0000

#00FF00

#0000FF

Iedere positie kan 16 waardes hebben.
Een HEX-getal van 6 posities kan dus 

16 x 16 x 16 x 16 x 16 x 16 verschillende kleuren maken.

RGB

#FF0000

#00FF00

#0000FF

Dat zijn 16.777.216 mogelijkheden!
Meer dan 16,5 miljoen kleuren!

RGB waardes worden in

het decimale getalstelsel weergegeven

als getallen tussen 0 en 255.

De hoeveelheid rood  (R): 0 - 255

De hoeveelheid groen(G): 0 - 255

De hoeveelheid blauw(B): 0 - 255

www.w3schools.com

De RGB waarde van een kleur wordt opgeslagen in 3 bytes.

In 1 byte gaan 8 bits.
We weten dat een binair getal van 8 posities, 

maximaal 256 waardes kan hebben.

Kleurmodellen

RGB: Rood, Groen, Blauw. Wordt gebruikt voor beeldschermen

Bij het "mengen" van alle volledige kleuren krijg je wit

Staan alle bits op 0, krijg je dus zwart

De kleur wit in hexa & RGB

• The hexadecimal color            #ffffff 
• RGB values of                               255, 255, 255

    

Decimaal naar hexadecimaal

Om de HEX waarde van een RGB waarde te bepalen

1. Zet de decimale RGB waarde eerst om naar binair.
   Daar hebben we inmiddels zelf een applicatie voor gemaakt!
   
   
2. Zet de binaire waarde om naar hex
   Dit kun je doen met de 4-bits groepjes methode
   

Decimaal naar hexadecimaal

We hebben deze kleur:

rgb(42, 130, 90)

42 is binair: 00101010
130 is binair: 10000010

90 is binair: 01011010

Decimaal naar hexadecimaal

42 is binair: 00101010

Met 4 bits groepjes methode wordt dit:

Mijn CSS-kleurcode begint dus met: #2A

bin	0010	1010
dec	2	10
hex	2	A

Decimaal naar hexadecimaal

130 is binair: 10000010

Met 4 bits groepjes methode wordt dit:

Mijn CSS-kleurcode is nu: #2A82

bin	1000	0010
dec	8	2
hex	8	2

Decimaal naar hexadecimaal

90 is binair: 01011010

Met 4 bits groepjes methode wordt dit:

De totale CSS-kleurcode is: #2A825A

bin	0101	1010
dec	5	10
hex	5	A

Hexadecimaal naar decimaal

Omgekeerd werkt dat ook:

#FF9A0B

11111111bin = 255dec. R is dus 255

hex	F	F
dec	15	15
bin	1111	1111

Hexadecimaal naar decimaal

Omgekeerd werkt dat ook:

#FF9A0B

10011010bin = 154dec. G is dus 154

hex	9	A
dec	9	10
bin	1001	1010

Hexadecimaal naar decimaal

Omgekeerd werkt dat ook:

#FF9A0B

00001011bin = 11dec. B is dus 11

hex	0	B
dec	0	11
bin	0000	1011

Hexadecimaal naar decimaal

#FF9A0B

=

RGB (255, 154, 11)

Decimaal naar hexadecimaal

De 4-bits groepjes methode werkt ook voor grotere getallen.

Decimaal getal 5002 wordt binair:

0001001110001010

Decimaal naar hexadecimaal

Decimaal getal 5002 wordt binair:

0001001110001010

5002dec == 138Ahex

bin	0001	0011	1000	1010
dec	1	3	8	10
hex	1	3	8	A

Decimaal naar hexadecimaal

Decimaal getal 11.213 wordt binair:

0010101111001101

11.213dec == 2BCDhex

bin	0010	1011	1100	1101
dec	2	11	12	13
hex	2	B	C	D

Hexadecimaal naar decimaal

Dat werk andersom natuurlijk ook.

F31Bhex

F31Bhex = 1111001100011011bin

hex	F	3	1	B
dec	15	3	1	11
bin	1111	0011	0001	1011

Hexadecimaal naar decimaal

1111001100011011bin

1+2+8+16+256+512+4096+8192+16384+32768=

62.235dec

Opdrachten

ItsLearning > ALGO-B > Opdrachten

• DM0..DM9 DIV MOD rekenen
• DM10 Geef de hex en decimale waarde
• DM12 Verklaar de getallen bij image
• DM14 Maak het RGB programma