Color Channels

As previously indicated, computer screens use a combination of red, green, and blue to produce all of the displayable colors. Similarly, in Processing, manipulating colors is merely a matter of specifying the amounts of red, green, and blue an object’s color contains.

To illustrate how scaling these color amounts (otherwise known as “channels") works, we shall start with a simpler example—grayscale.

Technically, a black and white image comprises two colors, black and white. These could be represented via 1 bit (e.g., 0 for black, 1 for white). However, in Processing (and life), there is more to the spectrum than black or white. Processing allocates 8 bits for specifying shades of gray. This means that there are 28, or 256, different shades of gray possible.

The boundaries for black and white in the spectrum are at opposite ends, just as they were in the 1 bit case. This means that the instruction stroke(0); would set the pen to produce black lines and the instruction stroke(255); would set the pen to produce white lines.

To demonstrate how the shades of gray vary between these two values, execute the following program:

Click to Download: BlackAndWhite

If you would like to see a slower gradation of grayscale, you can insert a frameRate(10); line in your setup() function.

From Grayscale to Color

Although color seems much more complex than shades of gray, in reality, it is just a “triplication” of the same idea.

To illustrate how each of the red, green, and blue color channels works in the same way as grayscale, alter the fill(blackwhite); line to read fill(blackwhite, 0, 0);. How does this change the behavior of your program? Try fill(0, blackwhite, 0); and fill(0, 0, blackwhite);. What do they produce?

Finally, try fill(blackwhite, blackwhite, blackwhite);. What does this do? Why?

Color Variables

Processing allows you to store colors as variables as well. Once you store a color, you can access its red, green, and blue components separately.

To illustrate this, execute the follow program that “averages” two colors:

Click to Download: ColorAverager


  1. Use the RGB color model to color your figure from Loops. Although you can use an online Color Calculator like the one presented in the previous activity, Processing provides its own color selector tool as well. Access it in the Tools entry on the menu bar.
  2. Add at least one additional keystroke that changes some color in your figure. For example, perhaps pressing “d” darkens the colors in your figure (makes the the color channels have lower values—less intensity), and pressing “l” lightens them (makes the color channels have higher values—more intensity).
  3. Finally, note that you can alter the colors passed as parameters to the stroke(), fill(), and background() functions. Use each of these at least once in your coloring scheme.


Submit the .pde of your Processing program.

Reference Starting Points