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