Red Green Blue: The Additive Colors of Light

Purposes

Introduction

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.

I. Turning the red, green, and blue on and off

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.

II. 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 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?

IV. What color is this?

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.

  1. <body bgcolor="#00FF00">
    What color is this? ______
  2. <body bgcolor="#0000FF">
    What color is this? ______
  3. <body bgcolor="#FFFF00">
    What color is this? ________
    What colors are turned on full? __________________
  4. <body bgcolor="#00FFFF">
    What color is this? ________
    What colors are turned on full? __________________
  5. <body bgcolor="#FF00FF">
    What color is this? ________
    What colors are turned on full? __________________
  6. <body bgcolor="#FFFFFF">
    What color is this? ________
    What colors are turned on full? __________________
  7. <body bgcolor="#000000">
    What color is this? ________
    What colors are turned on full? __________________

IV. What makes this color?

  1. What RGB hexadecimal number makes grey? _______________
  2. What RGB hexadecimal number makes orange? _______________
  3. What RGB hexadecimal number makes brown? _______________

Homework

In the RGB system...

  1. Red and Green make? ___________
  2. Red and Blue make? ___________
  3. Green and Blue make? ___________
  4. Red, and Green, and Blue make? ___________
  5. How do you make black? ___________
  6. 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? ______
  7. What is one sixteenth of 100 in hexadecimal? ______
  8. We can write "100 base sixteen" as 10016. What is 10016 divided by 2 equal to? _____________
  9. What is 10016 multiplied by three-quarters equal to? _____________
  10. Calculate 10016 8 * 3 = _________
  11. Calculate 10016 * 3 8 = _________
  12. Real toughie: What is one fifth of 100 base sixteen (rounded off to a whole number if necessary)? _______________

For CIS majors inclined to explore further...

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>

PreAlgebraLee Ling's CoursesCOM-FSM Home Page