Post on 13-Jan-2016
description
transcript
Hexadecimal Number System
CS 1
Rick Graziani
Cabrillo College
Spring 2007
Rick Graziani graziani@cabrillo.edu 2
Rick Graziani graziani@cabrillo.edu 3
Rick Graziani graziani@cabrillo.edu 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 graziani@cabrillo.edu 5
Rick Graziani graziani@cabrillo.edu 6
Dreamweaver
Rick Graziani graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 9
Hexadecimal Numbers
• What are they?
• Why do these people use them?
–web designers
–digital medial creators
–computer scientists
–networking professionals
Rick Graziani graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 34
Red Green Blue
Hex cc cc 99
Bin 1100 1100 1100 1100 1001 1001
24 bits represent a single color
Rick Graziani graziani@cabrillo.edu 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 graziani@cabrillo.edu 36
0
255
?
How Much? 0 to 255
0
255
?
0
255
?
Rick Graziani graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 40
Red Green Blue
Hex cc cc 99
Bin 1100 1100 1100 1100 1001 1001
Dec 204 204 153
Rick Graziani graziani@cabrillo.edu 41
0
255
204
0
255
0
255
204
153
Rick Graziani graziani@cabrillo.edu 42
<td rowspan="2" bgcolor="#cccc99"> </td>
Rick Graziani graziani@cabrillo.edu 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 graziani@cabrillo.edu 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 graziani@cabrillo.edu 45
Chili Powder
C7 3F 17
199 63 23
#C73F17
Rick Graziani graziani@cabrillo.edu 46
Try these
E E 8 2 6 2
F F 8 C 6 9
A 7 8 D 8 4
Rick Graziani graziani@cabrillo.edu 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
Rick Graziani graziani@cabrillo.edu 48
Color Codes
Hexadecimal Number System
CS 1
Rick Graziani
Cabrillo College
Spring 2007