Tutorials › Adding Color JS Mode

Adding Color

Learn how to use fill, stroke, noFill, and noStroke to style your shapes with beautiful colors.

1

Fill and Stroke

Every shape has two parts: the fill (the inside color) and the stroke (the outline). By default, shapes are filled white with a black outline. Use fill() to change the fill color and stroke() to change the outline color. These stay set until you change them again!
0 / 16 lines
Loading editor...
size(400, 300); } function draw() { background("white"); fill("dodgerblue"); stroke("navy"); strokeWeight(3); circle(100, 150, 60); fill("tomato"); stroke("darkred"); rect(200, 90, 120, 120); }
Try it!

Try changing strokeWeight(3) to strokeWeight(10) — how does the outline change?

2

Going Outline-Only

Sometimes you want shapes with no fill — just the outline. Call noFill() to turn off the fill. You can also use noStroke() to turn off the outline. And strokeWeight() controls how thick the outline is.
0 / 24 lines
Loading editor...
size(400, 300); } function draw() { background("white"); // Outline only - no fill noFill(); stroke("dodgerblue"); strokeWeight(4); circle(100, 150, 60); circle(100, 150, 40); circle(100, 150, 20); // Fill only - no outline noStroke(); fill("tomato"); circle(300, 150, 60); fill("gold"); circle(300, 150, 40); fill("mediumseagreen"); circle(300, 150, 20); }
3

A Colorful Pattern

Colors carry forward until you change them. So you can set a fill once and draw multiple shapes with it, or change the fill before each shape for a rainbow effect. Let's make a colorful pattern!
0 / 18 lines
Loading editor...
size(400, 300); } function draw() { background(30); noStroke(); let colors = ["tomato", "gold", "mediumseagreen", "dodgerblue", "mediumpurple", "hotpink"]; for (let i = 0; i < colors.length; i++) { fill(colors[i]); circle(70 + i * 55, 100, 25); rect(45 + i * 55, 160, 50, 50); triangle(70 + i * 55, 240, 45 + i * 55, 280, 95 + i * 55, 280); } }
4

Gray Shades with Numbers

Here's a handy shortcut: instead of a color name, you can pass a number from 0 to 255. 0 is black, 255 is white, and everything in between is a shade of gray. This is great for quick sketching!
0 / 19 lines
Loading editor...
size(400, 200); } function draw() { background(0); noStroke(); for (let i = 0; i < 10; i++) { let gray = i * 28; fill(gray); rect(i * 40, 0, 40, 200); } fill("white"); textSize(20); text("0 = black", 10, 170); text("255 = white", 270, 170); }

What to try next

  • Try using CSS color names you've never seen before — "coral", "orchid", "chartreuse", "teal"
  • Make a bullseye target using circles with alternating red and white fills
  • Create a gradient by drawing many thin rectangles with slightly different gray values
  • Draw a rainbow using colored arcs (overlapping circles with noFill and thick strokeWeight)
← The Drawing GridMake It Move →