HSV color space — computer vision in the browser

The HSV color space (hue, saturation, value) separates color from brightness, which makes color-based segmentation far easier than RGB in computer vision. This OpenCV demo converts an image to HSV and splits it into its hue, saturation and value channels. Run it live and explore each channel.

HSV color space — example output

Example code (Python / OpenCV)

import cv2
import numpy as np

# Colorful image: hue sweeps across X
hsv = np.zeros((300, 400, 3), dtype=np.uint8)
hsv[:, :, 0] = np.tile(np.linspace(0, 179, 400, dtype=np.uint8), (300, 1))
hsv[:, :, 1] = 255
hsv[:, :, 2] = 255
bgr = cv2.cvtColor(hsv, cv2.COLOR_HSV2BGR)
cv2.imshow("color", bgr)

h, s, v = cv2.split(cv2.cvtColor(bgr, cv2.COLOR_BGR2HSV))
cv2.imshow("hue", h)
cv2.imshow("saturation", s)
cv2.imshow("value", v)
print("BGR->HSV, split into hue / saturation / value channels.")

More computer-vision techniques →