The Coder's Handbook

Color

REPRESENTING COLOR

Colors in Processing

Colors are represented as RGB values

  • RGB stands for Red, green, Blue

  • Each value is represented on a scale of 0 to 255


You can use colors in a few ways:

  • Create a variable to store a color.

  • Set the color you draw shapes in with the fill command.

  • Set the color of outlines with the stroke command.


// Making a color variable to store this RGB value

color cyan = color(0, 255, 255);


FILL

Using Fill


When you use the fill() command, it sets the color that all future shapes will be drawn in. Think of it as picking up a paintbrush with a specific color of paint on it.


The fill command is overloaded, meaning it has a few different versions. The three most basic are grayscale, RGB, and taking a color as a parameter.


void fill(int grey)

  • Sets your color from black (0) to white (255).


fill(127); // Sets the color to a medium grey

void fill(int red, int green, int blue)

  • Sets your color from based on RGB values ranging from 0 to 255.


fill(255, 127, 0); // Sets the color to orange

void fill(color c)

  • Sets your color equal to the value of the color parameter


color cyan = color(0, 255, 255);

fill(cyan);

STROKE

Using Stroke


When you use the stroke() command, it sets the color of your outlines in the future. This works just like fill(). It is also overloaded, with the same parameters.


Note that stroke will also affect the color of any lines you draw, since they don't have an interior.


void stroke(int grey)

  • Sets your color from black (0) to white (255).

stroke(127); // Sets the color to a medium grey

void stroke(int red, int green, int blue)

  • Sets your color from based on RGB values ranging from 0 to 255.


fill(255, 127, 0); // Sets the color to orange

void stroke(color c)

  • Sets your color equal to the value of the color parameter


color cyan = color(0, 255, 255);

stroke(cyan);



By default, shapes in processing have a small black outline. You can change this color, remove it entirely, or make it thicker.

No Stroke

You can stop drawing outlines (and lines) with the noStroke command.

To undo this, simply set a new stroke color.


void noStroke()

  • Stops drawing outlines and lines

fill(255, 0, 0);

noStroke(); // Disables stroke

rect(100, 100, 200, 100); // Draws a red rectangle with no outline

stroke(0); // Restores stroke visibility (black)

rect(200, 250, 200, 100); // Sets the color to orange

The code on the left produces this image

Weight


You can change how big your lines are using the strokeWeight() command. The default weight is 1.


void strokeWeight(int weight)

  • Sets your color equal to the value of the color parameter


strokeWeight(4); // Wider

line(80, 80, 320, 80);

strokeWeight(16); // Quite Thick

line(80, 160, 320, 160);

strokeWeight(40); // Super Chonker

line(80, 280, 320, 280);

The code on the left produces this image

BACKGROUND

Using Background


When you use the background() command, it sets the color for the entire screen instantly. You typically want to do this before drawing other shapes.


The fill command is overloaded, meaning it has a few different versions. The three most basic are grayscale, RGB, and taking a color as a parameter.


void background(int grey)

  • Sets your color from black (0) to white (255).


background(127); // Sets the whole screen to a medium grey

void background(int red, int green, int blue)

  • Sets your color from based on RGB values ranging from 0 to 255.


background(255, 127, 0); // Sets the whole screen to orange

void background(color c)

  • Sets your color equal to the value of the color parameter


background(c); // Sets the whole screen to c

TRANSPARENCY

Alpha Value

Alpha is the fourth value associated with each color.

  • It is always optional.

  • It is on a scale of 0 (opaque) to 255 (transparent)

  • You can apply this to color variables, fill, or stroke.


Example Code:

fill(255, 0, 0, 127);

rect(100, 100, 200, 150);

fill(0, 255, 0, 127);

rect(200, 200, 200, 150);

The code on the left produces this image

Looking for more color tools? Check out the official reference.
Note: A few of these may only work on the newest version of Processing.

RESOURCES

  • Chapter 1.3 to 1.5 - Color