Graphics: Calculating Color

Build Materials (For each team)

Required Materials

• Access to the Internet to watch videos, and to use an online color picker in groups of 3-6. If you only have one teacher station available, students can take turns using it while others do the hexadecimal activity. See the Digging Deeper Section.
• Magenta, yellow, cyan, and black washable paint.
• 1 paintbrush per person.
• Popsicle sticks – enough for each group to share 8.
• Art paper to draw upon.
• Paper towels (for cleanup).
• Newspaper to cover work surfaces.
• Disposable bowls sufficient for each group to have four to hold paint.
• Red, green, and blue color gels, in sufficient quantities for groups of 3 -5 students to share one of each color (gels can be purchased world-wide for less than $10. Search for ‘gels’ on the Internet)
• Three flashlights per group of 3-5 students
• Rubber bands to attach gels to flashlights.
• A set of used CMYB color printer cartridges (e.g. cyan, magenta, yellow, black). Alternatively, open up a printer to view the cartridges, or have an image of an ink cartridge pack

Design Challenge

You are a team of engineers given the challenge of learning about Additive and Subtractive colors and learning how to represent color in hexadecimal. You will need to find the color of an object that you select using a website and then mix paint together to match the color of your object.

Constraints

• Use only the materials provided

1. Break class into teams of 3-5.
2. Hand out the Graphics: Calculating Color worksheet, as well as some sheets of paper for sketching designs.
3. Assign pre-session homework: Ask students to bring in something colorful from nature. It can be a flower, leaf, rock, fruit, or vegetable. It should have a solid color sufficiently large enough to be matched to a color picker. If you teach in an urban environment where children truly do not have access to any natural color, be creative in your suggestions for appropriate objects, or collect samples yourself ahead of time. We used a ripe mango. The point of this exercise is to get the broadest variety of natural colors possible. Have a range of samples of your own for students who tend to forget homework.
4. Discuss the topics in the Background Concepts Section. Introduce students to:
   ● How color is created on video screens using additive color.
   ● How color is created in printers using subtractive color.
   ● The difference between additive and subtractive color.
   ● How and why additive color is represented as a single number.
   This lesson provides hands-on experiences with both additive and subtractive colors. It also exposes students to hexadecimal numbers and how they are used to represent additive color as a binary number. However, because of time constraints, the emphasis is on the hexadecimal rather than binary representations. Computer graphics tools for novices tend to focus on additive color, yet color printing is also a computer technology. Consequently, this activity involves mixing paint, using a website specified in the “Digging Deeper” Section for converting an additive color into a subtractive color.
   This lesson provides the instructions that assume minimal math skills. Depending on your class, you may decide to add some instruction on the relationship between binary and hexadecimal numbers, and possibly walk through the formulas for additive-to-subtractive conversion. Doing this is entirely optional. A resource for binary to hex conversion can be found at https://www.rapidtables.com/convert/number/how-binary-to-hex.html. RGB to CMYK conversion appears here: https://www.rapidtables.com/convert/color/rgb-to-cmyk.html
   The most expensive investment for this class is additive light sources. While there are kits available, having students construct a colored light source from a very inexpensive flashlight and colored gels reinforces the idea of a non-white light source. Ideally, 4 to 6 students should share three flashlights, and one each of red, green, and blue gels. If cost is a factor, have the entire class take turns with one or two sets of three flashlights and gels. Experiment with this before the session so you understand how brightness translates into the distance from the light-reflecting wall.
   In Part 2 students will use CMYK paint to create a swatch matching their found object color. Practice this ahead of time as well to plan the logistics of doing this with your students.
