What are the primary colors of light? What are the secondary colors of light? How is color produced by monitors, cell phone screens, lap top computer screens, and televisions? What is your favorite color and why?
In this three part laboratory we will explore the colors of light and systems of organizing colors. In the first part of this laboratory we will look at how televisions and monitors produce the colors of the rainbow. In the second part we will learn about hue, saturation, and luminosity. Finally we will learn some color keywords specific to the world of computers and the world wide web.
Rainbows are a blend of colors that run from purple to red. Rainbows are caused by refraction and internal reflection in a raindrop. Although the colors blur into each other, rainbows appear to have six distinguishable colors in English: red, orange, yellow, green, blue, and violet. Newton's opinion was that there were seven colors: red, orange, yellow, green, blue, indigo, and violet.
Televisions and computer monitors can produce all the colors of the rainbow using only three colors. All colors can be produced with only three colors of light: red, green, and blue (RGB). Red, green, and blue are called the primary colors of light. In this laboratory we will use HTML code to control the colors of light on a computer monitor.
Computer screens are actually composed of millions of tiny red, blue, and green dots or dashes called phosphors. The brightness of each dot or dash can controlled. These three colors can create all the other colors on the screen!
The following image shows how, as the size of the red-green-blue dots shrinks, the color seen by the human eye shifts from individual red-green-blue dots to a uniform grey color. Increasing the brightness of the dots would shift the color to a lighter grey and eventually white.
Other colors are generated by changing the brightness of the different phosphors. Removing blue, for example, generates a yellowish color.
The orange lettering in the actual screen image below is generated by red and green phosphors. On the screen shown the phosphors are actually vertical "dashes" as seen in the subimages. The close up images are from the top of the capital "O" in the word "darkorange."
The brightness of each dot or dash is set by a number. Zero is all the way off. Sixteen is all the way on, full on. Computers, however, do not count in base ten. Our computers work in base 16. Base 16 is called hexadecimal. The problem is that base ten has no single digit "number" symbols for the numbers from 10 to 15. So in hexadecimal the letter A is used for "10", B for "11", C for "12", D for "13", E for "14", and F for "15". The number after F is "one sixteen and zero ones" which is written "10".
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 |
To keep from getting confused as to whether a number is in base ten or base sixteen, subscripts are used. 10(10) is ten in base ten. 10(16) is ten in base sixteen. Thus 16(10) = 10(16)
Note that half of 10(16) is 8, not 5. Thus in base 16 one could write: 10(16)/2 = 8. This might 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 can be controlled by a hexadecimal number between 0 (off) and F (full on), with 8 being half way on.
| Hex | Phosphor dot status |
|---|---|
| 0 | off |
| 4 | quarter of full brightness |
| 5 | about one third of full brightness |
| 8 | half of full brightness |
| A | about two-thirds of full brightness |
| C | three-quarters of full brightness |
| F | full brightness for that color |
The screen has millions of sets of tiny picture elements called pixels. Each pixel is comprised of three phosphors, one of each of the primary colors of light: red, green, and blue. Commands to set a particular pixel color issued as a three digit base 16 (hexadecimal) number. The first digit indicates how bright to make the red phosphors, the second digit indicates how bright to make the green phosphors, and the third digit indicates how bright to make the blue phosphors. Thus the command "F00" would turn the red lights (phosphors) on full while commanding the green and blue lights (phosphors) to turn off. The command "85F" 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 text editor from the applications:accessories menu.
The text editor is also called the Gnome Editor or gedit for short. Once the text editor is open, use the View menu: Highlight mode: Markup: HTML to set the editor for writing HTML.
In gEdit you will have to type the code shown exactly as it is typed in the example below.
<html>
<head>
<style>
body {background:#f00}
</style>
</head>
<body>
<p>Text</p>
</body>
</html>
The result should look like:
The "#" in front of the "f00" tells the computer that a hexadecimal number is being used. Note that the f can be lowercase f or uppercase F. #f00 is "red full on, green off, blue off. the "00" are the digits "zero zero" not the capital letter "O"
Computers are very literal: the code must be identical to the code above. Any error, even a single letter wrong, will cause your web page to fail. After typing the code exactly as seen above, save your file to the desktop using the following steps. Choose "Save as..." from the file menu.
Type the file name into the first blank in the dialog box. Call the file "color73.html" In the second blank, click on the arrows to the right and change the "Save in folder" to Desktop.
To open your web page, first locate the file on the Desktop. Minimize the windows on your screen. The minimize button 
is in the upper right hand corner of each open window.
The Desktop looks something like the image below on the left. Hunt around for the color73.html file. The file should look something like the image on the right, but with the number 73 after the word color.
Double-click with the left mouse button on the file to open the file. If the code is correct, the FireFox web browser should open automatically after a minute.
Find gedit on a menu bar and click on it to restore it. If you cannot find it, let me know so I can help you with this step. Once open change the color to #00f and then choose File:Save (NOT Save as...!).
After doing this, return to the FireFox web browser and click on the refresh button 
to update the web page with the #00f code. 00f is red off, green off, blue full on.
Change the background color to the following hexadecimal numbers to see what color results.
RGB is how computers display colors, but try to imagine what combination produces orange, pink, baby blue, sea blue, or brown. Our brains do not think well in RGB. The next system is a system that uses a color wheel to organize the colors in rainbow order, controlling the amount of color and brightness with two percentages.
The primary colors of light are red, green, and blue.
The secondary colors of light are yellow, cyan, and magenta.
| Hue name | Hue angle |
|---|---|
| red | 9 |
| orangered | 17 |
| orangered | 24 |
| orangered | 24 |
| darkorange | 26 |
| orange | 30 |
| orange | 36 |
| orange | 43 |
| goldenrod | 48 |
| gold | 52 |
| yellow | 64 |
| greenyellow | 77 |
| chartreuse | 88 |
| lime | 111 |
| springgreen | 137 |
| aquamarine | 165 |
| cyan | 184 |
| deepskyblue | 200 |
| royalblue | 217 |
| blue | 230 |
| blue | 236 |
| blue | 239 |
| slateblue | 250 |
| indigo | 270 |
| purple | 303 |
[As of late 2007 only Firefox 1.5+ supported the CSS2 hsl color specification necessary to see these colors] Another way to describe color is by using a color wheel or color circle. The word hue is used for the word color when working with a color wheel. On a color wheel the colors are arranged in a circle in the same order that the colors appear in a rainbow. The primary colors of light, red, green, and blue, are spaced evenly around the color wheel. The hues are specified by their angle around the 360° hue wheel.
The hues are arranged in rainbow order. Red, the first color in the rainbow, is placed at the top and is assigned a color angle (or hue angle) of 0°. Once around a circle is 360°. Green is placed one third of the way around the circle at 120°. Blue is placed two-thirds of the way around the circle at 240°.
On the right are the hue angles for colors taken from an actual image of a rainbow. The color names are approximate X11 color names from part III of the lab.
Saturation is how much of a hue is displayed. Zero percent saturation is no color. Zero saturation results in black, grays, or white. The maximum saturation is 100%. At a saturation of 50% the color is tinged with a grayishness but is distinctly of a hue.
Luminosity is how bright, how luminous, the color should be. Zero percent results in black, while 100% makes the color so bright that it appears white. 50% yields the "purest" colors to the human eye, above 50% and the brightness starts to wash out the color.
The color command is hsl for hue, saturation, and luminosity. The command structure is:
hsl(0 to 360,0% to 100%,0% to 100%)
The first number is the hue angle on the color wheel, the second number is the saturation in percent, and the third number is the luminosity in percent. Try the following code, do not forget the percentage signs. Do NOT put any spaces in the "hsl(0,100%,50%)" color command.
<html>
<head>
<style>
body {background:hsl(0,100%,50%)}
</style>
</head>
<body>
<p>Text</p>
</body>
</html>
The primary colors of light are spaced evenly one-third of the way around the color circle with red at 0°, green at 120°, and blue at 240°. Half way in-between are the secondary colors of light yellow at 60°, cyan at 180°, and magenta at 270°. You might recall that yellow is also #ff0: full on red, full on green. What primary colors are turned on full for cyan and magenta?
No culture uses numbers for colors. People use color words such as red, yellow, green, cyan, blue, and magenta. In the world of web pages there are X11 color names. The list at the end of the lab is the X11 color names in hue angle order. The hue angle is given for reference. Note that the color command in the style section controls the color of the text.
<html>
<head>
<style>
body {background:linen;color:saddlebrown}
</style>
</head>
<body>
<p>Text</p>
</body>
</html>
X11 color names are popular because they are easy to remember. Critics note that the color names are in English and that the naming system is not logical nor consistent.
Web pages often include headings, images and links. Although no web page author would do so, the style commands below include all three computer color systems.
<html>
<head>
<style>
body {background:#fef;color:hsl(240,100%,50%)}
h1 {color:indigo}
</style>
</head>
<body>
<h1>heading level one</h1>
<p>Paragraph text</p>
<p>
<img src="http://www.comfsm.fm/~dleeling/marlin.jpg">
</p>
<p>
<a href="http://www.comfsm.fm/~dleeling/marlin.jpg">
Link to image</a></p>
</body>
</html>
angle x11color Black DimGray Gray DarkGray Silver LightGrey Gainsboro WhiteSmoke White 0 RosyBrown 0 IndianRed 0 Brown 0 FireBrick 0 LightCoral 0 Maroon 0 DarkRed 0 Red 0 Snow 6 Salmon 6 MistyRose 9 Tomato 15 DarkSalmon 16 OrangeRed 16 Coral 17 LightSalmon 19 Sienna 25 Seashell 25 Chocolate 25 SaddleBrown 28 SandyBrown 28 PeachPuff 30 Peru 30 Linen 33 DarkOrange 33 Bisque 34 BurlyWood 34 Tan 34 AntiqueWhite 36 NavajoWhite 36 BlanchedAlmond 37 PapayaWhip 39 Orange 38 Moccasin 39 Wheat 39 OldLace 40 FloralWhite 43 Goldenrod 43 DarkGoldenrod 48 Cornsilk 51 Gold 55 PaleGoldenrod 54 Khaki 54 LemonChiffon 56 DarkKhaki 60 Beige 60 LightGoldenrodYellow 60 Olive 60 Yellow 60 LightYellow 60 Ivory 80 OliveDrab 80 YellowGreen 82 DarkOliveGreen 84 GreenYellow 90 LawnGreen 90 Chartreuse 120 DarkSeaGreen 120 ForestGreen 120 LimeGreen 120 LightGreen 120 PaleGreen 120 DarkGreen 120 Green 120 Lime 120 Honeydew 147 MediumSeaGreen 146 SeaGreen 150 SpringGreen 150 MintCream 157 MediumSpringGreen 160 MediumAquamarine 160 Aquamarine 174 Turquoise 177 LightSeaGreen 178 MediumTurquoise 180 DarkSlateGray 180 PaleTurquoise 180 Teal 180 DarkCyan 181 DarkTurquoise 180 Aqua 180 Cyan 180 LightCyan 180 Azure 182 CadetBlue 187 PowderBlue 195 LightBlue 195 DeepSkyBlue 197 SkyBlue 203 LightSkyBlue 207 SteelBlue 208 AliceBlue 210 DodgerBlue 210 SlateGray 210 LightSlateGray 214 LightSteelBlue 219 CornflowerBlue 225 RoyalBlue 240 MidnightBlue 240 Lavender 240 Navy 240 DarkBlue 240 MediumBlue 240 Blue 240 GhostWhite 248 DarkSlateBlue 248 SlateBlue 249 MediumSlateBlue 260 MediumPurple 271 BlueViolet 275 Indigo 280 DarkOrchid 282 DarkViolet 288 MediumOrchid 300 Thistle 300 Plum 300 Violet 300 Purple 300 DarkMagenta 300 Magenta 300 Fuchsia 302 Orchid 322 MediumVioletRed 328 DeepPink 330 HotPink 340 PaleVioletRed 340 LavenderBlush 348 Crimson 350 Pink 351 LightPink