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.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: