Tutorials › Adding Color Simple 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. In Simple Mode, just type the color name directly — fill(dodgerblue) — no quotes needed!
0 / 13 lines
Loading editor...
size(400 300) 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 / 21 lines
Loading editor...
size(400 300) 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 / 15 lines
Loading editor...
size(400 300) 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 / 15 lines
Loading editor...
size(400 200) 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 →