Lesson 8

Color

We’ve looked at making things black and white, but that’s pretty boring. How do we make things actually look colorful?!

So far, we’ve been using the fill function with one attribute:

fill(grayscale);

But fill can also take three attributes, with numbers between 0-255 for red, green, and blue:

fill(red, green, blue);

The way we make colors is by mixing red, green, and blue values.

If we wanted to make red, we would give it a (red, green, blue) value of (255,0,0). This tells the program to make the color as red as possible (255), and no green (0) and no blue (0).

To make green, we would give it a (red, green, blue) value of (0,255,0): no red, as much green as possible, and no blue.

To make blue, we would give it a (red, green, blue) value of (0,0,255): no red, no green, and as much blue as possible.

So to make red, green, and blue, we would type these lines:

Color Red Green Blue Code
Red		 255 0 0 fill(255,0,0);
Green		 0 255 0 fill(0,255,0);
Blue		 0 0 255 fill(0,0,255);

Here’s what this might look like in a program

Code:
Copy
fill(255,0,0);
ellipse(25,30,30,30);
fill(0,255,0);
ellipse(75,30,30,30);
fill(0,0,255);
rect(20,60,60,20);
Preview:
Tip

Don’t worry if its hard to guess which attributes to type to get the color you want. Most programmers don’t know what numbers to type, and use a reference guide to tell them what to type in. You can also experiment by typing different numbers for each attribute until you get a color you like!

When you are painting, you can mix red, green, and blue together to make different colors. The same thing happens in programs too. Here are some common color mixtures:

Color Red Green Blue Code
Yellow		 255 255 0 fill(255,255,0);
Cyan		 0 255 255 fill(0,255,255);
Fuchsia		 255 0 255 fill(255,0,255);
Purple		 128 0 128 fill(128,0,128);
Navy		 0 0 128 fill(0,0,128);
Crimson		 220 20 60 fill(220,20,60);
Gold		 255 215 0 fill(255,215,0);
Deep Pink		 255 20 147 fill(255,20,147);
Wheat		 245 222 179 fill(245,222,179);
Steel Blue		 119 196 222 fill(119,196,222);
Sea Green		 46 139 87 fill(46,139,87);
Exercise

Change the color of your face so that it is your favorite color. You can use one of the colors from the table above, or try typing in different numbers until you find a brand new color you like!

Next lesson Fill, Stroke, and Background