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 1016 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):
| 00 01 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 |
40 41 42 43 44 45 46 47 48 49 4A 4B 4C 4D 4E 4F |
50 51 52 53 54 55 56 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 |
80 81 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 AA AB AC AD AE AF |
B0 B1 B2 B3 B4 B5 B6 B7 B8 B9 BA BB BC BD BE BF |
C0 C1 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 "background 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.
In the RGB system...
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>