Click here to Skip to main content
13,090,672 members (47,032 online)
Click here to Skip to main content
Add your own
alternative version


36 bookmarked
Posted 6 Jun 2007

Hue Saturation Lightness Filter

, 6 Jun 2007
Rate this:
Please Sign up or sign in to vote.
A VB.NET class implementing an image Hue/Saturation/Lightning adjustment.

Screenshot - HSL_Filter_Form_100.jpg


This Visual Basic .NET class implements an image filter which can change the hue, saturation, and/or lightness of the image. A small demo project is provided.


I was playing with image filters described in the article "A C# image enhancement filters library" and transferring code from C to VB.NET. Then, I extended my library with filters described in "Image Processing for Dummies with C# and GDI+ Part 1 - Per Pixel Filters". Since none of above articles describes a hue/saturation/lightness (HSL) filter, I decided to write my own class.

Filter class basics

All the filters share the same interface IFilter, defining a single function accepting an image as input and returning a filtered image on exit.

Public Interface IFilter

Function ExecuteFilter( _
         ByVal inputImage As System.Drawing.Image) As System.Drawing.Image

End Interface

The class BasicFilter implements the IFilter interface and is used as the base class for all filters.

Public MustInherit Class BasicFilter _
       Implements IFilter

   ''' <summary />
   ''' Background color. Default is a transparent background.
   ''' </summary />
   Private _bgColor As Color = Color.FromArgb(0, 0, 0, 0)
   ''' <summary />
   ''' Interpolation mode. Default is highest quality.
   ''' </summary />
   Private _interpolation As InterpolationMode = _

   ''' <summary />
   ''' Get or set background color.
   ''' </summary />
   Public Property BackgroundColor() As Color
         Return _bgColor
      End Get
      Set(ByVal value As Color)
         _bgColor = value
      End Set
   End Property
   ''' <summary />
   ''' Get or set resize interpolation mode.
   ''' </summary />
   Public Property Interpolation() As InterpolationMode
         Return _interpolation
      End Get
      Set(ByVal value As InterpolationMode)
         _interpolation = value
      End Set
   End Property
   ''' <summary />
   ''' Execute filter function and return new filtered image.
   ''' </summary />
   ''' <param name="img" />Image to be filtered.</param />
   ''' <returns />New filtered image.</returns />
   Public MustOverride Function ExecuteFilter( _
            ByVal img As System.Drawing.Image) _
            As System.Drawing.Image Implements IFilter.ExecuteFilter

End Class

Most of the filters have the same ExecuteFilter function, which at the moment only handles certain image formats.

Public Overrides Function ExecuteFilter( _
         ByVal img As System.Drawing.Image) _
         As System.Drawing.Image
   Select Case img.PixelFormat
      Case PixelFormat.Format16bppGrayScale
         Return img
      Case PixelFormat.Format24bppRgb, _
               PixelFormat.Format32bppArgb, PixelFormat.Format32bppRgb
         Return ExecuteRgb8(img)
      Case PixelFormat.Format48bppRgb
         Return img
      Case Else
         Return img
   End Select
End Function

Since I like to be in control and understand what's going on, I don't use a color matrix to transform an image, but rather read/modify/write pixels, which proved to be as fast as using a color matrix. I'm using a similar frame in my filters to access pixels.

Private Function ExecuteXXX(ByVal img As System.Drawing.Image) As System.Drawing.Image
   'Create new image for result.
   Dim result As Bitmap = New Bitmap(img)
   result.SetResolution(img.HorizontalResolution, img.VerticalResolution)
   Dim bmpData As BitmapData = result.LockBits( _
                  New Rectangle(0, 0, result.Width, result.Height), _
                  ImageLockMode.ReadWrite, img.PixelFormat)
   Dim pixelBytes As Integer = _
            System.Drawing.Image.GetPixelFormatSize(img.PixelFormat) \ 8
   'Get the address of the first line.
   Dim ptr As IntPtr = bmpData.Scan0
   Dim size As Integer = bmpData.Stride * result.Height
   Dim pixels(size - 1) As Byte
   Dim index As Integer
   'Copy the RGB values into the array.
   System.Runtime.InteropServices.Marshal.Copy(ptr, pixels, 0, size)
   'Main loop.
   For row As Integer = 0 To result.Height - 1
      For col As Integer = 0 To result.Width - 1
         index = (row * bmpData.Stride) + (col * pixelBytes)

         R = pixels(index + 2)
         G = pixels(index + 1)
         B = pixels(index + 0)

         'Do filtering.
   'Copy the RGB values back to the bitmap
   System.Runtime.InteropServices.Marshal.Copy(pixels, 0, ptr, size)
   'Unlock the bits.
   Return result
End Function

Implementing an HSL filter

The basic idea is to convert RGB values to HSL values, change the HSL values according to the user settings, and then convert the HSL values back to RGB values. The HSL color space is well described in Wikipedia where you can also find a link to the C code for conversion at EasyRGB. Converting C code to VB.NET was trivial, and the filter works just fine.

For testing the filters, I'm using a JPEG image 256 pixels square, and I'm running filters from a console application, also measuring the filtering time. Execution time was slightly longer than with other filters, but not so critical. Until filter was used on image size 2288x1712 pixels. Execution time was more than 16 seconds.

With paper, pencil, and some basic math, I found that a lot of calculations in the EasyRGB code are not necessary. Using the full range for HSL instead of the range [0..1] also saved some time. The biggest time saving was achieved by putting code that was in a separate function in the main loop. It is interesting that when I tried to do part of the calculations with integer arithmetic, the execution time increased. It seems type conversions took quite some time.

The final execution time is approximately 1.5 seconds, which is barely 10% of the original execution time.

Using the code

The code is fairly simple. The filter accepts parameters as follows:

  • Hue is a value between 0 and 360; actually, any value will be accepted and then transformed into the proper range.
  • Saturation and Lightness have allowed values between -100 and +100 (in percent).
  • BackgroundColor and Interpolation parameters have no meaning within this filter.
'Define compression for saved image.
Dim myEncoderParameters As EncoderParameters = New EncoderParameters(1)
myEncoderParameters.Param(0) = _
         New EncoderParameter(Encoder.Quality, CType(90L, Int32))
'Load image.
Dim imgOriginal As Image = _
         Image.FromFile("C:\Documents and Settings\Test.jpg")
'Define filter and parameters.
Dim imgFilter As HSLFilter = New HSLFilter()
imgFilter.Hue = 50
imgFilter.Saturation = 0
imgFilter.Lightness = 0
'Execute filter.
Dim imgFiltered As Image = imgFilter.ExecuteFilter(imgOriginal)
'Save filtered image as jpeg.
imgFiltered.Save("C:\Documents and Settings\Test_HSL.jpg", _
         Library.Image.Functions.GetEncoderInfo(ImageFormat.Jpeg), _

Points of interest

Implementing this filter is a good example of optimizing the code for speed. I learned a lot about colors and accessing image data.


  • 2007-06-08: Saturation and lightness scale changed. Demo project added.
  • 2007-06-05: Version 1.00.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Slovenia Slovenia
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy Vote of 5 Pin
AxelC13-Feb-14 12:31
memberAxelC13-Feb-14 12:31 
GeneralMy vote of 5 Pin
manoj kumar choubey23-Feb-12 21:21
membermanoj kumar choubey23-Feb-12 21:21 
QuestionA better way... Pin
i009-Aug-11 22:47
memberi009-Aug-11 22:47 
GeneralNice Pin
AndrewVos12-Jun-07 5:13
memberAndrewVos12-Jun-07 5:13 
GeneralBroken Download Link Pin
GraGra_336-Jun-07 14:53
memberGraGra_336-Jun-07 14:53 
GeneralRe: Broken Download Link Pin
Miran.Uhan7-Jun-07 23:49
memberMiran.Uhan7-Jun-07 23:49 
GeneralRe: Broken Download Link Pin
GraGra_3313-Jun-07 0:24
memberGraGra_3313-Jun-07 0:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.170813.1 | Last Updated 6 Jun 2007
Article Copyright 2007 by Miran.Uhan
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid