Introduction to Computer Graphics

Color Visualization

This application enables you to experiment with the RGB (Red, Green, Blue) color system.

Computers store colors as a combination of Red, Green, and Blue values that describe the amount of light used to display that color. Each number is a value between 0 (no light for that color) and 255 (full light for that color). Colors are usually represented as a triple of numbers, in the form (R, G, B). You can enter numbers in the Red/Green/Blue text boxes above to see what color is produced.

Combining light colors produces different results than mixing paint colors. For example, mixing red paint and green paint would produce a brown color, but mixing full red light and full green light produces a yellow color, as shown in the image below. In general, mixing different lights produces brighter colors; this is called an "additive color" system.

To see what happens when you combine red light with green light, enter the values (255, 255, 0) in the boxes for (Red, Green, Blue) above. The result on your screen should be similar to the image below.

By changing the values for Red, Green, and Blue, you can customize the color. For example (try these out!), entering (128, 0, 0) creates a dark red, entering (255, 128, 0) creates orange, and entering (150, 200, 255) creates a light blue ("sky blue").

The set of colors that can be created is often visualized as the RGB "color cube": a three-dimensional graph, where each point in 3D space corresponds to a color. The axes each correspond to one of the primary light colors (Red, Green, Blue), and the farther you travel along a given direction, the more of the corresponding light color that will be used to create the final color. The origin (0,0,0) corresponds to the color black, while the point (255,255,255) corresponds to the color white.

The Color Creation Challenge

Experiment by entering different numbers into the Red, Green, and Blue boxes above. How many of the following colors can you approximate? What other interesting colors can you design?

Red	Orange	Yellow	Green	Blue	Purple	Brown	Black
Pink	Peach	Lemon	Lime	Cyan	Magenta	White	Gray
Crimson	Salmon	Gold	Olive	Slate Blue	Indigo	Light Gray	Dark Gray

Image Manipulation

An image is made up of small solid colored squares called pixels (picture elements). You can see these more clearly when you zoom in on an image.

The color of each pixel is stored in an image file using RGB values. When a program displays an image, it reads the RGB data for each pixel, and the computer screen generates the lights in the corresponding amounts at that position. Many programs can also apply filters to an image, which alters the the original color of each pixel in some way so that it appears different on the screen. (This is also called image processing.) For example, consider the image of a field below.

The original picture can be brightened, altered to become a grayscale image, the colors can be inverted, or the colors can be shifted to new values, as shown below.

The image file stores the original colors (red, green, and blue values) of each pixel, which we will write with lowercase letters (r, g, b). The final colors that are displayed on the screen are calculated from these values. To display the original field image using the visualizer above, in the boxes for Red, Green, and Blue values, enter the letters r, g, and b. The result on your screen should be similar to the image below.

In each of the boxes, you can also write an equation involving r, g, and b to produce effects like the ones shown above. For example, try entering the following combinations.

Red: r + 100	Green: g + 100	Blue: b + 100
Red: r	Green: r	Blue: r
Red: 255 - r	Green: 255 - g	Blue: 255 - b
Red: b	Green: r	Blue: g

The Filter Creation Challenge

Experiment by entering different formulas into the Red, Green, and Blue boxes above. How many of the following image effects can you recreate? What other interesting filters can you design?