Turning a colour down

Challenge 4 of 13

Lowering a number does not change which colour it is — it makes it darker. Both squares here are red and nothing else, but the left one is 255 red and the right only 128: a deep maroon that no named colour will give you.

Set both.

Your code JavaScript

Set both.

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.