Color images are just three grayscale images stacked together — red, green, and blue. The more bits you spend per channel, the more shades you can represent. Explore that below, then encode some color images of your own.
Explore: RGB Bit Depth
Change the bit depth and watch how many distinct shades each channel can represent.
0
0
0
Hex:RGB:Decimal:Binary:
The Format
Same header as before, but now color depth must be a multiple of 3 — the bits split evenly across red, green, and blue.
First 8 bits = width · next 8 bits = height ·
next 8 bits = color depth · then = pixel data, depth bits per pixel (split evenly across R, G, B), row by row.
Encoder / Decoder
Type binary on the left. It decodes live into hex and into the image below.
Your Turn: 4 Color Tasks
Edit the binary above for each task, watch it render, then click Import to lock it in. Re-import as many times as you like — only your last import per task counts.
1. Eight Unique Colors
Make an 8 × 1 grid. Set color depth to 3 (1 bit/channel). Give each of the 8 pixels a different color.
Not imported yet
Not imported yet
2. Shades of Red
Make a 4 × 1 grid. Set color depth to 6 (2 bits/channel). Show all 4 shades of red (green and blue at 0).
Not imported yet
Not imported yet
3. Red / Green / Blue / Gray Grid
Make a 4 × 4 grid. Set color depth to 12 (4 bits/channel). Row 1: red shades. Row 2: green shades. Row 3: blue shades. Row 4: gray shades.
Not imported yet
Not imported yet
4. The 12-bit → 24-bit Switch
Load the 50×50 sample image below (already at 12-bit depth), watch it render, then change only the depth field to 00011000 (24) and see what happens.
Not imported yet
Not imported yet
Reflection Questions
Short answers are fine — just write real thoughts, not a placeholder.
Done with the tasks and questions? Check your work to see what's still missing and generate your certificate. You can check again anytime as you keep working — only your best grade is kept.