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. Width, height, and depth each get their own box below, so editing one never shifts the others.
Width = 8 bits · Height = 8 bits ·
Color depth = 8 bits · then pixel data, depth bits per pixel (split evenly across R, G, B), row by row.
Encoder / Decoder
Each header value gets its own 8-bit box — edit one without disturbing the others. Pixel data goes in the box below. It decodes live into hex and into the image below.
#width 8
#height 1
#depth 3
Your Turn: 5 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.
🔗 Try the Bit-Depth Color Lab to see, bit by bit, why the same 24 bits read as one 24-bit color (8+8+8) look totally different from two separate 12-bit colors (4+4+4 each).
Not imported yet
Not imported yet
5. Design Something! 🎨
Now make it yours. Build any image at least 6 × 6 pixels, using any color depth that's a multiple of 3 (so it splits evenly across R/G/B). Draw a face, a flag, pixel art, a pattern — anything with real color in it.
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.