Free Online Image Tools

Edit photos directly in your web browser!

online-image-apps-at-fiveko
Home » Blog » Tutorials » Color space conversion

Color space conversion

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.

rgb2gray color space conversion
RGB 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.

$\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 conversion
RGB 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 following math describes how to implement the RGB to HSL conversion:

How to calculate 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

How to calculate 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

How to calculate 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

Benefits of color transformation

The popular RGB color space is great for many occasions. However, it has its limits and it is easier to solve some imaging tasks in another color space representation. Some of the most popular areas suitable for color transformation are:

Color picker in graphics software

Usually, the color picker is a small dialog box that helps the user choose a specific color to work with. The color selection window may provide sliders, input boxes and / or gradient image for better user experience.

color picker - sample image
Example image of a web-based color picker

Many imaging applications provide HSL / HSV space as it is a convenient way to represent important color features.

Computer Vision and Image processing

Color space transformation is an essential part of many computer vision and image analysis algorithms and tools.This is because the usual red, green and blue color components are sometimes not sufficient for a given image processing task.

A common example of such a task is skin detection, where we need to isolate skin tones. Many popular skin segmentation algorithms rely on the YCbCr color space.

Photo filtering and color effects

Photo filters and color effects are an essential part of many graphics applications and tools. Most of these visual effects are possible by using various color space transformations. Some of which are HSV (Hue, Saturation, Value) and YUV.


Image Color Replacement Tool - Promo

WEB APPLET

See how it works in the browser!


References

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

TAGS:

Spectrum Audio Editor (Free!)

Effortless audio editing, made free. Edit sound like a pro with our online spectrum analyzer.

Sound CMD - Free Online Audio Editor

Fiveko Blog ↗

Discover articles and algorithms for image processing, programming, computer graphics, and more

Image Tools ↗

Free to use online image tools that run in a web browser. Apply photo effects to JPG, PNG, WebP and so on

Projects ↗

Small software projects and applications for various tasks: Graphics, Audio processing and others