Tutorial adapted from
 Shiffman's Learning Processing.

Digital (RGB) Color is Different

Grayscale Color

In the digital world, when we want to talk about a color, precision is required. Color is defined as a range of numbers. Let's start with the simplest case: black & white or grayscale. 0 means black, 255 means white. In between, every other number, 50, 87, 162, 209, and so on, is a shade of gray ranging from black to white.

Does 0-255 seem arbitary to you?
Color for a given shape needs to be stored in the computer's memory. This memory is just a long sequence of 0's and 1's (a whole bunch of on or off switches/states/signals.) Each one of these switches is a bit, 8 of them together is a byte. Imagine if we had 8 bits (one byte) in sequence. How many different ways can we configure these switches? The answer is (and doing a little research into binary numbers will prove this point) 256 possibilities. If we count off each of these starting with 0 we get 256 values in a range of numbers between 0 and 255. We will use 8 bit color for our grayscale range and 24 bit (ie, 3*8) for full color (8 bits for each of the red, green, and blue color components).

RGB Color

With oil or watercolor paints, you have the usual three "primary" colors. By mixing them, any color can be generated. Swirling together paint from all three primaries results in a muddy brown or nasty gray. The more paint you add, the darker it gets.

Digital colors are also constructed by mixing three primary colors, but it works differently from paint. The primaries are different: red, green, and blue (i.e., "RGB" color). With color on the screen, you are mixing with projected light, not paint, so the mixing rules are different as well.

As with grayscale, the individual color elements are expressed as ranges from 0 (none of that color) to 255 (as much as possible) and are listed in order R, G, and B. You will get the hang of RGB color mixing through experimentation.

While this may take some getting used to, the more you program and experiment with RGB color, the easier it will seem.

Color Transparency

In addition to the red, green, and blue components of each color, there is an additional optional fourth component, referred to as the color's "alpha." Alpha means transparency and is particularly useful when you want to draw elements that appear partially see-through on top of one another. The alpha values for an image are sometimes referred to collectively as the "alpha channel" of an image.

It is important to realize that pixels are not literally transparent, this is simply a convenient illusion that is accomplished by blending colors. Behind the scenes, the computer software library methods take the color numbers and adds a percentage of one to a percentage of another, creating the optical perception of blending. (If you are interested in programming "rose-colored" glasses, this is where you would begin.)

Alpha values also range from 0 to 255, with 0 being completely transparent (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).


There must be literally thousands of color charts and wheels available on the web. Find one you like. Here are a couple of my favorites to get you started