Laboratory: RGB Colors
Summary: In this laboratory, you will explore the creation and analysis of simple RGB colors.
Reference
(color->irgb string)MediaScheme Color Procedure.- Convert any of the myriad representations of colors to a corresponding integer-encoded RGB color.
(color->rgb-list color)MediaScheme Color Procedure.- Convert the given color to a list of its three components (red, green, and blue).
(color->string color)MediaScheme Color Procedure.- Convert the given color to a component string that is comparatively easy for a novice to read. Warning! That string cannot be used as a color.
(color-grid box-width box-height columns color_0 ... color_n)MediaScheme Color Procedure.- Create a grid of colors with the specified number of columns. Fills in the gird using the specified list of colors. Each box in the grid has the specified width and height. If the number of colors is not a multiple of the number of columns, the remaining boxes are the background color.
(color-name? val)MediaScheme Color Procedure.- Checks to see if
valis a string representing a color in the database of colors. (color-name->irgb string)MediaScheme Color Procedure.- Get the integer-encoded RGB color that corresponds to the given color name.
(color-representation color)MediaScheme Color Procedure.- Determine what color representation is used for the the given color. That representation is returned as a symbol. If the value does not appear to be a color, returns
\#f. (color-swatch color1),(color-swatch color1 color2),(color-swatch color1 color2 color3 ...)MediaScheme Color Procedure.- Create an small image (“swatch”) that shows the given colors. Permits up to six colors.
(context-list-colors)MediaScheme GIMP Procedure.- List all valid color names.
(context-list-colors pattern)MediaScheme GIMP Procedure.- List all the valid color names that contain
pattern. (image-show image)MediaScheme GIMP Procedure.- Opens a new window with the image.
(irgb r g b)MediaScheme Color Procedure.- Build an integer-encoded RGB color whose red, green, and blue components are the specified values, each of which is an integer between 0 and 255, inclusive. If given real values, rounds them to the nearest integer. If given values outside the bouds, caps them at the bounds.
(irgb->color-name irgb-color)MediaScheme Color Procedure.- Convert the given integer-encoded RGB color to a string that names a similar color. Note that this conversion approximates the RGB color as there are many fewer names than colors.
(irgb->hsv irgb-color)MediaScheme Color Procedure.- Convert the given integer-encoded RGB color to a list corresponding to the HSV (hue, saturation, value) representation.
(irgb->rgb-list irgb-color)MediaScheme Color Procedure.- Convert the given color to a list of its three components.
(irgb->string irgb-color)MediaScheme Color Procedure.- Convert the given RGB color to an easy-to-read string. (The string is not so easy to convert back to an RGB color.)
(irgb-blue irgb-color)MediaScheme Color Procedure.- Get the blue component of an integer-encoded RGB color.
(irgb-green color)MediaScheme Color Procedure.- Get the green component of an integer-encoded RGB color.
(irgb-red irgb-color)MediaScheme Color Procedure.- Get the red component of an integer-encoded RGB color.
Preparation
a. Bring up the reading on RGB colors for further reference.
b. For this lab (and for most subsequent labs), you will need to connect DrRacket to GIMP. The steps will feel a bit complex now, but they should get easier as time goes on. If you neglected to do so in the Linux lab, open a new terminal window and type /home/rebelsky/bin/csc151-setup and then type /home/rebelsky/bin/csc151-update. (Do not type the period.)
c. Start both DrRacket and GIMP.
d. In GIMP, select DBus Server from under the MediaScript menu. You’ll get no feedback that anything has happened, but GIMP is now ready to talk to DrRacket.
e. In DrRacket, add the following line to the Definitions pane, directly under the #lang racket language specification.
(require gigls/unsafe)
“gigls” is Grinnell’s Improved GIMP Library for Scripting. (Well, it’s really the Glimmer Improved GIMP Library for Scripting, but Glimmer is part of Grinnell.) The code we’re using is “unsafe” because it is implemented in C and communicates with another program.
f. Click DrRacket’s Run button. If all goes well, DrRacket will think for a moment and then give you a prompt in the interactions pane. If things don’t go well, you’ll probably see an incomprehensible error message. Ask your teacher or class mentor for help or refer to the list of possible error messages and their solutions.
g. Review the list of helpful procedures from the beginning of the lab.
h. In the self-check section of the reading, you were to predict the values of some expressions. Type in those expressions to see if you got the values you expected (or close to the values you expected).
Exercises
Exercise 1: Previewing 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).
Exercise 2: Selecting New Colors
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"))
Exercise 3: Representing Colors (1)
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.
Exercise 4: Representing Colors (2)
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.
Exercise 5: 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 (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.)
Exercise 6: 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 (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.
Exercise 7: 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 (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?
Exercise 8: 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 Mediascript’s name for that color.
After you are done checking your answers, you should read the notes on this problem.
Exercise 9: 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. Preview the colors as above.
d. Using irgb->color-name, find out what names Mediascript assigns to each of those colors.
Notes
Notes on Exercise 8: 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”?)
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: 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 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).
Exploration 2: Composition in Blues
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.
Exploration 3: 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 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?
Exploration 4: 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 image using those colors.
Exploration 5: Encoded RGB Numbers
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.
(irgb 255 0 0)(irgb 254 0 0)(irgb 1 0 0)(irgb 2 0 0)(irgb 0 255 0)(irgb 0 254 0)(irgb 0 1 0)(irgb 0 2 0)(irgb 0 0 255)(irgb 0 0 254)(irgb 0 0 1)(irgb 0 0 2)(irgb 0 1 1)(irgb 1 1 0)