Paleta · How screens store colour

A pixel is three lights

Your screen has no yellow in it. Each pixel is three tiny lights, red, green and blue, and each one’s brightness is a number from 0 to 255. Mix 242 red, 194 green and 48 blue and your eye sees jeepney yellow.

Two lights at full strength make a secondary colour: red and green make yellow, green and blue make cyan, blue and red make magenta. All three at 255 make white; all three at 0, black. Try each one.

The light you can see is a narrow band of wavelengths, from about 400 nm (violet) to 700 nm (red). Real yellow light sits near 580 nm, but your screen never makes it: it mixes red and green until the cone cells in your eye respond the same way.

Mix one pixel

8 bits × 3 channels = 24 bits

Additive: light adds up

Red channel (0-255)

Green channel (0-255)

Blue channel (0-255)

HEX

#F2C230

rgb(242,194,48)

A laptop LCD screen magnified 300 times: rows of separate red, green and blue stripes on a black grid, three stripes to each pixel. — A real screen, 300 times closer: on this laptop panel every pixel is a red, a green and a blue stripe. Photo: Akpch, Wikimedia Commons, CC BY-SA 3.0; cropped, and shared under the same licence.

Same colour, five names

RGB, HEX, HSL, HSV and CMYK are five ways of writing down one colour. HEX is RGB in base 16. HSL says it the way people talk: which hue, how vivid, how light. HSV (also called HSB) keeps the hue but swaps lightness for value: 100% value is the pure colour, not white. CMYK is subtractive, ink on paper, so it can only approximate a colour made of light.

Drag the handle on the wheel, or type into any row.

Colour models

SVG wheel

Arrow keys: left and right turn the hue, up and down change saturation. Hold Shift for steps of 10.

Lightness (0-100%)

Model	Value
RGB	Additive light, for screens
HEX	RGB in base 16
HSL	Hue angle, saturation, lightness
HSV	Hue, saturation, value (HSB)
CMYK	Approximate: subtractive ink, for print Real CMYK print under magnification: the colour is made of cyan, magenta, yellow and black dots. Photo: Psiĥedelisto, Wikimedia Commons, CC0.

Colours that go together

Colour theory lays the hues out on a wheel. A colour scheme is a rule for picking hues by where they sit on it: complementary colours face each other, analogous colours sit side by side, triadic colours are spread evenly in thirds. Designers use these rules so colours look chosen, not random.

Pick a scheme, then turn the base hue. It starts at jeepney yellow, 45°.

Bits decide how many colours

Every bit you add doubles the values a pixel can hold: n bits give 2ⁿ. One bit is two values, black or yellow. Four bits give sixteen steps, and you can see every one. Twenty-four bits, eight per channel, give over sixteen million colours, more than the eye can separate.

colours = 2ⁿ

Cut the bits

24-bit reference

4-bit: 16 levels

Bits	Levels per channel	Total colours (2ⁿ)
1-bit	2	2
2-bit	4	4
4-bit	16	16
8-bit	256	256
24-bit (8 × 3)	256	16,777,216

1- to 8-bit rows are one channel (greyscale or a palette index). 24-bit is three 8-bit channels: 2²⁴.

Read the histogram

A histogram counts how many pixels sit at each brightness level, from black on the left to white on the right. It is the quickest way to judge a photo’s exposure: a well-exposed shot spreads across the whole range, a badly exposed one piles up at one end.

Switch the exposure and watch where the pixels go.

Squeeze the jeepney

Quantization keeps a small palette and repaints every pixel with its nearest match. Drag the divider across the jeepney: the left side is the original, the right is what survives. Fewer colours means fewer symbols to encode, so the file compresses better.

Uniform cuts every channel into equal steps. Median cut splits the photo’s own colours into boxes of equal population, so it spends colours where the photo needs them.

24 shades in the photo

snap to a 4-colour palette, and redraw the gradient as

Without dithering: four flat bands

With Floyd-Steinberg dithering: the same four colours, scattered

Uniform vs median cut

