← All lessons/Getting Started· Lesson 2 of 32

Adding color

Use background, fill, and stroke to color the canvas and your shapes.

About 6 min

Colors are numbers

Colors in p5 are mixed from red, green, and blue, each from 0 to 255. background(r, g, b) fills the whole canvas. fill(r, g, b) sets the color of shapes you draw after it. stroke(r, g, b) sets their outline.

  • fill(255, 0, 0) → red
  • fill(255, 204, 0) → yellow
  • fill(0) → black (a single number is a shade of gray from 0–255)
  • noStroke() removes the outline; noFill() removes the fill

NOTE

Order matters: set fill(...) before the shape it should color. A fill stays active until you change it.

Background, fill, and stroke together.

Your turn

Paint a little scene. Give the canvas a sky-blue background with background(135, 206, 235), then set the fill to a sunny yellow (255, 204, 0) and draw an ellipse for the sun.

Hints