# Laboratory: RGB Colors

This lab is also available in PDF.

Summary: In this laboratory, you will begin to explore various aspects of the RGB representation of colors.

Contents:

Reference:

## Preparation

Plan to do your work for this laboratory in the interactions window, rather than in the definitions window.

In this laboratory, it will help to work with a blank canvas, so create a new 11x9 image, call it `canvas`, show it, and zoom in to 16:1 resolution. If you've forgotten how to do all of that, see the notes at the end of this document.

## Exercises

### Exercise 1: Primaries

The primary colors are the colors in which one of the three components has the full value (255) and the other two components are 0.

a. What colors do you expect to get from `(rgb.new 255 0 0)`, `(rgb.new 0 255 0)`, and `(rgb.new 0 0 255)`?

b. Explore your answers by setting various pixels in `canvas` to the specified colors. For example, you might set the top-left pixel to the first color with

```(image.set-pixel! canvas 0 0 (rgb.new 255 0 0))
```

c. Explore your answers by using `rgb->cname` to find the names associated with these colors.

### Exercise 2: Secondaries

The secondary colors are those you get when you set two components to 255 and the third to 0.

a. What colors do you expect to get from `(rgb.new 255 255 0)`, `(rgb.new 255 0 255)`, and `(rgb.new 0 255 255)`?

b. Explore your answers by setting various pixels in `canvas` to the specified colors.

c. Explore your answers by using `rgb->cname` to find the names associated with these colors.

### Exercise 3: Reduced Components

In the previous two experiments, we set the level of components to 255 or to 0. Let's consider what happens if the components are less than 255.

a. What colors do you expect to get from `(rgb.new 192 0 192)`, `(rgb.new 128 0 128)`, `(rgb.new 64 0 64)`, `(rgb.new 192 0 64)`, and `(rgb.new 64 0 192)`?

b. Confirm your predictions by setting various pixels in `canvas` to the specified colors.

c. Determine what names DrFu associates with these colors. Are they good names?

### Exercise 4: Common Components

a. What do you expect to have happen if all three components of a color are 128? If all three components are 255? If all three components are 0?

b. Check your answers by setting a pixel to each color and by finding DrFu's name for that color.

c. Explain why those colors correspond to the different combinations. If you're not sure, check the notes on this problem.

### Exercise 5: Your Favorite Colors

In the lab on raster graphics, you defined three favorite colors. Your definitions looked something like the following:

```(define fave1 (cname->rgb "blood red"))
(define fave2 (cname->rgb "aquamarine"))
(define fave3 (cname->rgb "wheat"))
```

If all went well, you also saved those definitions in the file `/home/username/Desktop/fave-colors.sct`. If so, try loading that file. If not, try creating that file now and then load it.

```(load "/home/username/Desktop/fave-colors.sct")
```

a. Determine the red, green, and blue components of `fave1` using `rgb.red`, `rgb.green`, and `rgb.blue`.

b. Determine the red, green, and blue components of `fave1`, `fave2`, and `fave3` using `rgb->string`.

c. Determine the red, green, and blue components of `fave1`, `fave2`, and `fave3` using `rgb->rgb-list`.

### Exercise 6: Nearby Colors

a. Pick one of your favorite colors (say `fave1`).

b. Create three colors that are similar to that color by varying each of the components by 16 or so. For example, you might create one color by adding 16 to each component, one by subtracting 16 from each component, and one by adding 16 to two components and subtracting 16 from the third. Name these three variants `variant1`, `variant2`, and `variant3`.

c. Draw pixels in each of those colors.

d. Find out what names DrFu assigns to each of those colors.

### Exercise 7: Psuedo-Complementary Colors

a. Find psuedo-complements to your three favorite colors and name them `evaf1`, `efaf2`, and `evaf3`.

b. Set the top-two pixels in column 0 of `canvas` to `fave1`, the top-two pixels in column 1 to `evaf1`, the top-two pixels in the column 2 to white, the pixels in column 3 to `fave2`, the top-two pixels in column 4 to `evaf2`, and so on and so forth.

c. What do you note about the relationship between colors and their psuedo-complements?

### Exercise 8: Psuedo-Complementary Colors, Revisited

