RGB Colour and Hex Codes
Lesson notes
Overview
Screens mix red, green and blue light; each channel is one byte. This topic is rated beginner and is number 37 of 117 in Computer Science. Core ideas and first intuitions. No prior knowledge needed.
What you are seeing
The panel above shows an interactive animation of the idea. Every slider changes one quantity so you can see its effect on the outcome. The animation is drawn live from the model, so everything you see responds to the sliders. Press Space to pause, use Restart to replay from the start, and change the speed to slow down quick events.
In depth
Screens create colours by mixing red, green and blue light, and each channel is stored in one byte with values 0 to 255. A colour is written in hexadecimal as #RRGGBB: #FF0000 is pure red, #00FF00 green, #FFFFFF white and #000000 black. That gives 256³, about 16.7 million colours. Equal values in all three channels produce greys. Web designers use hex codes, and often add an alpha channel for transparency.
Reading the relationship
The expression "#RRGGBB" is a compact summary of the idea. It uses the symbols R, G, B; name what each one stands for before you start. Then use the sliders to see how changing one quantity changes the others.
A guided exploration
1. Run the animation once with the default settings and describe in words what happens. 2. Change one slider at a time and note which quantity responds most. 3. Push each slider to its extreme and decide whether the result still makes sense.
Try this
Start by only moving one slider at a time. Say aloud what you expect, then check.
Common pitfalls
Test small inputs by hand and then the largest ones. Off-by-one errors and forgetting how cost grows with input size are the most common traps.
How it connects
It builds on “ASCII and Text Encoding”, the topic before it in Computer Science. Once you are comfortable, continue with “Colour Depth and Quantisation”.
Why it matters
Computing ideas decide how fast, how safely and how well software can solve problems.
Where you might use it
- Revising “RGB Colour and Hex Codes” before a class, exam or certification
- Choosing the right algorithm or data structure when writing software or apps
- Debugging programs and judging how fast or how safely code will run at scale
- Understanding how search engines, games, phones and AI systems make decisions
Frequently asked questions
What is RGB Colour and Hex Codes?
Screens mix red, green and blue light; each channel is one byte. It is a beginner topic in Computer Science.
How do I use the RGB Colour and Hex Codes simulation?
The panel at the top shows an interactive animation of the idea. Every slider changes one quantity so you can see its effect on the outcome. Move the sliders one at a time, then press Space to pause the animation and look closer.
What does the formula mean?
The expression #RRGGBB packs the idea into symbols. Name each symbol first, then change one quantity with the sliders and see which others respond.
Who is this topic for?
Core ideas and first intuitions. No prior knowledge needed. If the quiz feels hard, reread the lesson notes and try the previous topic first.
What should I learn before this?
Start with “ASCII and Text Encoding”, the previous topic in Computer Science. Each topic in a subject builds on the ones before it.
How do I track my progress?
Press “Mark as learned” on this page. Progress is stored only in this browser and is never sent anywhere. The Browse page can show topics you have learned or still need to learn.