In this tutorial, we will learn how to use simple color recognition with the webcam. If you need more details on Opencv color format I suggest you also see the official guide about BGR and HSV and then continue with this tutorial. We will use the simple functions of OpenCV in 3 steps:

  1. Difference between HSV format and BGR format
  2. How to define HSV values to identify color
  3. Applay in real time

Simple Color recognition requirements

To use Simple Core recognition with python, the use of the OpenCV libraries is required. If in doubt about the installation, open the terminal and run this command.

pip install opencv-python

1. Difference between BGR format and HSV format

OpenCV uses the BGR format, to make it easier I wrote this little code

import cv2

img = cv2.imshow("red.jpg")

print(img)

cv2.imshow("img", img)

cv2.waitKey(0)

Importing a completely red image and printing the results with python will result in an array showing the values of each color cell. Each color is always composed of 3 values between 0 and 255 with this sort Blue – Green – Red.

As you can see from the image, the color is composed of:
Red 33
Green 26
Red 237

simple color recognition with opencv hsv red

This color management can be a disadvantage because it only mixes the colors and defines the presence of each by showing the resulting color. What happens if the amount of light color changed? you simply would not get usable results in real life, for these reasons we use the HSV color format.

HSV and simple color recognition

With HSV, simple color recognition can be used to identify with color with good fidelity compared to BGR. Indeed HSV means:
Hue choose the color
Saturation color density
Value brightness of color

You can do this comparison test also with GIMP and in real-time you can see the differences with both types of formats.

gimp HSV


2. How to define HSV values to identify color

The values to be set are 3 H (0-179) S (0-255) V (0-255), Keep in mind that each program has its own range of values, in the case of OpenCV this is what I indicated.

To facilitate the choice of values it is better to use a trackbar, I have already prepared the hsv_colo_picker.py file and you can find it in the download link below. Only in this way can you easily do a Simple Color recognition with OpenCV.

HSV trackbar

3. Applay in real time

After understanding the basics of color recognition, we can apply the acquaintances for real-time use. We can do it with a webcam or with a video, the procedure is identical, only the source changes.

First, we must import the OpenCV library on our code and then proceed with the rest.

Get the video stream from the webcam

With OpenCV, the video stream is processed as a sequence of frames so we use the VideoCapture () function and a while loop for processing.

cap = cv2.VideoCapture(2)
cap.set(cv2.CAP_PROP_FRAME_WIDTH, 1280)
cap.set(cv2.CAP_PROP_FRAME_HEIGHT, 720)

while True:
    _, frame = cap.read()

Color format BGR to HSV

Each frame has a BGR color format but for practical reasons, as we saw in the previous paragraph, it is necessary to use the HSV format. The conversion is done with a line of code.

    hsv_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2HSV)

Identify the center of the screen

In order to find the color of the object, we identify a point on the screen from which to retrieve the three values that make up the color.

    height, width, _ = frame.shape

    cx = int(width / 2)
    cy = int(height / 2)

    # Pick pixel value
    pixel_center = hsv_frame[cy, cx]
    hue_value = pixel_center[0]

already from this step, we can print the results and have the three values that make up the color. Here is an example of the image with frame-by-frame outputs

HSV color picker

Identify the center of the screen

Simple color recognition is possible thanks to the extraction of the first value associated with the HSV format, which corresponds to Hue. Based on this we create a set of conditions and show the associated color.

    color = "Undefined"
    if hue_value < 5:
        color = "RED"
    elif hue_value < 22:
        color = "ORANGE"
    elif hue_value < 33:
        color = "YELLOW"
    elif hue_value < 78:
        color = "GREEN"
    elif hue_value < 131:
        color = "BLUE"
    elif hue_value < 170:
        color = "VIOLET"
    else:
        color = "RED"

    pixel_center_bgr = frame[cy, cx]
    b, g, r = int(pixel_center_bgr[0]), int(pixel_center_bgr[1]), int(pixel_center_bgr[2])

Show everything on the screen

Last step is to show all result on screen, very simple operation to do with OpenCV functions: cv2.rectangle(), cv2.putText() and cv2.circle()

    cv2.rectangle(frame, (cx - 220, 10), (cx + 200, 120), (255, 255, 255), -1)
    cv2.putText(frame, color, (cx - 200, 100), 0, 3, (b, g, r), 5)
    cv2.circle(frame, (cx, cy), 5, (25, 25, 25), 3)

    cv2.imshow("Frame", frame)
    key = cv2.waitKey(1)
    if key == 27:
        break

Here is the first result. At the top left of the photo, you can see the name of the color, in this case, it is Blue

Simple color recognition Blue