Color space conversion


Color space conversion is transformation from one color representation into another.  In image processing this is a common approach for better image representation to help solve certain tasks. There are several color-space conversion methods available into FivekoGFX library ready for usage. In this article we will mention many of them and describe some of their properties.

RGB Color Wheel

Changing color space

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. I believe it is good to mention that the human eye has different sensitivity to each color component. For gray-scale conversion FivekoGFX uses the Y component from YCbCr color space.

rgb2gray color space conversionRGB to Gray-scale image transform

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 math used in FivekoGFX is as this below:

$\displaystyle{\left[\begin{matrix}{Y}\\{C}{b}\\{C}{r}\end{matrix}\right]}={\left[\begin{matrix}{0.0625}\\{0.5}\\{0.5}\end{matrix}\right]}+{\left[\begin{matrix}{0.257}&{0.504}&{0.098}\\-{0.148}&-{0.291}&{0.439}\\{0.439}&-{0.368}&-{0.071}\end{matrix}\right]}{\left[\begin{matrix}{R}\\{G}\\{B}\end{matrix}\right]}$ RGB to YCbCr color conversion

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

rgb2ycbcr color space conversionRGB to YCbCr image conversion

3. YCbCr to RGB color conversion

The FivekoGFX implements the following backward YCbCr transformation to get back the RGB color components:

$\displaystyle{\left[\begin{matrix}{R}\\{G}\\{B}\end{matrix}\right]}={\left[\begin{matrix}{1.164}&{0.000}&{1.596}\\{1.164}&-{0.392}&-{0.813}\\{1.164}&{2.017}&{0.000}\end{matrix}\right]}-{\left[\begin{matrix}{0.0625}\\{0.5}\\{0.5}\end{matrix}\right]}{\left[\begin{matrix}{Y}\\{C}{b}\\{C}{r}\end{matrix}\right]}$ YCbCr to RGB color conversion

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.

rgb2hsl color space conversion RGB to HSL color transform

The FivekoGFX implements the RGB to HSL conversion as follows:
For Luminance:

$\displaystyle\text{cMin}={M}{I}{N}{\left({R},{G},{B}\right)};\newline\text{cMax}={M}{A}{X}{\left({R},{G},{B}\right)};\newline{L}=\frac{{\text{cMax}-\text{cMin}}}{{2.0}};$ Luma calculation

For Hue:

$\displaystyle\Delta=\text{cMax}-\text{cMin};\\\\{H}={\left\lbrace\begin{matrix}\text{undefined}&{\quad\text{if}\quad}\Delta={0}\\\frac{{{G}-{B}}}{\Delta}&{\quad\text{if}\quad}\Delta={R}\\\frac{{{B}-{R}}}{\Delta}+{2}&{\quad\text{if}\quad}\Delta={G}\\\frac{{{R}-{G}}}{\Delta}+{4}&{\quad\text{if}\quad}\Delta={B}\end{matrix}\right.}$ Hue calculation

For Saturation:

$\displaystyle{S}={\left\lbrace\begin{matrix}{0}&{\quad\text{if}\quad}{L}={1}\\\frac{\Delta}{{{1}-{\left|{2}{L}-{1}\right|}}}&\text{otherwise}\end{matrix}\right.}$ Saturation calculation


Fast color conversion by OpenGL and GPU

FivekoGFX implements multiple algorithms for JavaScript color conversions with the help of WebGL and OpenGL GLSL shaders. As a result, this makes such conversions pretty fast, since all math is done over the 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);

Visit FivekoGFX on GitHub for more image processing examples and detailed source code!


References

  1. Grayscale – Wikipedia
  2. YCbCr – Wikipedia
  3. HSL – Wikipedia


Related Articles