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

The colors 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

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 AA
One quarter 40 Three quarters C0
One third 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 on full while commanding the green and blue lights to turn off. The command "8055FF" would turn the red lights on half way, the green lights on one third, and the blue lights on full.

II. Experience the primary colors

Click here to start a viewing loop in the following sequence: white, grey, black, red, green, blue... Use a magnifying glass to examine the screen the screen closely.

  1. What color dots is the monitor using to make white?
    _________________________________________________________
  2. What color dots is the monitor using to make grey?
    _________________________________________________________
  3. What color dots is the monitor using to make black?
    _________________________________________________________
  4. What color dots is the monitor using to make yellow?
    _________________________________________________________

III. 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">
</body>
</html>

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, the letters html, all enclosed in a quote.  If your name is Emmalyn, save the file as "emmalyn.html".  Be sure to include the quotes! Do not close your document.

Use the My Documents item on the Start: Programs menu to find your document.   Double click your document, it should open in a browser.

What color came up in the browser?

IV.  What color is this?

Return the notepad.  Change the line <body bgcolor="#FF0000"> in the following ways, each time returning to the browser and clicking on "Reload" 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? __________________

V. 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? ___________

SC 130 Home page
Lee Ling's Courses Home Page
Navigate graphicTo COM-FSM Home Page