112 Color and the colors of light

Questions

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.

  1. RGB: Red Green Blue color specification
  2. HSL: Hue Saturation Luminosity color specification
  3. X11: Using words to specify colors

I. Red Green Blue: The RGB lights that make color

rainbow (7K)

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.

Turning the red, green, and blue on and off

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.

rgb16 (13K)

Other colors are generated by changing the brightness of the different phosphors. Removing blue, for example, generates a yellowish color.

rgb_brown16 (13K)

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."

darkorange (80K)

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 012345678 910111213141516
Base 16 012345678 9ABCDEF10

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.

HexPhosphor dot status
0off
4quarter of full brightness
5about one third of full brightness
8half of full brightness
Aabout two-thirds of full brightness
Cthree-quarters of full brightness
Ffull 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.

HyperText MarkUp Language (HTML)

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.

Fedora text editor menu screenshot Ubuntu 9.10 applications menu screenshot gEdit text editor

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.

te02markup (27K)

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:

Gnome gedit in action

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.

te04save_as (23K) te05 (18K)

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.

te06 (17K) te07save_in (18K)

To open your web page, first locate the file on the Desktop. Minimize the windows on your screen. The minimize button te07window_min (1K) is in the upper right hand corner of each open window.

te07window_controls (7K)

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.

te08desktop (46K) color73.html

te09

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...!).
te10 (37K)

After doing this, return to the FireFox web browser and click on the refresh button te09firefox_refresh (1K) to update the web page with the #00f code. 00f is red off, green off, blue full on.

te11

Explorations

Change the background color to the following hexadecimal numbers to see what color results.

  1. ______________________ What color is #0f0 ?
  2. ______________________ What color is #f0f ?
  3. ______________________ What color is #0ff ?
  4. ______________________ What color is #000 ?
  5. ______________________ What color is #555 ?
  6. What RGB hexadecimal (base 16) number makes yellow? __________________________
  7. Can white be produced from red, green, and blue? __________________________
  8. What RGB hexadecimal number makes white? __________________________

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.

II. Hue, Saturation, Luminosity

Rainbow
Hue nameHue angle
red9
orangered17
orangered24
orangered24
darkorange26
orange30
orange36
orange43
goldenrod48
gold52
yellow64
greenyellow77
chartreuse88
lime111
springgreen137
aquamarine165
cyan184
deepskyblue200
royalblue217
blue230
blue236
blue239
slateblue250
indigo270
purple303

hue angle circle

[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>
  1. ______________________ What color is hsl(0,100%,50%)?
  2. ______________________ What color is hsl(30,100%,50%)?
  3. ______________________ What color is hsl(60,100%,50%)?
  4. ______________________ What color is hsl(120,100%,50%)?
  5. ______________________ What color is hsl(180,100%,50%)?
  6. ______________________ What color is hsl(240,100%,50%)?
  7. ______________________ What color is hsl(300,100%,50%)?
  8. ______________________ What color is hsl(360,100%,50%)?
  9. ______________________ What color is hsl(20,50%,40%)?

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?

III. X11 Color names

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.

Extension

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