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

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:

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:

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.

Advertisements