Embed Size (px)
Citation preview
Hexadecimal Number System
CS 1
Rick Graziani
Cabrillo College
Spring 2007
Rick Graziani [email protected] 2
Rick Graziani [email protected] 3
Rick Graziani [email protected] 4
Pixels
• A monitors screen is divided into a grid of small unit called picture elements or pixels.
• The more pixels per inch the better the resolution, the sharper the image.
• All colors on the screen are a combination of red, green and blue (RGB), just at various intensities.
Rick Graziani [email protected] 5
Rick Graziani [email protected] 7
• With web applications like HTML (Hypertext Markup Language), colors are sometime described using their RGB color specification in hexadecimal.
<tr>
<td rowspan="2" bgcolor="#cccc99"> </td>
<td height="30" bgcolor="#999966"><div id="mainnav">
Hexadecimal Number
Rick Graziani [email protected] 8
Hexadecimal RED GREEN BLUE
<td rowspan="2" bgcolor="#cccc99"> </td>
Red Green Blue
cc cc 99
<td height="30" bgcolor="#999966"><div id="mainnav">
Red Green Blue
99 99 66
# means hexadecimal in web applications
Rick Graziani [email protected] 9
Hexadecimal Numbers
• What are they?
• Why do these people use them?
–web designers
–digital medial creators
–computer scientists
–networking professionals
Rick Graziani [email protected] 10
Rick’s Number System Rules
• All digits start with 0
• A Base-n number system has n number of digits:– Decimal: Base-10 has 10 digits– Binary: Base-2 has 2 digits– Hexadecimal: Base-16 has 16 digits
• The first column is always the number of 1’s
• Each of the following columns is n times the previous column (n = Base-n)– Base 10: 10,000 1,000 100 10 1– Base 2: 16 8 4 2 1 – Base 16: 65,536 4,096 256 16 1
Rick Graziani [email protected] 11
Hexadecimal Digits
Hexadecimal: 16 digits
Dec Hex 0 1 2 3 4 5 6 7
Dec Hex 8 9 10 11 12 13 14 15
Rick Graziani [email protected] 12
Hexadecimal Digits
Hexadecimal: 16 digits
Dec Hex 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7
Dec Hex 8 8 9 910 A11 B12 C13 D14 E15 F
Rick Graziani [email protected] 13
0, 1, 2, 3, 4, 5, 6, 7 ,8, 9, A, B, C, D, E, F
Hexadecimal
Decimal 16’s 1’s
8
9
10
14
15
16
Rick Graziani [email protected] 14
0, 1, 2, 3, 4, 5, 6, 7 ,8, 9, A, B, C, D, E, F
Hexadecimal
Decimal 16’s 1’s
8 8
9 9
10 A
14 E
15 F
16 1 0
Rick Graziani [email protected] 15
0, 1, 2, 3, 4, 5, 6, 7 ,8, 9, A, B, C, D, E, F
Hexadecimal
Decimal 16’s 1’s
17
20
21
26
12
29
Rick Graziani [email protected] 16
0, 1, 2, 3, 4, 5, 6, 7 ,8, 9, A, B, C, D, E, F
Hexadecimal
Decimal 16’s 1’s
17 1 1
20 1 4
21 1 5
26 1 A
12 C
29 1 D
Rick Graziani [email protected] 17
0, 1, 2, 3, 4, 5, 6, 7 ,8, 9, A, B, C, D, E, F
Hexadecimal
Decimal 16’s 1’s
30
31
32
33
50
60
Rick Graziani [email protected] 18
0, 1, 2, 3, 4, 5, 6, 7 ,8, 9, A, B, C, D, E, F
Hexadecimal
Decimal 16’s 1’s
30 1 E
31 1 F
32 2 0
33 2 1
50 3 2
60 3 C
Rick Graziani [email protected] 19
Don’t forget why we are doing this!
<tr>
<td rowspan="2" bgcolor="#cccc99"> </td>
<td height="30" bgcolor="#999966"><div id="mainnav">
Hexadecimal Number
Rick Graziani [email protected] 20
Why Hexadecimal?
• Hexadecimal is perfect for matching 4 bits.
• Every combination of 4 bits can be matched with one hex number.
• 4 bits can be represented by 1 Hex value
• 8 bits can be represented by 2 Hex values
Rick Graziani [email protected] 21
Hexadecimal Digits 4 bits can be represented by 1 Hex value
Hexadecimal: 16 digits
Dec Hex Binary 84210 01 12 23 34 45 56 67 7
Dec Hex Binary 84218 89 910 A11 B12 C13 D14 E15 F
Rick Graziani [email protected] 22
Hexadecimal Digits 4 bits can be represented by 1 Hex value
Hexadecimal: 16 digits
Dec Hex Binary 84210 0 00001 1 00012 2 00103 3 00114 4 01005 5 01016 6 01107 7 0111
Dec Hex Binary 84218 8 10009 9 100110 A 101011 B 101112 C 110013 D 110114 E 111015 F 1111
Rick Graziani [email protected] 23
Hexadecimal Digits 4 bits can be represented by 1 Hex value
• Hexadecimal is perfect for matching 4 bits.
• Every combination of 4 bits can be matched with one hex number.
• 4 bits can be represented by 1 Hex value
• 8 bits can be represented by 2 Hex values
Dec. Hex. Binary Dec. Hex. Binary
0 0 0000 8 8 1000
1 1 0001 9 9 1001
2 2 0010 10 A 1010
3 3 0011 11 B 1011
4 4 0100 12 C 1100
5 5 0101 13 D 1101
6 6 0110 14 E 1110
7 7 0111 15 F 1111
Rick Graziani [email protected] 24
Converting Decimal, Hex, and Binary
Dec. Hex. Binary Dec. Hex. Binary
0 0 0000 8 8 1000
1 1 0001 9 9 1001
2 2 0010 10 A 1010
3 3 0011 11 B 1011
4 4 0100 12 C 1100
5 5 0101 13 D 1101
6 6 0110 14 E 1110
7 7 0111 15 F 1111
-----------------------------------------------------
Dec. Hex Binary Dec. Hex Binary Dec. Hex Binary
0 0010 10
F 1110 12
A 0000 5
C 0010 1000
Rick Graziani [email protected] 25
Converting Decimal, Hex, and Binary
Dec. Hex. Binary Dec. Hex. Binary
0 0 0000 8 8 1000
1 1 0001 9 9 1001
2 2 0010 10 A 1010
3 3 0011 11 B 1011
4 4 0100 12 C 1100
5 5 0101 13 D 1101
6 6 0110 14 E 1110
7 7 0111 15 F 1111
-----------------------------------------------------
Dec. Hex Binary Dec. Hex Binary Dec. Hex Binary
0 0 0000 2 2 0010 10 A 1010
15 F 1111 14 E 1110 12 C 1100
10 A 1010 0 0 0000 5 5 0101
12 C 1100 2 2 0010 8 8 1000
Rick Graziani [email protected] 26
What about 8 bits?
Dec. Hex. Binary Dec. Hex. Binary
0 0 0000 8 8 1000
1 1 0001 9 9 1001
2 2 0010 10 A 1010
3 3 0011 11 B 1011
4 4 0100 12 C 1100
5 5 0101 13 D 1101
6 6 0110 14 E 1110
7 7 0111 15 F 1111
-----------------------------------------------------
HEX BINARY
2 4 ?
Rick Graziani [email protected] 27
What about 8 bits?
Dec. Hex. Binary Dec. Hex. Binary
0 0 0000 8 8 1000
1 1 0001 9 9 1001
2 2 0010 10 A 1010
3 3 0011 11 B 1011
4 4 0100 12 C 1100
5 5 0101 13 D 1101
6 6 0110 14 E 1110
7 7 0111 15 F 1111
-----------------------------------------------------
HEX BINARY
2 4 0010 0100
Rick Graziani [email protected] 28
What about 8 bits?
Dec. Hex. Binary Dec. Hex. Binary
0 0 0000 8 8 1000
1 1 0001 9 9 1001
2 2 0010 10 A 1010
3 3 0011 11 B 1011
4 4 0100 12 C 1100
5 5 0101 13 D 1101
6 6 0110 14 E 1110
7 7 0111 15 F 1111
-----------------------------------------------------
HEX BINARY
2 4 0010 0100
Rick Graziani [email protected] 29
Using Hex for 8 bits
Dec. Hex. Binary Dec. Hex. Binary
0 0 0000 8 8 1000
1 1 0001 9 9 1001
2 2 0010 10 A 1010
3 3 0011 11 B 1011
4 4 0100 12 C 1100
5 5 0101 13 D 1101
6 6 0110 14 E 1110
7 7 0111 15 F 1111
-----------------------------------------------------
Hex Binary Hex Binary Hex Binary
12 0001 0010 3C 99
AB 1A 00
02 B4 7D
0111 0111 1000 1111 1111 1111
0000 0010 1100 1001 0101 1100
Rick Graziani [email protected] 30
Using Hex for 8 bits
Dec. Hex. Binary Dec. Hex. Binary
0 0 0000 8 8 1000
1 1 0001 9 9 1001
2 2 0010 10 A 1010
3 3 0011 11 B 1011
4 4 0100 12 C 1100
5 5 0101 13 D 1101
6 6 0110 14 E 1110
7 7 0111 15 F 1111
-----------------------------------------------------
Hex Binary Hex Binary Hex Binary
12 0001 0010 3C 0011 1100 99 1001 1001
AB 1010 1011 1A 0001 1010 00 0000 0000
02 0000 0010 B4 1011 0100 7D 0111 1101
77 0111 0111 8F 1000 1111 FF 1111 1111
02 0000 0010 C9 1100 1001 5C 0101 1100
Rick Graziani [email protected] 31
So why is Rick torturing us?
<tr>
<td rowspan="2" bgcolor="#cccc99"> </td>
<td height="30" bgcolor="#999966"><div id="mainnav">
Hexadecimal Number
Rick Graziani [email protected] 32
How much RED GREEN BLUE ?
<td rowspan="2" bgcolor="#cccc99"> </td>
Red Green Blue
cc cc 99
<td height="30"bgcolor="#999966"><divid…>
Red Green Blue
99 99 66
Rick Graziani [email protected] 33
Hexadecimal # RED GREEN BLUE
<td rowspan="2" bgcolor="#cccc99"> </td>
Red Green Blue
cc cc 99
Convert to Binary
Red Green Blue
Hex cc cc 99
Bin 1100 1100 1100 1100 1001 1001
24 bits represent a single color
Rick Graziani [email protected] 34
Red Green Blue
Hex cc cc 99
Bin 1100 1100 1100 1100 1001 1001
24 bits represent a single color
Rick Graziani [email protected] 35
Red Green Blue
Hex 00->FF 00->FF 00->FF
Bin 0000 0000 0000 0000 0000 0000
thru thru thru
1111 1111 1111 1111 1111 1111
Dec 0 -> 255 0 -> 255 0 -> 255
0
255
0
255
0
255
? ? ?
Rick Graziani [email protected] 37
Red Green Blue
Hex cc cc 99
Bin 1100 1100 1100 1100 1001 1001
Hexadecimal
Decimal 16’s 1’s
c c
or
12 12
(12x16) (12x1)
204 = 192 + 12
Rick Graziani [email protected] 38
Red Green Blue
Hex cc cc 99
Bin 1100 1100 1100 1100 1001 1001
Hexadecimal
Decimal 16’s 1’s
c c
or
12 12
(12x16) (12x1)
204 = 192 + 12
Rick Graziani [email protected] 39
Red Green Blue
Hex cc cc 99
Bin 1100 1100 1100 1100 1001 1001
Hexadecimal
Decimal 16’s 1’s
9 9
or
9 9
(9x16) (9x1)
153 = 144 + 9
Rick Graziani [email protected] 40
Red Green Blue
Hex cc cc 99
Bin 1100 1100 1100 1100 1001 1001
Dec 204 204 153
Rick Graziani [email protected] 43
www.december.com
• For those of you interested in Web Design and Digital Media, you will work with colors based on hexadecimal code, hue, other codes, or shades.
• http://www.december.com/html/spec/color.html
Rick Graziani [email protected] 44
Chili Powder
C 7 3 F 1 7
16’s 1’s 16’s 1’s 16’s 1’s
12 7 3 15 1 7
12x16 7x1 3x16 15x1 1x16 7x1
192 + 7 48 + 15 16 + 7
199 63 23
#C73F17
Rick Graziani [email protected] 47
Try these
E E 8 2 6 2
1110 1110 1000 0010 0110 0010
238 130 98
F F 8 C 6 9
1111 1111 1000 1100 0110 1001
255 140 105
A 7 8 D 8 4
1010 0111 1000 1101 1000 0100
167 141 132
Hexadecimal Number System
CS 1
Rick Graziani
Cabrillo College
Spring 2007
