Laboratory: RGB Colors

Using color-swatch and image-show, preview each of the following colors.

a. The colors named “palevioletred”, “steelblue”, and “salmon”.

b. The colors (irgb 128 97 15), (irgb 211 128 90), (irgb 90 0 128), (irgb 128 255 0), (irgb 12 80 128), and (irgb 0 128 255).

As you've noted, we regularly suggest colors for you to use. Of course, you should not be limited by our suggestions for possible colors. Write down the names of five of your favorite colors and then see if any of them are defined by using context-list-colors. For example, if one of my favorite colors is a kind of pink (say, hot pink), I might write

> (context-list-colors "pink")

Using those results or other explorations of the color space, pick three color names that you like, find the corresponding encoded RGB values, and name them fave1, fave2, and fave3.

For example, if hot pink were my favorite color, I might write

(define fave1 (color-name->irgb "hotpink"))

Recall that you can find out the value Mediascript associates with a name by typing it in the interactions window and then hitting enter.

a. Find out what values Mediascript associates with your three favorite colors. For example, type fave1 to identify what value is used for fave1.

b. Are those values clearer or less clear than the names you've used?

c. (Optional) Hypothesize what those values represent. You might find it useful to create a few colors which have only one of the three components. (E.g., create (irgb 128 0 0) and (irgb 129 0 0) and see how they relate.

In an earlier exercise, you defined three favorite colors. Your definitions looked something like the following:

(define fave1 (color-name->irgb "hotpink"))
(define fave2 (color-name->irgb "aquamarine"))
(define fave3 (color-name->irgb "wheat"))

a. Determine the red, green, and blue components of fave1 using irgb-red, irgb-green, and irgb-blue.

b. Determine the red, green, and blue components of fave2, using irgb->string.

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

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 (irgb 255 0 0), (irgb 0 255 0), and (irgb 0 0 255)?

b. Explore your answers using color-swatch and image-show.

c. Explore your answers by using irgb->color-name to find the names associated with these colors.

d. What color do you expect to get from (irgb 0 128 0)?

e. Check your answer in the ways suggested above. (And no, we can't completely explain the results, but you should know about them.)

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 (irgb 255 255 0), (irgb 255 0 255), and (irgb 0 255 255)?

b. Explore your answers using color-swatch and image-show.

c. Explore your answers by using irgb->color-name to find the names associated with these colors.

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 (irgb 192 192 0), (irgb 128 128 0), (irgb 64 64 0), (irgb 192 64 0), and (irgb 64 192 0)?

b. Explore your answers using color-swatch and image-show.

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

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 Mediascript's name for that color.

After you are done checking your answers, you should read the notes on this problem.

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. Preview the colors as above.

d. Using irgb->color-name, find out what names Mediascript assigns to each of those colors.

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”?)

Return to the problem.

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 that color using irgb, 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).

Using color-grid, create an image using at least ten different variations of blue to produce something that you find compelling.

If those instructions are too vague, you might consider how to use those shades of blue to make an image that induces some mood, such as relaxation or playfulness.

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 one 5x5 grid with all but the center color a dark grey (say 64/64/64), and the center a medium grey (say 128/128/128). For example,

> (define main (irgb 64 64 64))
> (define cent (irgb 128 128 128))
> (image-show (color-grid 10 10 5 
                          main main main main main
                          main main main main main
                          main main cent main main
                          main main main main main
                          main main main main main))

b. Create another grid with all but the center a light grey (say 192/192/192).

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

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 image using those colors.

You may still be wondering about the integer encoding of RGB colors. See what integers you get for the following colors and then hypothesize how the encoding is computed.