Colour, RGB and alpha blending

A screen makes every colour by mixing red, green and blue light, so a computer stores a colour as three numbers. This is called RGB colour.

In this lesson you read colours as numbers, write them in hex, and blend one colour over another so that a shape can be see-through.

Each channel is a whole number from 0, none of that light, to 255, all of it. Mixing the three gives every colour a screen can show.

Light adds up, so red and green together make yellow, and all three at full strength make white. All three at 0 is black, because no light comes out.

Web pages and design tools write a colour in hex, base 16. The digits are 0 to 9 and then a to f, so f means 15.

Each channel becomes two characters. The channel 200 is 12 sixteens and 8 ones: c and 8, so c8. Red 200, green 40 and blue 40 is #c82828.

docker exec jupyter python3 -c "print((200, 40, 40), '#%02x%02x%02x' % (200, 40, 40))"

Glass tinted red lets some of the scene behind it show through. In graphics that is alpha. We give it as a percentage: 100 is solid, 0 is invisible.

To blend, take a weighted mix of each channel. The top colour counts alpha percent and the colour below counts the rest.

docker exec jupyter python3 -c "print([(a * 200 + (100 - a) * 100 + 50) // 100 for a in (0, 25, 50, 100)])"

The Run prints [100, 125, 150, 200], the red channel column of the table. For each channel the rule is: alpha times top, plus (100 minus alpha) times bottom, plus 50, then // 100.

The 50 makes the division round to the nearest whole number instead of always rounding down.

red = [200, 40, 40]
blue = [40, 40, 200]

# alpha is how much of red shows, as a percentage.
for alpha in [0, 25, 50, 75, 100]:
    mixed = []
    for channel in range(3):
        part = alpha * red[channel] + (100 - alpha) * blue[channel]
        mixed.append((part + 50) // 100)
    print(alpha, mixed)
# Change red to [255, 255, 0] and press Run. The middle becomes a dull green.

docker exec jupyter python3 -c "from PIL import Image; a = Image.new('RGB', (2, 1), (200, 40, 40)); b = Image.new('RGB', (2, 1), (100, 60, 20)); print(Image.blend(b, a, 0.5).getpixel((0, 0)))"

The Run prints (150, 50, 30), the same result as the 50 percent row of the table. Image.blend(b, a, 0.5) mixes two pictures of the same size, half of each.

Pillow takes alpha as a number from 0 to 1, not a percentage. 0.5 here means 50 percent.

docker exec jupyter python3 -c "from PIL import Image; p = Image.new('RGB', (256, 20)); [p.putpixel((x, y), (x, 0, 255 - x)) for x in range(256) for y in range(20)]; p.save('fade.png'); print(p.getpixel((0, 0)), p.getpixel((255, 0)))"

The Run prints (0, 0, 255) (255, 0, 0) and saves fade.png. Open it from the file list.

You see a wide thin strip. The left end is pure blue, the right end is pure red, and in between the colour passes through purple.