Computers represent every pixel's colour as a mix of Red, Green, and Blue (RGB) light values. Colour depth — the number of bits used per pixel — determines how many different colours are possible. More bits per pixel means richer images but larger file sizes, a trade-off that is central to GCSE Computer Science.
What is the RGB colour model?
Every pixel on a screen is made up of three tiny sub-pixels: one red, one green, and one blue. By varying the brightness of each sub-pixel, the display can mix any visible colour — just as mixing coloured light on a stage can produce virtually any hue. This is called the RGB additive colour model because the three primaries of light (red, green, blue) add together to make other colours.
- Red + Green = Yellow
- Red + Blue = Magenta
- Green + Blue = Cyan
- Red + Green + Blue (all at maximum) = White
- All at zero = Black
Each colour channel (R, G, and B) is stored as a number. The most common scheme assigns 8 bits — one byte — to each channel, giving values from 0 (none) to 255 (full intensity). Combine all three channels and you get a 24-bit colour value, sometimes written as three numbers such as (255, 0, 0) for pure red or (128, 0, 128) for purple.
What is colour depth?
Colour depth is the number of bits used to store each pixel's colour. The greater the colour depth, the more different colours can be represented.
The formula for the number of colours that can be represented is:
Number of colours = 2^(colour depth)
| Colour depth (bits per pixel) | Number of colours | Common name |
|---|---|---|
| 1 | 2 | Black and white |
| 4 | 16 | Indexed 16-colour |
| 8 | 256 | Indexed 256-colour (GIF) |
| 16 | 65,536 | High colour |
| 24 | 16,777,216 | True colour (most screens) |
| 32 | 4,294,967,296 | True colour + alpha channel |
A 24-bit image uses 8 bits per channel (R, G, B), giving 2^8 = 256 values per channel. The total number of unique combinations is 256 × 256 × 256 = 16,777,216 — roughly 16.7 million colours, far more than the human eye can distinguish.
How do you calculate the file size of an image?
The uncompressed file size of a bitmap image depends on three things: the width (in pixels), the height (in pixels), and the colour depth (bits per pixel).
File size in bits = Width × Height × Colour depth
File size in bytes = (Width × Height × Colour depth) ÷ 8
Worked example: An image is 800 pixels wide, 600 pixels tall, and uses 24-bit colour.
- Total bits = 800 × 600 × 24 = 11,520,000 bits
- Total bytes = 11,520,000 ÷ 8 = 1,440,000 bytes
- In kilobytes = 1,440,000 ÷ 1,024 ≈ 1,406 KB
- In megabytes = 1,406 ÷ 1,024 ≈ 1.37 MB
This is the size before any compression is applied. Formats such as PNG (lossless) and JPEG (lossy) reduce this considerably.
How does reducing colour depth affect image quality?
Reducing colour depth makes files smaller but degrades visual quality. With only 256 colours (8-bit), a smooth gradient of sky blue to white cannot be represented accurately — instead, distinct bands of colour appear, a visible artefact called colour banding or posterisation.
An 8-bit image of the same 800 × 600 photograph would be:
- File size in bits = 800 × 600 × 8 = 3,840,000 bits = 480,000 bytes ≈ 469 KB
That is roughly one-third the size of the 24-bit version, at the cost of visible quality loss. This trade-off between file size and image quality is a key exam topic.
What is the difference between colour depth and image resolution?
These two terms are often confused:
- Colour depth controls how many different colours each pixel can be. It affects colour richness and file size (linearly with depth).
- Image resolution controls how many pixels there are in total (width × height). It affects sharpness and detail. Doubling the resolution in both dimensions quadruples the file size.
A high-resolution image with low colour depth might be sharp but washed out with visible banding. A low-resolution image with high colour depth may look smooth in colour but blurry in detail.
How is colour represented in HTML and CSS?
In web development, RGB colours are commonly written in two ways that are worth recognising:
- Decimal RGB:
rgb(255, 128, 0)— orange - Hexadecimal:
#FF8000— the same orange, whereFF= 255 red,80= 128 green,00= 0 blue
Each hexadecimal pair represents one 8-bit channel. Hexadecimal is more compact for web use, which is why designers and developers favour it. GCSE students who have covered hexadecimal numbers will find the connection intuitive: FF₁₆ = 255₁₀.
Frequently asked questions
Why does 24-bit colour use three channels of 8 bits each?
Eight bits per channel gives 256 values per channel, and 256 × 256 × 256 = 16,777,216 unique colours. Research suggests the human eye can distinguish roughly 10 million colours, so 24-bit true colour exceeds what we can perceive — making further increases yield no visible benefit for photographs. The 8-bit-per-channel standard also maps neatly to one byte, simplifying software and hardware design.
What is an alpha channel and why does 32-bit colour use one?
A 32-bit colour scheme uses the same 24 bits for RGB and adds an extra 8 bits for an alpha channel, which stores transparency information. An alpha value of 0 means fully transparent; 255 means fully opaque. This allows images to have smooth, partially transparent edges — essential for icons, logos, and web graphics overlaid on backgrounds. The PNG format supports a full alpha channel; JPEG does not.
How does colour depth affect video files?
Video is a sequence of images (frames). Each frame has the same colour depth as a still image, so the file size calculation extends to: Width × Height × Colour depth × Number of frames. A one-minute video at 1920 × 1080 pixels, 24-bit colour, and 30 frames per second has roughly 179 billion bits of uncompressed data — about 22 GB. Video compression (H.264, H.265) reduces this to tens or hundreds of megabytes by exploiting similarity between frames.
What is the difference between additive and subtractive colour models?
RGB is an additive model used for screens: you start with black (no light) and add red, green, and blue. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model used in printing: you start with white paper (all light reflected) and subtract colours by layering inks. Computers use RGB internally; when they send a document to a printer, a colour conversion step translates RGB values to CMYK ink quantities.
Practise colour depth calculations and RGB conversions with Professor Turing's worked-example guidance at aitutors.me.