The Basics

A Pixel Is Four Numbers

Every pixel on your screen is made of three tiny lights: red, green, and blue. Each has a brightness value from 0 (off) to 255 (full). A fourth number, alpha, controls how transparent the pixel is. That's it. Four numbers, every pixel, every image.

1 PIXEL
RED204
GREEN89
BLUE35
ALPHA255
Interactive

Mix It Yourself

Drag the sliders to set how bright each channel is. Watch what colour you get. Pay attention to what happens when all three are at maximum, and when all three are at zero.

#CC5923
rgb(204, 89, 35)
R
204
G
89
B
35
Additive colour: Unlike paint, adding more light makes it brighter. Red + Green makes yellow. Red + Green + Blue at full makes white. Nothing makes black. This is the opposite of mixing paint.
Under The Hood

An Image Is Three Channels

Think of a colour image as three separate greyscale images stacked on top of each other, one for each light colour. The brighter a pixel is in the red channel, the more red it contributes to the final result. The three channels combine to produce every colour you see. (Alpha is a fourth channel, but it carries no colour, just transparency data.)

A single frame broken into its three colour channels. Each shows how much of that light is present. The brighter an area, the more that channel contributes.

The Scale

Why 0 to 255?

Each channel is stored as 8 bits of data. 8 bits gives you 256 possible values, 0 to 255. Three channels gives you over 16 million possible colours. The downside: 256 steps is finite. In smooth gradients you can sometimes see the jumps, a visual artefact called banding. Higher bit depths (10-bit, 12-bit) have more steps and smoother gradients.

8-bit: 256 steps (standard)
4-bit: 16 steps (exaggerated banding)
2-bit: 4 steps (extreme banding)
Where you'll see banding: Clear blue skies and out-of-focus backgrounds. These are large areas of slowly shifting colour that expose the limits of 8-bit's 256 steps.
16.7 Million
Colours in 8-bit
1.07 Billion
Colours in 10-bit
281 Trillion
Colours in 16-bit
The Fourth Channel

Alpha Is Transparency

Alpha works exactly like the colour channels, a number from 0 to 255, but it controls opacity rather than brightness. Alpha 255 = fully solid. Alpha 0 = fully invisible. This is how compositing works: a VFX element with an alpha channel can be placed over any background cleanly.

The element in isolation
ALPHA 255
The alpha channel as a matte

The element's alpha stored as brightness. White is solid (255), black is invisible (0).

Composited over a background

Drag the alpha slider. Notice the element blends into whatever is behind it. That's compositing.

PNG vs JPG: JPEG throws the alpha channel away, so every JPG has a solid background. PNG preserves it. That's why transparent graphics must be saved as PNG.
Taking It Further

Colours Can Be Combined

Because a pixel is just numbers, you can do arithmetic on two of them. This is what a blend mode is. Unlike the mixer, you're not building one colour, you're combining two layers, and each operation has its own predictable behaviour.

A
+
B
=
Result
Colour A
Colour B
Result
The takeaway: You never memorise the maths. You reach for the behaviour: Add to lighten, Multiply to darken, and so on. Every blend mode in Photoshop/Affinity or Resolve is built on operations like these.
Summary

What To Remember

R · G · B · A
Every pixel is four numbers: red, green, blue, and alpha
0 – 255
Each channel runs from 0 (off) to 255 (full), stored in 8 bits
Additive
More light = brighter. R+G+B at full = white. All zero = black
Alpha
Transparency only: 255 solid, 0 invisible. PNG keeps it, JPG discards it