Uniform cuts every channel into equal steps. Median cut splits the photo’s own colours into boxes of equal population.

Before: original, 24-bit After: 16 colours, median cut

JPG, PNG or WebP, chosen or dropped on the image. It never leaves your browser.

Controls

Colours (2-256)

Method

Dithering

Palette (LUT): 16 entries

16 colours used, 4 bits per pixel, est. size …

Estimated size is the raw indexed pixels plus the palette, before any compression.

The same jeepney saved as a 256-colour indexed PNG: at this size it looks almost identical to the original — A real file: jeepney-256.png

The slider above is a live preview. This is the jeepney actually saved with a 256-colour palette (median cut, no dithering): every pixel is one 8-bit index into that palette. Saved as a 24-bit PNG the same 750 × 500 image weighs 683 KB; indexed, it is 227 KB, a third of the size, and the eye barely notices.

Hear quantization

Sound is quantized too. Each sample of a wave is a number, and bit depth decides how many values it can take. Cut the bits and the smooth wave becomes a staircase you can hear as fizz and grit. Link the slider to the jeepney and one number drives both.

The tone never plays on its own; press Play.

Crush the bits

<audio> + Web Audio

Recorded demo (native <audio>)

One A-major arpeggio played seven times, at 16, 8, 6, 4, 3, 2 and finally 1 bit. Listen for the hiss creeping in from 4 bits down.

Live tone: 440 Hz sine, Web Audio

Stopped

Sound bit depth (1-16)

Synced with 06, Squeeze the jeepney (16 colours = 4 bits)

4 bits: 16 levels, staircase

Technical Media Spec

Every media file on this page: what it weighed before and after, how many colours or bits it keeps, and how it was squeezed.

Scroll sideways →

Asset Name & File Format	Original Size → Compressed	Color Depth / Quantization	Compression Algorithm
jeepney-hero.webp WebP · hero and quantizer	4.3 MB raw bitmap (1500 × 1000 × 3 bytes) → 190 KB WebP (q80)	24-bit RGB, 8 bits per channel	WebP lossy: block prediction and transform coding, then entropy coding
saigon-sky.webp WebP · 3:2 crop, banding sample in 06	1.8 MB JPEG original (1932 × 2576) 4.3 MB raw bitmap (1500 × 1000 × 3) → 189 KB WebP (q80)	24-bit RGB, 8 bits per channel	WebP lossy: block prediction and transform coding, then entropy coding
subpixels-300x.webp WebP · 2:1 crop, subpixel photo in 01	131 KB JPEG original (1280 × 1024) 2.3 MB raw bitmap (1280 × 640 × 3) → 28 KB WebP (q90)	24-bit RGB, 8 bits per channel	WebP lossy: block prediction and transform coding, then entropy coding
cmyk-halftone.webp WebP · 1:1 centre crop, halftone photo in 02	2.0 MB JPEG original (1600 × 1200) 1.1 MB raw bitmap (720 × 540 × 3) → 140 KB WebP (q80)	24-bit RGB, 8 bits per channel	WebP lossy: block prediction and transform coding, then entropy coding
jeepney-256.png PNG-8 · quantized sample	683 KB as 24-bit PNG → 227 KB as 8-bit indexed PNG	8-bit indexed: 256-colour palette (median cut)	PNG: DEFLATE (LZ77 + Huffman coding), lossless
crusher-demo.mp3 MP3 · #hear demo	886 KB WAV (16-bit PCM, 44.1 kHz) → 121 KB MP3 (96 kbps)	16-bit PCM source, mono; the demo itself steps down from 16 to 1 bit	MP3: perceptual MDCT coding + Huffman coding, lossy
colour-wheel.svg SVG · #models wheel	27.5 KB as written → 6.2 KB gzipped	Vector; 360 hue wedges, each a 24-bit HEX fill	Plain-text XML, compressed in transit with gzip (DEFLATE: LZ77 + Huffman)

Sizes measured from the files in assets/. “Raw bitmap” is width × height × 3 bytes, what the image costs in memory before any compression.

Every colour on your screen is a number.