Rich Newman

May 14, 2007

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

Filed under: .net, c#, Color, dotnet, GUI, HSL, RGB, technology, User Interface — richnewman @ 11:17 pm

Continued from part 2

Part 1 and part 2 of this article discussed the hue, saturation, luminosity color model, and created a class, HSLColor, that allowed colors specified using this model to be used in place of the more usual System.Drawing.Color class.

Uses of Hue, Saturation, Luminosity

So why is the hue, saturation, luminosity color model useful?

Back in part 1 I showed a color scheme designed by developers for an actual business application. This contained colors that didn’t go particularly well together overall. In particular some screens seemed brighter than others, and pairs of colors used for alternate lines in the grid were inconsistent. Sometimes they were the same color at differing strengths, sometimes completely different colors.

What we actually want is a color scheme that uses differing colors (hues) that are of similar ‘strength’ across all the screens. This is easily achieved with the hue, saturation, luminosity color model. We simply choose values for saturation and luminosity and vary the hue across the various screens. This works quite well if we use white as our alternating color in the grids (so we have a colored row alternating with a white row on every grid).

White Stripes

Color scheme 2 shows this:

Color Scheme 2

This color scheme uses a saturation of 240 and luminosity of 227 for all the colored rows, with the hue varying as below. It uses white (saturation 240, luminosity 240) for the alternate rows.

The hues used in the various screens in color scheme 2 are:

Red 0
Orange 20
Yellow 40
Green 80
Cyan 120
Blue 160
Violet 180
Magenta 200
Pink 220

Colored Stripes

In fact, we can go a stage further and choose two sets of values for saturation and luminosity for alternate rows on any grid, but use the same hue for each screen. Color scheme 3 shows an example of this:

Color Scheme 2

This uses a saturation of 240 and luminosity of 227 for all the dark colored rows as above, but then uses a saturation of 240 and a luminosity of 233 for the lighter rows. The hues shown on the color scheme vary as shown in the section above.

One difficulty with using color in this way is that the color settings on individual screens vary greatly. In particular colors that look quite dark on certain screens can look almost white on others. There’s no easy way around this.

On the business application I was discussing above we have offered the user the choice of which of these color schemes to go for, as well as options for the brightness of the colors. However, we have defaulted to a color scheme close to color scheme 2.

Code

These color schemes were all generated using the HSLColor class described in part 2. In part 4 I will post the full code for this.

May 7, 2007

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

Filed under: .net, c#, Color, dotnet, GUI, HSL, RGB, technology, User Interface — richnewman @ 11:48 pm

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:

MS Color Dialog

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.

The Shocking Blue Green Theme Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

Join 80 other followers