Lesson What Makes Up a Color?

Quick Look

Grade Level: 12 (11-12)

Time Required: 30 minutes

Lesson Dependency:

Subject Areas: Computer Science

NGSS Performance Expectations:

NGSS Three Dimensional Triangle

Photo of a portion of a computer monitor up close, showing pixels formed into letters and words.
Plenty of pixels.
Copyright © 2004 Microsoft Corporation, One Microsoft Way, Redmond, WA 98052-6399 USA. All rights reserved.


As a part of the research and revise step of the Legacy Cycle, this lesson provides students with information they will need later on to be able to average pixels to simulate blurring in the peripheral plane of vision. Students learn why image color becomes important as we distort the outer boundaries of an image and have to interpolate pixels to fill in gaps created from our algorithm. Students learn what a digital image is, what pixels are, and how to convert between RGB and hexadecimal values.
This engineering curriculum aligns to Next Generation Science Standards (NGSS).

Engineering Connection

A digital image is a type of digital signal. The field of digital signal processing is a primary sub-field of electrical engineering and is applicable to many areas. Two such areas are medical imaging and communications (transmission of data). The hexadecimal number system is often used in the computer science and computer engineering fields as an alternative way to represent numbers.

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 Performance Expectation

HS-ETS1-4. Use a computer simulation to model the impact of proposed solutions to a complex real-world problem with numerous criteria and constraints on interactions within and between systems relevant to the problem. (Grades 9 - 12)

Do you agree with this alignment?

Click to view other curriculum aligned to this Performance Expectation
This lesson focuses on the following Three Dimensional Learning aspects of NGSS:
Science & Engineering Practices Disciplinary Core Ideas Crosscutting Concepts
Use mathematical models and/or computer simulations to predict the effects of a design solution on systems and/or the interactions between systems.

Alignment agreement:

Both physical models and computers can be used in various ways to aid in the engineering design process. Computers are useful for a variety of purposes, such as running simulations to test different ways of solving a problem or to see which one is most efficient or economical; and in making a persuasive presentation to a client about how a given design will meet his or her needs.

Alignment agreement:

Models (e.g., physical, mathematical, computer models) can be used to simulate systems and interactions—including energy, matter, and information flows—within and between systems at different scales.

Alignment agreement:

  • Assess how similarities and differences among scientific, mathematical, engineering, and technological knowledge and skills contributed to the design of a product or system. (Grades 9 - 12) More Details

    View aligned curriculum

    Do you agree with this alignment?

Suggest an alignment not listed above


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


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.


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.


Get the inside scoop on all things TeachEngineering such as new site features, curriculum updates, video releases, and more by signing up for our newsletter!
PS: We do not share personal information or emails with anyone.

More Curriculum Like This

High School Activity
RGB to Hex Conversion

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


Cardillo, David. "RGB-Hexadecimal Color Conversion." Last updated September 9, 1996. Astoria, NY. Accessed 27 July 2009. http://gristle.tripod.com/hexconv.html

"Pixel." Merriam-Webster Online Dictionary. 2009. Merriam-Webster, Inc. Accessed 16 July 2009. http://www.merriam-webster.com/dictionary/pixel


© 2013 by Regents of the University of Colorado; original © 2010 Vanderbilt University


Mark Gonyea; Anna Goncharova; Rachelle Klinger

Supporting Program

VU Bioengineering RET Program, School of Engineering, Vanderbilt University


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.

Last modified: July 3, 2019

Free K-12 standards-aligned STEM curriculum for educators everywhere.
Find more at TeachEngineering.org