Hands-on Activity RGB to Hex Conversion

Quick Look

Grade Level: 12 (11-12)

Time Required: 15 minutes

Expendable Cost/Group: US $0.00

This activity requires access to the Internet and calculators.

Group Size: 2

Activity Dependency:

Subject Areas: Computer Science

Summary

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.

Zeros and ones float over a dark grey background.
Learning unit conversion between RGB and hexadecimal.
copyright
Copyright © 2004 Microsoft Corporation, One Microsoft Way, Redmond, WA

Engineering Connection

Red, green and blue (RGB) are the primary colors of light and it is through the use of these three colors that digital images are made. Representing pixel values in hex is a convenient way to analyze and manipulate digital images. Such operations fall under the field of digital signal processing, a sub-field of electrical engineering. Digital signal processing is important in many types of communication technologies and data transmission.

Learning Objectives

After this activity, students should be able to:

  • Find the color of a specific pixel in an image.
  • Convert the RGB value of a pixel to hexadecimal.
  • Average a pixel's value from surrounding pixels.
  • Explain how this information connects to engineering.

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.

  • 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

Materials List

Each student needs:

Worksheets and Attachments

Visit [www.teachengineering.org/activities/view/van_robotic_vision_activity2] to print or download.

Pre-Req Knowledge

  • A basic understanding of the definitions of digital image, pixel, RGB and hexadecimal.
  • Previous exposure to the equations and process used to convert between RGB and hexadecimal.

Introduction/Motivation

Tell me what you know about digital images? What's a pixel? What are we talking about when we say RGB and hexadecimal? What do they have to do with digital images? (Listen to student responses. Correct and amend their understanding, as necessary.)

In this activity, you will practice converting between RGB and hex representations of a pixel value. Then you will explore a website dealing with color and figure out how to find the average value of a pixel from the values of the pixels surrounding it.

Procedure

  1. Gather materials, arrange for computer access and make copies of the worksheet.
  2. Divide the class into student pairs and hand out the worksheets.
  3. Direct student groups to do the conversions between RGB and hex on the worksheet.
  4. Then have students go to the the DEW Power of Digital Images website to read about digital images and making colors with light (as opposed to pigment), and summarize on the worksheet what they learned.
  5. Next, have students average the pixel values surrounding a central pixel to find the value of the central pixel.
  6. As a class, share and discuss students' results and conclusions. Link what they've just done to real-world engineering by explaining that computer science engineers make similar calculations as part of their work.

Vocabulary/Definitions

digital image: An image represented in binary.

hexadecimal: A number system that uses 16 different symbols per placeholder, 0-9 and A-F. The first 30 numbers are: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,10,11,12,13,14,15,16,17,18,19,1A,1B,1C,1D.

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

Assessment

Pre-Activity: Ask students questions to assess their base knowledge of the background knowledge for this activity, and amend as necessary. Ask the students: What do you know about digital images? What is a pixel? What do RGB and hexadecimal have to do with digital images?

Embedded and Post-Activity/Lesson: Observe students' calculations and answers as they work through the worksheet. At activity end, review their answers to gauge their depth of understanding of the lesson and activity content.

Subscribe

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 Lesson
What Makes Up a Color?

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

High School Lesson
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.

References

Gould, Alan. Introduction: The Power of Digital Images. Last updated February 28, 2012. All About Digital Earth Watch-Chapter 1, Digital Earth Watch, Global Systems Science, The Lawrence Hall of Science, University of California Berkeley. Accessed June 13, 2013. http://dew.globalsystemsscience.org/about/allaboutdew/01-intro

PDF version of the above DEW website: http://www.lawrencehallofscience.org/gss/dew/documents/AllAboutDEW201204.pdf

Copyright

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

Contributors

Mark Gonyea; Anna Goncharova; Rachelle Klinger

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: February 10, 2022

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