RGB and HSV. Applying to color based detection.

HSV stands for Hue, Saturation and Value/Brightness. Basically Hue defines what we understand as "color". The easiest way to understand this is to download the software on this link and play with it... Just by moving the Hue slider, you'll move the pointer in the horizontal color bar below. Nothing else will change. And then, the big square with gradients/shades will change its color. For instance, when Hue is 61, you are over the green (see the two white marks), and the big square is green.

When you move the slider to Hue 129, then you are in the blue:

Saturation tells us how much of that color we have. The way I think about it (not sure if right or not) is to imagine a paint manufactured by adding a powder tint to water. The bigger the number, the more tint you add to the water. That moves the cross in the square from left to right. Notice how the rightest values are "very" blue.

Finally, Brightness tells us how "dark" that color is... Again, the way I look at it is how much light you would put to see the color of the paint. If you almost don't illuminate the water+tint mix, you will see it very dark, while if you put a lot of light, then it will eventually very bright. Moving the slider will move the cross in the square up and down. The others stay constant.

And why to we care about this? Because basically we can easily segment the image by picking values of HSV that are close to each other. See the code here to understand that. In that example, we want to pick a red ball, so, we first segment the Hue (first value on the triplet) by looking at Hue<6 or Hue>175.

Then, we want to pick like a sphere of value around those colors. The sphere that contains more saturated reds or lightest ones. We don't want something that looks like grey or black... We do by computing the distance of (S,V) to (255,255).

Finally we AND both to pick the pixels that match both conditions.

Hope this clarifies whole thing. Just some final remarks.

1. How to find what is our HSV? The code that I showed here actually does it real time on the screen. Very useful to debug. Other ways to do it is using the above utility, or you can just use MS Paint or GIMP. Other util which I didn't actually even tried...
2. Notice that value range of HSV change from program to program/explanation. In Wikipedia, the ranges seem to be H: 0-360, S:0-1, V:0-1. But in OpenCV, these are H: 0 - 179, S: 0 - 255, V: 0 - 255. See here for more info. FYI MS Paint uses 0-240 for all 3 (HSV).

Other links of interest:

1. Color in OpenCV explained here
2. Good tutorial/app (the shown above).
3. A tutorial here.

PS.: Click here to see the index of these series of posts on OpenCV