Skip to content

HSV Color Classifier

Run the HSV Color Classifier MicroSim Fullscreen

You can include this MicroSim on your website using the following iframe:

<iframe src="https://dmccreary.github.io/robot-arm/sims/hsv-color-classifier/main.html"
        height="652px" width="100%" scrolling="no"></iframe>

Description

Set the hue, saturation and value of one pixel and see its color and which of the chapter's three color ranges contains it. Then classify eight pixels, given as OpenCV HSV values, as red, green, blue, or none of the three. Used in Chapter 14.

The numbers use OpenCV's scale: hue runs from 0 to 179, and saturation and value run from 0 to 255. Every range needs a saturation of at least 120 and a value of at least 70.

  • Red: hue 0 to 10, or hue 170 to 179 (red wraps around the end of the scale)
  • Green: hue 45 to 75
  • Blue: hue 100 to 130

Lesson Plan

Grade level: Middle school and up (age 12+). Time: 10 to 15 minutes.

  1. Explore the hue. Start at hue 60 with full saturation and value. Slide the hue down to 5 and then up to 175. Which colors do you pass through, and where does red come back?
  2. Explore the other two. Set a green hue and lower the saturation below 120. Then raise it again and lower the value below 70. What does each change do to the swatch and to the class?
  3. Eight pixels. Choose Eight pixels in the menu. Check all three numbers of each pixel against the ranges, then press its class. Pressing a button commits your answer. You get one attempt at each, and 7 of 8 is mastery.
  4. Think about it. Why does a red mask in OpenCV need two calls to cv2.inRange, joined with |?

The marks on the three strips show the ranges of the chapter's COLOR_RANGES table. A marker shows where the pixel falls on each strip. In the quiz the markers appear after you answer.

Specification

The learning objective, evidence of mastery and content for this MicroSim are specified in Chapter 14: Cameras, Perception, and Learning from Demonstration.