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

Introduction

Business applications often have multiple screens that simply present grids of data. One way of making these applications more user-friendly is to use different colors on the backgrounds for such screens. Then you can talk about the ‘blue screen’ rather than the ‘intra-day warehousing report screen’. However, if you are not careful with your color schemes it’s quite easy to end up with a very ugly application that is tiring on the eyes. This article discusses how to use the Hue-Saturation-Luminosity color model to produce better color schemes.

RGB – Red, Green, Blue

As I’m sure you’re aware, colors in .NET are normally specified using the RGB (Red, Green, Blue) color model. This is a simple additive model: we define the intensity of each component of the color (red, green and blue) on a scale of 0 to 255, where 255 represents full intensity. The individual color values are then added to give the overall color. This gives us the set of colors we are used to working with:

0,0,0 – Black (R=0, G=0, B=0)
255,0,0 – Red
0,0,255 – Blue
0,255,0 – Green
0,255,255 – Cyan
255,0,255 – Magenta
255,255,0 – Yellow
255,255,255 – White

RGB reflects the way in which colors are actually displayed on a computer screen. A pixel on a screen is made up by combining intensities of red, green and blue, usually with 8 bits (256 values) for each of red, green and blue.

Drawbacks of RGB

Whilst RGB is easily understood, it isn’t necessarily all that easy to use it to specify sets of colors that go well together. As an example see the set of screens below. These colors were taken from an actual business application. The developers had tried hard to find sets of colors that went well together. This color scheme isn’t particularly bad, but several screens are clearly too bright and garish, and the color scheme isn’t consistent across the screens.

Original Color Scheme

HSL – Hue, Saturation, Luminosity

HSL (Hue, Saturation, Luminosity) is an alternative way of specifying color values. In fact, it’s an alternative way of specifying the same color values as we get with RGB: there is a simple mapping between any color specified using RGB and one using HSL. That is, you don’t get any extra colors with HSL.

HSL is a more intuitive way of dealing with color. Roughly, hue corresponds to the actual color, saturation corresponds to the intensity of the color, and luminosity corresponds to brightness. Microsoft treats these attributes as being on a scale from 0 to 240 (for no good reason that I can see).

Hue

Hue is reasonably self-explanatory, and starts at 0 for red. As its value increases it goes through the colors of the rainbow. Roughly the values are:

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

(Those of you wondering why that isn’t the ‘normal’ sequence for the rainbow, and in particular where indigo is, see http://en.wikipedia.org/wiki/ROY_G._BIV)

Luminosity

Luminosity is like the brightness control on a computer or television screen. Maximum luminosity (240) corresponds to white for any color, whilst minimum luminosity (0) corresponds to black. The middle value (120) corresponds to the pure color.

Saturation

Saturation is in some ways more like contrast, although for a single color contrast doesn’t make a lot of sense. Minimum saturation (0) corresponds to gray, whilst maximum saturation (240) corresponds to the pure color.

Examples

So for example, our hue could be pure red, which in the RGB space would have values (255, 0, 0). In the HSL space this corresponds to a hue of 0 (= red), a saturation of 240 (= maximum saturation, no gray), and a luminosity of 120 (= ‘normal’ brightness). The HSL equivalents of the RGB values given above are:

0,0,0 – Black (H=0, S=0, L=0)
0,240,120 – Red
160,240,120 – Blue
80,240,120 – Green
120,240,120 – Cyan
200,240,120 – Magenta
40,240,120 – Yellow
0,240,240 – White

Part 2

Part 2 will follow. This will discuss Microsoft’s support for HSL, show how to use the HSL color space to create good-looking grid user interfaces, and will give a C# HSLColor class that can be used in place of the usual Color class in your applications.