Note: This document is intended only to be a very brief summary of color specification and control. Far more thorough discussion and documentation can be found in the Processing reference guide, various tutorials, cheat sheets, and our text book

We wish to highlight two aspects of color usage:

1. Processing commands that control use of colors
2. How colors can be defined with such commands

Use of colors in processing

• background
  Sets the color of the entire sketch (overwriting anything which may have previously been drawn). Tangential to our current study of color, it is worth noting that the background command can also be used to set the background to a previously loaded image.

• fill
  Designates a color that will subsequently be used to fill the interior of any shapes that are drawn. That fill color will remain in effect for all shapes that are drawn until a subsequent time when another fill color is designated.

• noFill
  Designates that shapes should be drawn with transparent interiors. That state will remain in effect for all shapes that are drawn until a subsequent time when a fill color is designated.

• stroke
  Designates a color that will subsequently be used to draw the boundary of any shapes that are drawn. It's worth noting that for use of point and line shapes, it is the stroke color that is used (those shapes have no interior). The stroke color will remain in effect for all shapes that are drawn until a subsequent time when another stroke color is designated.

• noStroke
  Designates that shapes should be drawn without any visible border. That state will remain in effect for all shapes that are drawn until a subsequent time when a stroke color is designated.

Specifiying colors in Processing

• A single integer parmater is viewed as a grayscale value, with 0=black and 255=white. For example,
  

        background(255);   // white
        fill(100);         // a dark gray
        stroke(0);         // black
        

• Three integer parameters are used to define a color as an RGB value. The three parameters repsectively define the intensity of the color in terms of red, green, and blue, with a value of 0 being complete lack of that component, and 255 designating full intensity. For example:
  

        background(0, 0, 255);     // bright blue
        background(135, 206, 250); // a sky blue
        fill(255, 0, 255);         // magenta, which mixes bright red and blue
        fill(100, 0, 100);         // a darker purple than magenta
        stroke(255, 255, 0);       // yellow (which is red+green light)
        

The use of the range 0 to 255 for such values is that color components are often represented as 8-bit values and there are 256 different ways that those 8 bits can be set, which are then associated with the numbers 0 through 255 by considering those 8 bits as a single integer in a base-two (binary) system.

Another common scheme for describing colors relies inteas on using a base-sixteen (hexadecimal) system to express those same 8-bit colors. Instead of 8 binary digits, and 8-bit value can be expressed using only 2 hexadecimal digits; hexadecimal digts rely on the characters 0, 1, 2, ..., 8, 9, a, b, c, d, e, f. The combined 24-bits for an RGB color is often expressed in computing systems using a six-digit hexademical number, which must be expressed using the # character to designated it as a hexadecimal constant. Using such a system, we could have expressed our sky-blue background instead as

background(#87CEEB);

The Color Selection tool

To assist in finding a color that suits your taste, Processing includes a color selector tool, found as menu item Tools → Color Selector. Once you identify a color on their color wheel, you can adjust its tint or hue, and then it will report its RGB values (or hexadecimal equivalency).

Transparency

By default, if the geometry of two shapes overlaps, whatever is drawn later will obscure the first. But it is possible to define colors with an additional optional transparency, known as its "alpha" value, that defines a level of opacity ranging from 0=transparent to 255=opqaue. This allows for various forms of blending of a new color with whatever it obscures. The transparency component can be designated either as a second parameter when using grayscale, as in

      stroke(0, 127);  // black line but with only 50% opacity
      fill(127, 200);  // gray fill, that is mostly opaque
      

      fill(255, 0, 0, 63);  // red with about 25% opacity
      

Note that Processing will not accpet a transparency value for the sketch background color.

Other color models

While RGB is the default model for specifying colors, there is an alternate mode known as HSB (hue-saturation-brightness). The colorMode function can be used to change the mode, if desired.