How to convert Image to Grayscale by using HLS colorspace?

27 05 2008

Many image processing application provide functionality to convert images to gray scale. How they do it? There are many ways to convert an image to gray scale. The common method is to get the gray value of a pixel by the following equation

GrayValue = 0.3*Red + 0.59*Green + 0.11*Blue

There is another method to convert an image to grayscale – By using HLS colorspace. I’ve already explaned about HLS color space here –

In the HLS color space, we can represent a pixel in Hue, luminosity and Saturation, where Saturation represents the colorfulness of the color or how colorful the color is. If the saturation goes to minimum, that color will become grayscale and if it goes to maximum the more fluorescent it will become.

1) Get each pixel in image in RGB.
2) Convert RGB to HLS and get the saturation.
3) Set saturation to 1 and convert back to RGB.
4) Set the new image pixel.

See the code snippet below. Please note that Its not an optimized one. Just to demonstrate the process.

// Create the image.
Bitmap ColorImage( csSourceImage );

// Get the size of image.
for( UINT x = 0; x < ColorImage.GetWidth(); ++x )
    for( UINT y = 0; y < ColorImage.GetHeight(); ++y )
        // Get the pixel at x,y
        Color PixelColor;
        ColorImage.GetPixel( x, y, &PixelColor );

        // Convert it to COLORREF
        COLORREF RgbColor = PixelColor.ToCOLORREF();

        // Convert to HLS Color space
        WORD Hue = 0;
        WORD Luminance = 0;
        WORD Saturation = -100;
        ColorRGBToHLS( RgbColor, &Hue, &Luminance, &Saturation );

        // Set the saturation to 0 so that the
        // image will be greyscale.
        Saturation = 1;

        // Now re-generate HLS to RGB
        RgbColor = ColorHLSToRGB( Hue, Luminance, Saturation );

        // Convert back to Gdi+.
        PixelColor.SetFromCOLORREF( RgbColor );

        // Set it to image.
        ColorImage.SetPixel( x, y, PixelColor );

Download sample project from here. The sample support only Jpeg images but can be easily extended.
Please not that the GUI is not so much polished. 😉

As you think the first algorithm is more faster. But still HLS can be used and this is only one usage for HLS. The code snippet can be optimized further. But this is just for demo purpose. isn’t it? 😉

Targeted Audience – Intermediate.

Convert colors in RGB to HLS and vice versa.

22 05 2008

RGB doesn’t need and introduction and If you are experienced in adobe photoshop, then you might be already familiar with HLS too.

All of us know about RGB. RGB is a color space in which, colors are represented by Red, Green and Blue components. Each component can vary from 0-255 in value. See the RGB color space below. (Thanks to MSDN for the pic)

HLS is also a Color space similar to RGB. But instead of red, green and blue components, HLS contain Hue, Luminance & Saturation components. Its a color space in which the Hue, saturation and luminance of a color can be separated and modified. See the HLS color space below.( Thanks to Wiki for the pic. )

Well, how can you convert RGB color to HLS and vice versa? You can use the api’s – ColorRGBToHLS() and ColorHLSToRGB(). See the sample code snippet below.

#include "Shlwapi.h"
// Red color in RGB
COLORREF RgbColor = RGB( 255, 0, 0 );

// Convert to HLS Color space
WORD Hue = 0;
WORD Luminance = 0;
WORD Saturation = 100;
ColorRGBToHLS( RgbColor, &Hue, &Luminance, &Saturation );

// Its converted to Hue, Luminance and Saturation.
// You can adjust the parameters according to your wish.

// Now convert back to RGB.
RgbColor = ColorHLSToRGB( Hue, Luminance, Saturation );

You can generate a wide variety of effects by adjusting HLS parameters which cannot be done by using RGB. Designers always use these HLS components for generating creative images. Take Photoshop and have a try!

BTW, don’t forget to add Shlwapi.lib to project settings.

Targeted Audience – Intermediate.