Color space conversion is transformation from one color representation into another. This is a common approach to improve image representation and make it easier to solve certain computer vision tasks.
Changing color space
Below are some of the most popular color space transformations that are often used in picture analysis.
1. RGB to Gray color conversion
A common approach for RGB -> Gray color-space conversion is to use an average value from all the three Red, Green, Blue color components.
It is good to mention that the human eye has different sensitivity to each color component. Some articles recommend using the Y component of the YCbCr color space when converting to grayscale.
2. RGB to YCbCr color conversion
The RGB -> YCbCr is a widespread color conversion in many computer vision and photography tasks. The YCbCr color transformation applies to many use cases such as JPEG compression, skin segmentation and many more.
The input values should be in [0 – 255] (meaning 0.0-1.0 in case of GPU GLSL shaders).
The output values are [16 – 235] for Y and [16 – 240] for Cb and Cr
3. YCbCr to RGB color conversion
The FivekoGFX implements the following backward YCbCr transformation to get back the RGB color components:
The result color components are in range [0 – 255].
4. RGB to HSL color conversion
Our graphics library supports RGB to HSL colors pace transformation, which is widely used in many image processing tasks. This conversion is appropriate for many color tracking algorithms since it closely align to human visual system. The HSL acronym stands for the three components: Hue, Saturation and Luminance.
The FivekoGFX implements the RGB to HSL conversion as follows:
How to calculate Luminance?
How to calculate Hue?
How to calculate Saturation?
Fast color conversion by OpenGL and GPU
/* * Example code for FivekoGFX color transforms **/ var fivekogfx = new FivekoGFX(); // Load source image from Canvas object fivekogfx.load(canvas); // Convert RGB to GRAYSCALE color space and draw back to canvas fivekogfx.rgb2gray(); fivekogfx.draw(canvas); // Convert RGB to YCbCr color space and draw back to canvas fivekogfx.rgb2ycbcr(); fivekogfx.draw(canvas); // Convert RGB to HSL color space and draw back to canvas fivekogfx.rgb2hsl(); fivekogfx.draw(canvas);
See how it works in the browser!