If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

### Course: Computer programming - JavaScript and the web>Unit 1

Lesson 3: Coloring

# Quick tip: color picking

In the last talk-through, we explored how to use the color picker to easily find a color. Since you can't see the color picker in action in our talk-throughs, here's a GIF of it being used:
Click anywhere in the numbers to get the color picker to pop up. Then, click on the right hand color bar to change the general color you're picking, and click in the left hand side to change the lightness/brightness of the color. You'll get to try it in the next challenge!

## Want to join the conversation?

• how do you do the color thing
• I'm not sure which "thing" you are referring to but maybe this will help.

In order to Color a Background the following line of code must be at the beginning of a program.
background(
After typing "background( " the function should auto complete. All coloring commands are auto completed on Khan Academy.

In order to Fill a Shape use the following line of code before the shape command:
fill( this auto completes);

In order to Color a Line use the following command before the line command.
Stroke( this auto completes);

The numbers in the () tells the computer how red the color is, how green the color is, and how blue the color is.

Example of Background command:
background(0, 255, 242);

Example of Fill a Shape command:
fill(255, 242, 0); -- notice how this is before the shape command (ellipse).
ellipse(202, 208, 300, 300);

Example of Color a Line command:
stroke(191, 0, 255); -- Notice how this is above the object you would like to color.
strokeWeight(37); -- this command changes the thickness of a line
line(80, 115, 270, 75);

Hope this helped! Like this if it did!!
• Shouldn't the basic colors be red, yellow, and blue? I thought the basic colors can't be mixed from other colors. Green can be mixed from yellow and blue, is
it different in computers?
• There are two methods of creating color.

1) Subtractive Color
When subtractive colors are mixed, you get darker colors. If you start from cyan (blue), magenta (red), and yellow and can keep mixing to get different colors. If you have ever painted with watercolors, you have likely seen how the more you mix colors, the darker the resulting colors are. This is an example of subtractive colors.

When additive colors are mixed, you get lighter colors. This is because the colors emit light, and when the colors red, green, and blue mix you will end up with white.

Because computer monitors are emitting light and not reflecting them (like watercolor paint), additive colors are used when programming graphics. However, if you are working with graphic art that will be printed, subtractive colors are used.
• Can you make any color you want?
• No. There are only 16,777,216 colors. If your desire does not match one of them, then you are out of luck.
• Why do you put the fill command before the shape command? Wouldn't you just be filling in nothing?
• You specify the fill and stroke colors, then you draw the affected shapes. Why? Because that's how the folks at MIT designed it.
• If I use Sublime for practice all the thing I am learning here, in which format I need to save the document ? it is JS the extension for java? Thanks!!
• Java and Javascript are two entirely different things. The syntax between the two are not even lose to each other. Java would be closer to C# and JavaScript is kind of its own specialty but if i'm wrong please tell me.
• Does anyone know why three main colors are red, green, and blue instead of the three primary colors(red, yellow, and blue)?
• Red, green, and blue are used because they are called "additive colors." This means that when they are added together, they create white light. When they are subtracted from each other, they create black light. White light and black light can only be created by these colors.
• Can you mix 2 colors
• how does one make the program constantly change colors
• can we make a man with these shapes
`background` takes 3 commands:
There also is an optional 4th command `a` to set a transparency.