Equal amounts make grey

Challenge 5 of 13

When all three numbers are the same you get a grey, and the higher they are the lighter that grey is. The left square is 60 in every channel and the right one is 200.

Set both greys.

Your code JavaScript

Set both greys.

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.