Three numbers instead of a name

Challenge 1 of 13

Every colour on a screen is three numbers: how much red, how much green and how much blue, each from 0 for none up to 255 for as much as there is. shapeColour takes them in that order. Full red and nothing else is 255, 0, 0.

Set the three numbers.

Your code JavaScript

Set the three numbers.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Colour by Numbers

Named colours are quick, but there are only thirteen of them. Behind every colour on a screen are three numbers: how much red, how much green and how much blue, each from 0 for none to 255 for as much as possible.

shapeColour(255, 0, 0); is pure red. shapeColour(0, 0, 0); is black — no light at all. shapeColour(255, 255, 255); is white — all three full. And every named colour you have used is one of these triples underneath: RED is 255, 0, 0.

Turning a number down does not change which colour it is, it darkens it. 255, 0, 0 is a bright red; 128, 0, 0 is a deep maroon. Shades like that are the real reason to mix your own — there is no name for most of them.

Mixing is the interesting part, and it does not work like paint. A screen ADDS light, so piling colours on always gets brighter. Red and green together make yellow, red and blue make magenta, green and blue make cyan.

Equal amounts of all three give you a grey, and the higher the numbers the lighter that grey is. Because that means typing the same number three times, there is a shortcut: one number on its own, like backgroundColour(210);, means that amount of all three.

In this topic you will build up the three channels, mix the colours you already know by name, and then colour whole pictures by number.