5. Review the Engineering Design Process, Design Challenge, Criteria, Constraints and Materials.
6. Complete Part 1
   1. Select one of the videos listed in the “Digging Deeper” Section on additive and subtractive color. Review the concepts with your students. When they look at their found object, ask them whether they are seeing additive or subtractive color. Ask them informally to predict which colors the objects are absorbing, and which colors are being reflected.
   2. Explain to your students that when an image is constructed on a video screen, whether it is on a phone or a movie screen, millions of points of light (pixels) are lit, depending on which color is stored in the computer’s memory, corresponding to that position on the screen.
   3. Show them a set of spent printer cartridges. Explain that when color is transferred to a printed page, the colors are translated in combinations of the CMYK colors.
   4. Point students to Worksheet 1 Matching Natural Colors. In teams of 3-6 direct your students to the following website: http://www.rapidtables.com/web/color/RGB_Color.htm They should try to match the color of each of their found objects with a color sample. Direct them to write down the RGB numbers and the hexadecimal number (#). Ignore the HSV numbers. Demonstrate how to construct the three colored flashlights and create an additive color.
   5. Point students to Worksheet 2 Colors in Hexadecimal. This assignment is not nearly as interesting as the color picker, but explain that it is necessary to understand how hexadecimal numbers work in order to do the final activity in the Part 2. If they finish early, give them arbitrary six-place hexadecimal numbers and have them try to predict what colors will appear. Have them use the color picker to confirm their guesses.
   
7. Complete Part 2
   1. Reassemble groups of students and have them go to the website on Worksheet 3 Subtractive Color.
   2. Distribute the following materials to each group:
   a. Newspaper to cover work surfaces.
   b. Four disposable bowls, filled with one each of the CMYK colors.
   c. Two popsicle sticks per bowl to use to measure out paint.
   d. One piece of art paper per student (have extras for restarts).
   e. One paint brush per person.
   3. Instruct students to use the art supplies to draw a swatch approximately 4 X 4 inch (10 X 10 cm) in the color of their found object. Refer back to Worksheet 1. Demonstrate how to measure out approximately the right amount of each paint color using the Popsicle sticks. (See Worksheet 2 for calculating the parts.) Supervise this activity because these are middle school students with rich imaginations.
   4. As students complete their swatch, begin to organize a color wheel, eyeballing adjacent colors. Make sure each swatch includes the hexadecimal number of the color.
   5. When everyone has completed their swatch, have a discussion about the relationship between the position on the color wheel and the hexadecimal number. Remind students that the two high- order digits are red, the middle two digits are green, and the two low- order digits are blue. Discuss the relationship between the RGB and CMYK numbers and their position on the wheel.
   
8. For more content on the topic, see the “Digging Deeper” section.

The lesson can be done in as little as 1 class period for older students. However, to help students from feeling rushed and to ensure student success (especially for younger students), split the lesson into two periods giving students more time to brainstorm, test ideas and finalize their design. Conduct the testing and debrief in the next class period.

Additive and Subtractive Color and Hexadecimal Coding 

Challenging the Way You Think about Color

Back in Kindergarten you learned that there are three primary colors (red, blue, yellow), and three secondary colors that can be mixed from the primaries. Do you remember what they are? If you’ve done any coding or web design you may have noticed that video graphics use red and blue, but instead of yellow, they use green (RGB).

If you’ve ever replaced the printer cartridges in a color printer you may have noticed that primary colors are magenta, cyan, yellow, and black (CMYK). What’s going on here? Which set of colors is the right set? It turns out that all of them have a purpose. Artists used Red/Yellow/Blue for centuries to capture the colors in nature. More recently in professional printing they were replaced by CMYK that gives a more accurate color match with modern printing equipment. RGB is used to produce colors on video screens ranging from mobile phones to huge high definition televisions.

In this lesson you will see that computer graphics use RGB when color is displayed on a screen, and it uses CMYK when color is printed on a surface such as paper. Some definitions will help.

Additive Color

RGB produces additive color. A video screen has millions of little points of light called pixels. Each pixel can be lit with a combination of red, green, and blue light. You add color and brightness to produce a color. To light those pixels faster than the eye can see, every pixel’s information is stored in the computer’s memory. The code that fills the screen with color runs through that memory grabbing one color at a time.

Representing Color in Hexadecimal

