Lesson What Makes Up a Color?

Learning Objectives

After this lesson, students should be able to:

• Explain what a digital image is.
• Explain what pixels are.
• Convert the RGB value of a pixel to hexadecimal.
• Give specific examples of how engineers need this information to solve problems.

Tennessee State Standards for C++ Programming Applications (2005)

• Standard 1.0 - The student will demonstrate proficiency in the background knowledge of computers and programming.

Educational Standards

Each TeachEngineering lesson or activity is correlated to one or more K-12 science, technology, engineering or math (STEM) educational standards.

All 100,000+ K-12 STEM standards covered in TeachEngineering are collected, maintained and packaged by the Achievement Standards Network (ASN), a project of D2L (www.achievementstandards.org).

In the ASN, standards are hierarchically structured: first by source; e.g., by state; within source by type; e.g., science or mathematics; within type by subtype, then by grade, etc.

NGSS: Next Generation Science Standards - Science

International Technology and Engineering Educators Association - Technology

Introduction/Motivation

What do you know about computer images? What is a pixel? (Listen to student responses.)

In this lesson, you will learn how a computer image is composed. You will come to understand that colors of an image are stored in a component called RGB, which can be broken down into individual components that can be used to find the average of pixels surrounding a blank data point in an image.

Through this lesson, we will begin to connect the outside information we have learned so far to applications in the computer science field. Gaining this understanding is crucial to finding the solution to the Grand Challenge.

Lesson Background and Concepts for Teachers

This lesson covers the research and revise section of the Legacy Cycle. Following the lesson and activity, students should revise their initial brainstorming thoughts in order to begin to focus on specific plausible solutions to the challenge question by eliminating ideas that are based on incorrect science or are not efficient or possible. Students should form a strong base about what kind of data they need to gather/store/manipulate from which to analyze data storage before beginning to write code. The associated activity RGB to Hex Conversion enables students to "test their mettle" through formative assessment to make sure that they have gained this knowledge.

Information for teachers to include in lecture:

Digital Images:

• A digital image is a two-dimensional image represented in binary (0s and 1s) format. It is usually a raster image.
• Raster images are composed of pixels ("picture elements"), which are the building blocks of the image. Each pixel represents the brightness of a color at that point. In computer memory, pixels are stored as two-dimensional arrays of integers.
• Digital images are often classified according to the nature of the pixels (for example: grayscale image, color image).

Converting RGB to Hexadecimal:

• In the RGB model for color (an acronym for red, green, blue), each color is represented by three numbers ranging from 0 to 255, indicating the amount of red, green and blue in the color. Examples: 0, 0, 0 is black and 255, 255, 255 is white.
• Divide the three numbers by 16. Use the equations: (1) R/16 = x + y/16, (2) G/16 = x' + y'/16, (3) B/16 = x'' + y''/16. Write down x, y, x', y', x'', y'' in base 16.
• In base 16, the digits used are 0-9 and then A-F (A represents 10, B represents 11, F represents 15, etc.). For example, if y' was 12, you would write down C for y'.
• Example: one shade of purple is 80, 6, 143 in RGB, which becomes 50068F in hex since: 80/16 = 5 + 0/16, 6/16 = 0 + 6/16, 143/16 = 8 + 15/16. Thus x, y, x', y', x'', y'' becomes 5,0,0,6,8,15, which becomes 50068F in hexadecimal.
• Example: a particular shade of red is 182, 0, 35 in RGB, which is B60023 in hex since: 182/16 = 11 + 6/16, 0/16 = 0 + 0, 35/16 = 2 + 3/16.
• Averaging: To find the value of a central pixel based on the pixels surrounding it, average the 8 values surrounding the central pixel by color. In other words, average all of the red values, all of the green values, and all of the blue values individually. These three averages return the red, green and blue values of the central pixel.

Engineering Application:

• For engineers, it is important to learn many different kinds of conversions, whether looking at length conversions between centimeters and inches or pixel colors between RGB and hex. Not all materials, equipment or programs use the same units or systems, and often conversions must be made either to make one piece of equipment compatible with another or to convert information given into useful or convenient units for equipment or calculation.
• In this specific case, it is important for computer science engineers to know RGB and hex conversions because some programming languages are more compatible with RGB, while others are more compatible with hex. So whether for convenience or necessity, computer engineers must know both RGB and hex formats and be comfortable converting between them.

Associated Activities

• RGB to Hex Conversion - Students practice converting between RGB and hexadecimal (hex) formats. They learn about mixing primary colors to get the full spectrum of colors, and how to average pixel values.

  Watch this activity on YouTube

Vocabulary/Definitions

digital image: An image represented in binary.

pixel: One of the small discrete elements that constitute a digital image.

raster image: An image composed of pixels.

Assessment

Pre-Lesson: Ask students a few questions to assess their baseline understanding of the lesson topics. For example: What do you know about digital images? What is a pixel?

Post-Lesson: After completion of the associated activity, assess students on their comprehension of the lesson topics through the activity's RGB to Hex Conversion Worksheet.

References

Copyright

Contributors

Supporting Program

Acknowledgements

The contents of this digital library curriculum were developed under National Science Foundation RET grant nos. 0338092 and 0742871. However, these contents do not necessarily represent the policies of the NSF, and you should not assume endorsement by the federal government.