Lesson: What Makes Up a Color?

Contributed by: VU Bioengineering RET Program, School of Engineering, Vanderbilt University

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

Summary

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 meets 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.

More Curriculum Like This

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.

High School Activity
Hidden in Plain Sight

hrough this lesson, students experience a portion of the engineering design process as they research steganography and steganographic methods; identify problems, criteria and constraints; brainstorm possible solutions; and generate ideas.

High School Lesson
Exploring Nondestructive Evaluation Methods

Students learn about nondestructive testing, the use of the finite element method (systems of equations) and real-world impacts, and then conduct mini-activities to apply Maxwell’s equations, generate currents, create magnetic fields and solve a system of equations. They see the value of NDE and FEM...

Statistical Analysis of Flexible Circuits

Students are introduced to the technology of flexible circuits, some applications and the photolithography fabrication process. They are challenged to determine if the fabrication process results in a change in the circuit dimensions since, as circuits get smaller and smaller (nano-circuits), this c...

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.

  • 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) Details... View more aligned curriculum... Do you agree with this alignment?
  • Technological innovation often results when ideas, knowledge, or skills are shared within a technology, among technologies, or across other fields. (Grades 9 - 12) Details... View more aligned curriculum... Do you agree with this alignment?
Suggest an alignment not listed above

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 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.

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.

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.

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

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

Contributors

Mark Gonyea; Anna Goncharova; Rachelle Klinger

Copyright

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

Supporting Program

VU Bioengineering RET Program, School of Engineering, Vanderbilt University

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.

Last modified: September 7, 2017

Comments