Modern computers including smart phones such as iPhones, have 64-bit memory. Imagine a row of 64 ones and zeros to keep track of one color. Those 64 bits each hold a binary number (a 1 or 0). Because human brains have trouble with binary numbers, RGB color is represented in Base 16. Using logic, the computer can quickly take this number and convert it into red, green, or blue, parts. This will make more sense as you do the activities in this lesson.

Subtractive Color

CYMK color is used when you mix pigments together on a surface, such as paper. You will have an opportunity to experience this as well. The color you apply to the surface absorbs some of the color and only reflects back the color you see. It subtracts out the color that you don’t see. This too, will make more sense as you do the activities.

Internet Connections

• http://www.worqx.com
• http://www.w3schools.com
• https://www.youtube.com
• http://www.rapidtables.com
• http://www.rapidtables.com

Recommended Reading

• https://en.wikipedia.org/wiki/RGB_color_model (For the teachers)
• http://munsell.com/color-blog/history-of-color-systems/
• https://en.wikipedia.org/wiki/RYB_color_model
• https://en.wikipedia.org/wiki/Color_wheel

Writing Activity

When you were very small, you learned about the primary colors ‘red’, ’yellow’, ‘blue’, and the secondary colors ‘orange’, ‘green’, ‘purple’. Explain how those compare to additive and subtractive colors. Make a case for whether they are more like additive or subtractive colors. Cite your sources if you research the answer.

Alignment to Curriculum Frameworks 

Note: All lesson plans in this series are aligned to the Computer Science Teachers Association K-12 Computer Science Standards, and if applicable also the U.S. Common Core State Standards for Mathematics, the U.S. National Council of Teachers of Mathematics’ Principles and Standards for School Mathematics, the International Technology Education Association’s Standards for Technological Literacy, the U.S. National Science Education Standards and the U.S. Next Generation Science Standards.

National Science Education Standards Grades 5-8 (ages 10-14)

CONTENT STANDARD E: Science and Technology

As a result of activities, all students should develop

• Understandings about science and technology 

Next Generation Science Standards & Practices Grades 6-8 (ages 11-14)

Practice 2: Generating and Using Models

• Develop and/or use a model to generate data to test ideas about phenomena in natural or designed systems, including those representing inputs and outputs, and those at unobservable scales.

Practice 5: Using Mathematics and Computational Thinking

• Use mathematical representations to describe and/or support scientific conclusions and design solutions.

Practice 6: Constructing Explanations and Designing Solutions

• Construct an explanation using models or representations

Principles and Standards for School Mathematics (all ages)

Problem Solving Standards

• Solve problems that arise in mathematics and other contexts

Communication Standards

• Communicate their mathematical thinking coherently and clearly to peers, teachers and others 

Representations 

• Use representations to model and interpret physical, social, and mathematical phenomena

Common Core State Practices & Standards for School Mathematics

• CCSS.MATH.PRACTICE.MP1 Make sense of problems and persevere in solving them.
• CCSS.MATH.PRACTICE.MP4 Model with mathematics.
• CCSS.MATH.PRACTICE.MP5 Use appropriate tools strategically.

Standards for Technological Literacy – all ages

Nature of Technology

• Standard 2: Students will develop an understanding of the core concepts of technology

The Designed World

• Standard 17: Students will develop an understanding of and be able to select and use information and communication technologies

CSTA K-12 Computer Science Standards Grades 6-9 (ages 11-14)

5. 2 Level 2: Computer Science and Community (L2)

• Computational Thinking: (CT)

14. Examine connections between elements of mathematics and computer science including binary numbers, logic, sets and functions.

• Collaboration (CL)

3. Collaborate with peers, experts, and others using collaborative practices such as pair programming, working in project teams, and participating in group active learning activities.

• Computing Practice & Programming (CPP)

1. Select appropriate tools and technology resources to accomplish a variety of tasks and solve problems.
2. Use a variety of multimedia tools and peripherals to support personal productivity and learning throughout the curriculum.

Lesson Plan Translation

[language-switcher]