Mixing RGB Colors
How does your phone or TV screen create millions of different colors when it only uses three types of tiny lights? By mixing them! In this mission, you’ll become a digital artist and color scientist. You’ll take control of the three primary colors of light—Red, Green, and Blue (RGB)—using three separate knobs to mix any color you can imagine and master the digital rainbow.
Color theory; Rgb; Potentiometer; Main loop; Analog input; Color mixing
Are you a teacher?
Courses
- Grades 3-12
Materials
- Cell phone, tablet, or computer
- Internet connection
Educational Objectives
- Understand the concept of color and how it is represented digitally (RGB).
- Create a technological object (prototype) using a device.
- Identify relationships between technology and the surrounding world.
- Evaluate personal and others’ work individually or in a team.
- Engage in dialogue and reflection on ideas for improvement.
Start (10 minutes) - The Science of Color
- Welcome students and introduce the day’s activity: “Today, we will learn how screens create every color you’ve ever seen.”
- Ask a guiding question: “How do you think your eyes see the color of an apple? And how is that different from how a screen creates color?”
- This discussion will naturally lead to the idea of reflected light versus emitted light. Explain that screens work by adding light together, which is the perfect time to introduce the two main color models: Additive (for screens) and Subtractive (for print).
How do we see colors?
When light hits an object, like an apple, the object’s surface absorbs most of the light but reflects some of it. Our eyes see this reflected light. If we see a red apple, it means its skin is absorbing all colors except for red. The red light bounces off, reaches our eyes, and our brain says, “That’s red!”
How do we mix colors?
To create colors with light, we have to mix different rays of light. If we mix all the colors of light together, we get pure white light. The total absence of light is black. You can see this in nature! After it rains, tiny water droplets in the air can act like prisms and separate white sunlight into all its component colors, creating a rainbow!
Subtractive Synthesis (Paint & Ink)
In this model, the color of an object depends on the light it reflects. The primary colors are Cyan, Magenta, and Yellow. Because this model works by subtracting (absorbing) light, mixing all three colors results in Black. This model is used for things that don’t emit their own light, like photo printing, dyes, and paints.
Additive Synthesis (Screens & Light)
In this model, color is created by adding different lights together. The primary colors are Red, Green, and Blue (RGB).
- Red + Green = Yellow
- Green + Blue = Cyan
- Red + Blue = Magenta Since we are mixing pure light, combining all three at full intensity results in White Light. This model is used for all screens, like TVs, phones, and computer monitors.
How does a monitor use RGB?
Your screen is made of millions of tiny dots called pixels. Each pixel is actually a team of three even tinier LEDs: one Red, one Green, and one Blue. To create a specific color for that one pixel—say, purple—the screen tells the red and blue LEDs to light up brightly, and the green one to stay dim. Multiply that process by millions of pixels, and you get a full, rich image!
Development (20-30 minutes) - Mixing the Rainbow
- Now that the students have a solid understanding of RGB color theory, it’s time to put it into practice and become digital color mixers.
- Lead them through the instructions for setting up their three-knob controller and programming the color-mixing logic, as detailed in the hands-on section below. This is a great exercise in managing multiple real-time inputs at once.
Closure (5-10 minutes) - Becoming a Color Expert
- Once everyone is experimenting with creating different colors, bring the group back together for a final reflection on what they’ve learned.
- Use the final section to reinforce the core concepts of color theory and to challenge them to create a lamp that changes color automatically, without any knobs at all.
Reflect
You are now a master of the digital rainbow!
- What are the RGB ‘recipes’ for some of your favorite colors, like orange, pink, or teal? Experiment and find out!
- When you’re editing a photo on an app, are you using the Additive or Subtractive color model? What about when you’re mixing paint for an art project?
How do we see colors?
When light hits an object, like an apple, the object’s surface absorbs most of the light but reflects some of it. Our eyes see this reflected light. If we see a red apple, it means its skin is absorbing all colors except for red. The red light bounces off, reaches our eyes, and our brain says, “That’s red!”
How do we mix colors?
To create colors with light, we have to mix different rays of light. If we mix all the colors of light together, we get pure white light. The total absence of light is black. You can see this in nature! After it rains, tiny water droplets in the air can act like prisms and separate white sunlight into all its component colors, creating a rainbow!
Subtractive Synthesis (Paint & Ink)
In this model, the color of an object depends on the light it reflects. The primary colors are Cyan, Magenta, and Yellow. Because this model works by subtracting (absorbing) light, mixing all three colors results in Black. This model is used for things that don’t emit their own light, like photo printing, dyes, and paints.
Additive Synthesis (Screens & Light)
In this model, color is created by adding different lights together. The primary colors are Red, Green, and Blue (RGB).
- Red + Green = Yellow
- Green + Blue = Cyan
- Red + Blue = Magenta Since we are mixing pure light, combining all three at full intensity results in White Light. This model is used for all screens, like TVs, phones, and computer monitors.
How does a monitor use RGB?
Your screen is made of millions of tiny dots called pixels. Each pixel is actually a team of three even tinier LEDs: one Red, one Green, and one Blue. To create a specific color for that one pixel—say, purple—the screen tells the red and blue LEDs to light up brightly, and the green one to stay dim. Multiply that process by millions of pixels, and you get a full, rich image!
Let’s Play with Colors!
Let’s create a prototype that allows us to mix and create any color of light.
We’ll need 4 components: 1 lamp to show the color, and 3 knobs to control each primary color (Red, Green, and Blue).
1
Press ✙ Add device, select Lamp, and press Open in this window.
2
Press ✙ Add device, select Knob, and scan the ▣ QR code with a smartphone to control the red color.
3
Add two more Knob components on two other smartphones to control the green and blue colors.
We are ready to start prototyping!
Code Composition
Click on the question mark icon to open the comments that explain the code.
Reflect
You are now a master of the digital rainbow!
- What are the RGB ‘recipes’ for some of your favorite colors, like orange, pink, or teal? Experiment and find out!
- When you’re editing a photo on an app, are you using the Additive or Subtractive color model? What about when you’re mixing paint for an art project?
Challenge: Let’s create a lamp that gradually cycles through all the colors of the rainbow on its own, without being controlled by knobs!
Hint: You could use loops and variables to slowly increase and decrease the values for Red, Green, and Blue over time.