Consider the color 128/64/0. One natural psuedo-complement to that color is 127/191/255, for reasons given in the reading. However, there are certainly others.

a. Find three other psuedo-complements that are not too near each other. If you are not sure how to do so, read the notes on this problem.

b. Explore those colors by setting pixels in `canvas` to each color.

c. What do you note about relationships between the various psuedo-complements?

### Exercise 9: Generating Colors

It is useful to be able to visualize the relationship between the RGB numbers and the colors they represent. Sometimes it's just fun to see how well you can guess the components of a color. For each of the following colors, guess the RGB components, build a pixel of that color to see how close you got, and then try again.

a. The dominant color of your skin.

b. A color of your shirt.

c. The color of the desks in this room.

d. The color of the sky right before a storm.

e. A color of your choice (which you should describe first).

## Explorations

Explorations are intended for students interested in further exploring the design aspects of these techniques. They also provide students who finish early with extra activities that may challenge them in different ways.

### Exploration 1: Color Context

While the representation of colors using red, green, and blue components is relatively straightforward, it ignores a significant issue: Human perception. Perhaps not so surprisingly, the way we perceive a particular color depends greatly upon the surrounding colors. We can use the techniques we've learned so far to explore this issue.

a. Create and show two images, `canvas-light` and `canvas-dark`, each 9x5. The background color of the first canvas should be a light grey, about 64/64/64. The background color of the second canvas should be a dark grey, about 192/192/192. Zoom in on each canvas to the full 16:1 magnification.

b. Set the center pixel of each canvas to a medium grey, 128/128/128.

c. Do the center pixels look the same to you? Should they?

d. [Fill in some standard color example that shows the same thing.]

e. Choose a simple color and conduct an experiment similar to the two preceding experiments. In this case, you should first surround the color by its psuedo-complement and then surround it by a nearby color. Share your images with a neighboring group.

### Exploration 2: Related Colors

Pick a technique for generating a group of eight or so related colors. For example, you might choose a variety of complements to some color, you might choose colors in which the ratio of red to green and of red to blue is consistent (e.g., red is always twice green and triple blue), or you might start with a single color and find variants by repeatedly adding 16 to each component.

Create an interesting 5x5 image using those colors.

## Notes

### Preparation

To create a blank canvas and name it, type the following in the interactions window.

```(define canvas (image.new 11 9))
(image.show canvas)
```

### Notes on Exercise 4: Common Components

It should make some sense that the color 0/0/0 is black, since black is the absence of any color. To many, though, it makes less sense that 255/255/255 is white. However, if you ask a physicist, she will tell you that white is the combination of every color of light, so saturation of all three components makes sense. Alternately, we can simply think of white as the opposite of black. Once we know white and black, we can expect that every color with common components in between white and black is some kind of grey, so 128/128/128 is medium grey. (Or is that medium gray?)

### Notes on Exercise 8: Psuedo-Complementary Colors, Revisited

For example, you might compute the psuedo-complement that gives 128/128/128, the psuedo-complemens that gives 192/192/192, and the psuedo-complement that gives 224/224/244.

## History

Disclaimer: I usually create these pages on the fly, which means that I rarely proofread them and they may contain bad grammar and incorrect details. It also means that I tend to update them regularly (see the history for more details). Feel free to contact me with any suggestions for changes.

This document was generated by Siteweaver on Mon Dec 3 09:55:35 2007.
The source to the document was last modified on Fri Sep 7 09:23:50 2007.
This document may be found at `http://www.cs.grinnell.edu/~rebelsky/Courses/CS151/2007F/Labs/rgb-lab.html`.

You may wish to validate this document's HTML ; ;

Samuel A. Rebelsky, rebelsky@grinnell.edu

Copyright © 2007 Janet Davis, Matthew Kluber, and Samuel A. Rebelsky. (Selected materials copyright by John David Stone and Henry Walker and used by permission.) This material is based upon work partially supported by the National Science Foundation under Grant No. CCLI-0633090. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the National Science Foundation. This work is licensed under a Creative Commons Attribution-NonCommercial 2.5 License. To view a copy of this license, visit `http://creativecommons.org/licenses/by-nc/2.5/` or send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA.