Hexadecimal Number System CS 1 Rick Graziani Cabrillo College Spring 2007

Rick Graziani graziani@cabrillo.edu

Rick Graziani graziani@cabrillo.edu

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

Rick Graziani graziani@cabrillo.edu

Dreamweaver Rick Graziani graziani@cabrillo.edu

<tr> <td rowspan="2" bgcolor="#cccc99"> </td> <td height="30" bgcolor="#999966"><div id="mainnav"> Hexadecimal Number With web applications like HTML (Hypertext Markup Language), colors are sometime described using their RGB color specification in hexadecimal. Rick Graziani graziani@cabrillo.edu

Hexadecimal RED GREEN BLUE <td rowspan="2" bgcolor="#cccc99"> </td> Red Green Blue cc cc 99 <td height="30" bgcolor="#999966"><div id="mainnav"> 99 99 66 # means hexadecimal in web applications Rick Graziani graziani@cabrillo.edu

Why do these people use them? web designers digital medial creators 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

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

Hexadecimal Digits Dec Hex 1 2 3 4 5 6 7 Dec Hex 8 9 10 11 12 13 14 15 1 2 3 4 5 6 7 Dec Hex 8 9 10 11 12 13 14 15 Rick Graziani graziani@cabrillo.edu

Hexadecimal Digits Dec Hex 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 Dec Hex 8 8 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 Dec Hex 8 8 9 9 10 A 11 B 12 C 13 D 14 E 15 F Rick Graziani graziani@cabrillo.edu

Hexadecimal Decimal 16’s 1’s 8 9 10 14 15 16 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

Hexadecimal Decimal 16’s 1’s 8 8 9 9 10 A 14 E 15 F 16 1 0 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

Hexadecimal Decimal 16’s 1’s 17 20 21 26 12 29 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

Hexadecimal Decimal 16’s 1’s 17 1 1 20 1 4 21 1 5 26 1 A 12 C 29 1 D 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

Hexadecimal Decimal 16’s 1’s 30 31 32 33 50 60 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

Hexadecimal Decimal 16’s 1’s 30 1 E 31 1 F 32 2 0 33 2 1 50 3 2 60 3 C 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

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

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

Hexadecimal Digits 4 bits can be represented by 1 Hex value Dec Hex Binary 8421 8 8 9 9 10 A 11 B 12 C 13 D 14 E 15 F Hexadecimal: 16 digits Dec Hex Binary 8421 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 Rick Graziani graziani@cabrillo.edu

Hexadecimal Digits 4 bits can be represented by 1 Hex value Dec Hex Binary 8421 8 8 1000 9 9 1001 10 A 1010 11 B 1011 12 C 1100 13 D 1101 14 E 1110 15 F 1111 Hexadecimal: 16 digits Dec Hex Binary 8421 0 0 0000 1 1 0001 2 2 0010 3 3 0011 4 4 0100 5 5 0101 6 6 0110 7 7 0111 Rick Graziani graziani@cabrillo.edu

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

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

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

What about 8 bits? HEX BINARY 2 4 ? 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

What about 8 bits? HEX BINARY 2 4 0010 0100 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

What about 8 bits? HEX BINARY 2 4 0010 0100 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

Using Hex for 8 bits Hex Binary Hex Binary Hex 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 ----------------------------------------------------- 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

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

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

How much RED GREEN BLUE ? <td rowspan="2" bgcolor="#cccc99"> </td> Red Green Blue cc cc 99 <td height="30"bgcolor="#999966"><divid…> 99 99 66 Rick Graziani graziani@cabrillo.edu

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

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

? ? ? 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 255 255 255 ? ? ? Rick Graziani graziani@cabrillo.edu

255 ? 255 ? 255 ? How Much? 0 to 255 Rick Graziani graziani@cabrillo.edu

Hexadecimal Decimal 16’s 1’s c c or 12 12 (12x16) (12x1) 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

Hexadecimal Decimal 16’s 1’s c c or 12 12 (12x16) (12x1) 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

Hexadecimal Decimal 16’s 1’s 9 9 or 9 9 (9x16) (9x1) 153 = 144 + 9 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

Red Green Blue Hex cc cc 99 Bin 1100 1100 1100 1100 1001 1001 Dec 204 204 153 Rick Graziani graziani@cabrillo.edu

255 204 255 204 255 153 Rick Graziani graziani@cabrillo.edu

<td rowspan="2" bgcolor="#cccc99"> </td> Rick Graziani graziani@cabrillo.edu

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

#C73F17 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 Rick Graziani graziani@cabrillo.edu

Chili Powder #C73F17 C7 3F 17 199 63 23 Rick Graziani graziani@cabrillo.edu

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

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

Color Codes Rick Graziani graziani@cabrillo.edu

Hexadecimal Number System CS 1 Rick Graziani Cabrillo College Spring 2007