RGB: how screens make colour
Your eye has three kinds of colour sensors: for red, green and blue light. A screen copies this. Every tiny dot (pixel) has three small lights: R, G and B. By making each light brighter or dimmer, the pixel shows any colour.
- Red + Green = yellow
- Green + Blue = cyan
- Red + Blue = magenta
- Red + Green + Blue (all full) = white
- All off = black
This is called additive mixing, because adding more light makes the colour brighter.
Colour numbers: 0 to 255, bytes and hex codes
Each of R, G and B gets 1 byte (8 bits). A byte can hold 0 to 255. So one pixel needs 3 bytes = 24 bits. This is called 24-bit colour (or true colour).
Number of colours = 256 × 256 × 256 = 16 777 216.
Web pages write the three numbers in hexadecimal (base 16), two digits each: #RRGGBB. For example 255 is FF, 128 is 80, 0 is 00. So (255, 128, 0) = #FF8000 (orange). Equal numbers give grey: (100, 100, 100).
CMYK: how printers make colour
Paper makes no light. It only reflects it. Ink works by soaking up some colours of light. So printers use subtractive mixing with four inks: Cyan, Magenta, Yellow and Key (black).
- Cyan + Yellow = green
- Magenta + Yellow = red
- Cyan + Magenta = blue
- All three together = a muddy dark brown, so a separate black ink (K) is used for sharp text and deep dark.
Amounts are written as percentages. Orange (255, 128, 0) is about C 0%, M 50%, Y 100%, K 0%. Some bright screen colours cannot be printed exactly. That is why a printed picture can look a little duller.
HSL: describing colour the way people think
HSL gives a colour three easy numbers:
- Hue (H): the place on the colour ring, 0° to 360°. 0° red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta.
- Saturation (S): how pure. 100% is vivid, 0% is grey.
- Lightness (L): how bright. 0% is black, 50% is the normal colour, 100% is white.
Artists like HSL because "make it a little lighter" means just changing L. Orange (255, 128, 0) is H 30°, S 100%, L 50%.
Raster and vector images
A raster (bitmap) image is a grid of pixels, each with its own colour code. Photos are raster. File size = width × height × bits per pixel. Zoom in and you see blocks, because there is no more detail than the pixels.
A vector image stores shapes with numbers: a circle with centre, radius and colour; a line with two end points. The computer draws the shape fresh at any size, so it never becomes blocky. The file is usually small.
| Raster | Vector | |
|---|---|---|
| Stores | pixels | shapes |
| Zoomed in | blocky | sharp |
| Best for | photos | logos, maps, diagrams |
| Examples | JPG, PNG | SVG |
Sampling: turning sound into numbers
Real sound is a smooth wave in the air. A computer can only keep numbers. So it uses sampling: many times every second it measures the height of the wave and stores that number.
- Sample rate: measurements per second, in hertz (Hz). A music CD uses 44 100 Hz.
- Bit depth: bits for each measurement. 16 bits gives 65 536 height levels.
- Channels: mono = 1, stereo = 2.
More samples and more bits copy the wave better, but the file gets bigger. A sample rate of 44 100 Hz is enough because people hear up to about 20 000 Hz, and we need a little more than twice the highest sound to copy it well.
Size (bits) = sample rate × bit depth × seconds × channels.
Try it yourself
In the 3D: in the last step make pure yellow (255, 255, 0), then grey (all three equal). In the sampling step, slide the samples up and down and watch the orange line come closer to the blue wave.
At home: open any colour picker in a drawing app or on a web page. Type #FF0000, #00FF00, #0000FF, then #808080. Guess each colour before you press enter.
Key formulas and definitions
- Colours = 256 × 256 × 256 = 16 777 216 (24-bit)
- Pixel size = 3 bytes (24-bit colour)
- Raster size (bits) = width × height × bits per pixel
- Sound size (bits) = sample rate × bit depth × seconds × channels
- CMYK: K = 1 − max(R,G,B)/255 (then C, M, Y from what is left)
- Hex #RRGGBB: two hex digits per channel, 00 to FF
Worked examples
1. Write red (255, 0, 0) as a hex code.
255 = FF, 0 = 00, 0 = 00. So red = #FF0000.
2. How many bytes does a 200 × 100 image with 24-bit colour need?
Pixels = 200 × 100 = 20 000. Each pixel = 3 bytes. 20 000 × 3 = 60 000 bytes = 60 kB.
3. Change orange (255, 128, 0) to CMYK percentages.
K = 1 − 255/255 = 0. C = 1 − 255/255 = 0%. M = 1 − 128/255 = about 50%. Y = 1 − 0 = 100%. CMYK = (0, 50, 100, 0).
4. Find the HSL of orange (255, 128, 0).
Red is the largest and blue the smallest, so the hue lies between red (0°) and yellow (60°). Green is half-way up, so H is about 30°. The colour is pure (S = 100%), and L = (max + min) ÷ 2 = (255 + 0) ÷ 2 ÷ 255 = 50%. HSL = (30°, 100%, 50%).
5. Mono sound at 44 100 Hz, 16 bits, 10 seconds. How big is it?
44 100 × 16 × 10 = 7 056 000 bits. ÷ 8 = 882 000 bytes = 882 kB.
6. A school needs one logo for a pen and a huge flex banner. Which image type should it keep?
A vector file. It stays sharp at any size and the file is small. A raster logo would look blocky on the big banner.
Common mistakes
- Thinking red + green + blue light gives black. With light it gives white; with ink it is near black.
- Using RGB values for a printer without thinking: print jobs use CMYK, so bright screen colours may look duller.
- Mixing up pixels and bytes: one pixel in 24-bit colour is 3 bytes, not 1.
- Believing a vector image has pixels. It stores shapes; pixels appear only when it is shown on screen.