Rich Newman

April 29, 2007

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

Filed under: .net, c#, Color, dotnet, GUI, HSL, technology, User Interface — richnewman @ 10:52 pm

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.

About these ads

3 Comments »

  1. This is very helpful, but would be even more useful if I could see the forms with a font like Tahoma.

    Comment by Junior — May 20, 2007 @ 10:19 am

  2. Thanks, very clear and helpful article.

    Comment by Rytis Ūsalis — August 4, 2010 @ 12:19 pm

  3. 240 levels for hue was probably chosen as it divides nicely in the wheel with 3 primary (RGB) and 3 sencondary (CMY) colors.

    Comment by Matthew — August 13, 2010 @ 4:38 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

The Shocking Blue Green Theme. Create a free website or blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

Join 81 other followers

%d bloggers like this: