Using HSL Color (Hue, Saturation, Luminosity) to Create Better-Looking GUIs (Part 2)

Continued from Part 1.

.NET Framework Support for HSL

Microsoft gives some support for the HSL color in the .NET Framework. The standard color dialog lets us enter HSL values in the ‘Hue’, ‘Sat’ and ‘Lum’ boxes to the left of the Red, Green, Blue boxes. These can only be entered as integers, and are on a scale of 0-240:

These are then immediately translated into their Red, Green, Blue equivalents. Similarly if we enter Red, Green, Blue values the equivalent HSL values are immediately calculated and displayed. There’s no way of accessing this translation functionality from outside the dialog box however. The color dialog simply gives you access to the System.Drawing.Color value that has been selected.

The System.Drawing.Color struct does let you get HSL values for any object instantiated from it. It has GetHue(), GetBrightness() and GetSaturation() methods for these purposes. GetBrightness and GetSaturation return values on a scale of 0.0-1.0, whilst GetHue returns a value from 0.0-360.0.

However, there’s no way of specifying what values we want for Hue, Saturation and Luminosity and converting that into a System.Drawing.Color using native .NET Framework methods. Fortunately the algorithms to convert HSL values to RGB values are readily available, see http://en.wikipedia.org/wiki/HSL_color_space. Once we have RGB values we can use the FromArgb() static method on the Color struct to construct a System.Drawing.Color object.

The HSLColor Class

Code listing for HSLColor class

To use the HSL color model we would ideally like to be able to specify our HSL values on a color class and then use that in place of System.Drawing.Color. The HSLColor class lets us do this.

As you can see the class has fields that store hue, saturation and luminosity values, and contains conversion code from these values to our more familiar red, green, blue values. This conversion code is called if we cast implicitly to System.Drawing.Color.

The hue, saturation, luminosity values are stored internally on a scale of 0.0 to 1.0, but scaled to 0.0 to 240.0 for use externally to the class. This has been done to make the scaling consistent with the color dialog. This scaling can be changed by changing the value of the ‘scale’ constant field.

The class has constructors that let you instantiate it with specified HSL values, with RGB values or from an existing System.Drawing.Color. The class also has a ToString method that outputs the HSL values, and a ToRGBString method that outputs the RGB values.

As mentioned, this class can be used anywhere we use System.Drawing.Color. This is achieved by having an implicit casts to and from System.Drawing.Color. To cast from System.Drawing.Color we simply use the GetHue, GetBrightness and GetLuminosity methods on the Color class. To cast to System.Drawing.Color I have coded the conversion algorithm found on Wikipedia mentioned above.

What this means is that we can write code like that below:

     static class Program
     {
          /// <summary>
         /// The main entry point for the application.
         /// </summary>
         [STAThread]
         static void Main()
         {
             Form1 form1 = new Form1();
             // color1 is bright red:
             // Hue 0.0 (red), saturation 240.0 (full), luminosity 120.0 (normal)
             HSLColor color1 = new HSLColor(0.0, 240.0, 120.0);
             // We can use our HSLColor in place of System.Drawing.Color
             form1.BackColor = color1;
             Application.Run(form1); // Form displays with red background
         }
     }
  

That is we can set the BackColor of a Form, which expects a System.Drawing.Color object, to an object of type HSLColor specified using the HSL color space.

To come in Part 3, how we can use this to construct better color schemes.