- To explore the colors of light
- To work with hexadecimal numbers
- To explore a non-base ten number system
- To learn to think about numbers and their "face value" in new ways
- To learn basic HTML tags related to color

In this laboratory students will explore the use of red, green, and blue light to generate colors. Students will also become acquainted with the hexadecimal number system. The environment in which these will be explored will be computer based HTML.

The colors of a computer monitor can be turned on and off, with the brightness controlled by a number between **0** (off) and **255** (full on). Computers, however, do not usually count in base ten. Our computers work in base 16. Base 16 is called **hexadecimal**. The following table shows the base ten number and the corresponding hexadecimal numbers.

Base 10 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|

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

Note that half of 10_{16} is 8, not 5. Thus in base 16 one could write: 10/2 = 8. This should look strange, but in base 16 this is true. In base 16 the "1" means "one sixteen" instead of "one ten."

The colors on a computer screen are controlled by a **two digit** hexadecimal number between **00** (off) and **FF** (full on):

0001 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F |
10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F |
20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F |
30 31 32 33 34 35 36 37 38 39 3A 3B 3C 3D 3E 3F |
4041 42 43 44 45 46 47 48 49 4A 4B 4C 4D 4E 4F |
50 51 52 53 54 5556 57 58 59 5A 5B 5C 5D 5E 5F |
60 61 62 63 64 65 66 67 68 69 6A 6B 6C 6D 6E 6F |
70 71 72 73 74 75 76 77 78 79 7A 7B 7C 7D 7E 7F |
8081 82 83 84 85 86 87 88 89 8A 8B 8C 8D 8E 8F |
90 91 92 93 94 95 96 97 98 99 9A 9B 9C 9D 9E 9F |
A0 A1 A2 A3 A4 A5 A6 A7 A8 A9 AAAB AC AD AE AF |
B0 B1 B2 B3 B4 B5 B6 B7 B8 B9 BA BB BC BD BE BF |
C0C1 C2 C3 C4 C5 C6 C7 C8 C9 CA CB CC CD CE CF |
D0 D1 D2 D3 D4 D5 D6 D7 D8 D9 DA DB DC DD DE DF |
E0 E1 E2 E3 E4 E5 E6 E7 E8 E9 EA EB EC ED EE EF |
F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 FA FB FC FD FE FF |

FF means "F sixteens and F ones." In base ten F would 15, so FF is "fifteen sixteens and fifteen". Use that formula to determine what FF is in base ten: __________________

100 in base sixteen means "one sixteen-squared plus zero sixteens plus zero. What is 100 in base sixteen equal to in base ten? __________________________

The following is a table of some of the more useful values, although any value from 00 to FF could be used:

Brightness | Value | Brightness | Value |
---|---|---|---|

Off | 00 | Two thirds (rounded off) | AA |

One quarter | 40 | Three quarters | C0 |

One third (rounded off) | 55 | Full on | FF |

One half | 80 |

The colors are arranged in the order red, green, blue. Three colors with two digits each is a six digit number: RRGGBB. Thus the command "FF0000" would turn the red lights (phosphors) on full while commanding the green and blue lights (phosphors) to turn off. The command "8055FF" would turn the red lights (phosphors) on half way, the green lights (phosphors) on one third, and the blue lights on full.

Getting the computer to actually process the color number command will require enclosing the command in a simple program. We will use HTML to work with our colors. To program HTML open up the note pad on the computer.

In note pad you will have to type the following exactly as it is typed below:

<html> <body bgcolor="#FF0000"> <p>My name is Dancingalongaleen</p> </body> </html>

The command **bgcolor** tells the computer what "**b**ack**g**round **color**" to use. The color is specified by the six-digit hexadecimal number that follows. Be sure to include the open and close quotes. Note the # sign in front of the hexadecimal number: this tells the computer that it is about to get a hexadecimal number.

Save the file in the **My Documents** folder using your lower-case first name followed by a period, then the letters html. If your name is Emmalyn, save the file as "emmalyn.html". Do not put any spaces in the file name. Do not close your document.

Use the Internet Explorer browser to open your document.

What color came up in the browser?

Return to the notepad. Change the line <body bgcolor="#FF0000"> in the following ways, being sure to save the notepad file again after each change. Then return to the browser and click on the "Refresh" button to view the changes.

- <body bgcolor="#00FF00">

What color is this? ______

- <body bgcolor="#0000FF">

What color is this? ______

- <body bgcolor="#FFFF00">

What color is this? ________

What colors are turned on full? __________________

- <body bgcolor="#00FFFF">

What color is this? ________

What colors are turned on full? __________________

- <body bgcolor="#FF00FF">

What color is this? ________

What colors are turned on full? __________________

- <body bgcolor="#FFFFFF">

What color is this? ________

What colors are turned on full? __________________

- <body bgcolor="#000000">

What color is this? ________

What colors are turned on full? __________________

- What RGB hexadecimal number makes grey? _______________
- What RGB hexadecimal number makes orange? _______________
- What RGB hexadecimal number makes brown? _______________

In the RGB system...

- Red and Green make? ___________
- Red and Blue make? ___________
- Green and Blue make? ___________
- Red, and Green, and Blue make? ___________
- How do you make black? ___________
- We learned above that to turn the lights (phosphors) on half way we needed a value of 80 base sixteen (hexadecimal). In base sixteen 80 is half of a 100. We also learned that 40 is one quarter of 100 in hexadecimal. What is one eighth of 100 in hexadecimal? ______
- What is one sixteenth of 100 in hexadecimal? ______
- We can write "100 base sixteen" as 100
_{16}. What is 100_{16}divided by 2 equal to? _____________ - What is 100
_{16}multiplied by three-quarters equal to? _____________ - Calculate 100
_{16}÷ 8 * 3 = _________ - Calculate 100
_{16}* 3 ÷ 8 = _________ - Real toughie: What is one fifth of 100 base sixteen (rounded off to a whole number if necessary)? _______________

The following change will control both background and text color. Note the command word has changed for the background and there are new lines with head and style tags.

<html> <head> <style type="text/css"> body {background:#0000FF;color:#FFFFFF} </style> </head> <body> <p>My name is Dancingalongaleen</p> </body> </html>