“HSL/ HSV: Blowing the lid on a designer secret” slides and notes

! Warning: this post hasn't been updated in over three years and so may contain out of date information.

At the end of my five minute talk at ReMix 08, I said that I’d put the contents of my talk on my blog. It’s taken me a few days longer to get around to it than I’d planned, but here they are. As I’m a great believer in as few words on a slide as possible, I’ve added notes to each slide to explain them.

Front screen slide. There aren't really any words to go with this.
Introducing myself slide.
Introducing myself slide.

The introducing myself slide was simply some words to fill the screen whilst I explained where I was coming from with regard to talking about colour. Despite having worked in a range of software disciplines, from real time and embedded to parser creation to web development, there is an underlying theme to my career: GUI development. During that time, I’ve found RGB to be a complete pain in the proverbial, thus the reason for being keen on HSL.

Why RGB is Rubbish
Why RGB is Rubbish

If I’m going to say that RGB is rubbish and that HSL is wonderful, I have to justify these statements. Therefore we start with an example of me wanting to create a nice palette of colours for a website. The first real slide of the presentation started with the middle blue rectangle with RGB values of 79, 129, 189 respectively, which is my base colour. By successively adding 10% to each of the red, green and blue values, I can create the lighter blue rectangles. By successively subtracting 10% from each of the red, green and blue values, I can create the darker blue rectangles. That is the easy part.

The first four colours on the right hand side are an attempt to create the compliment colour by juggling the 79, 129 and 189 values around. The final colour of 189, 189, 79 sort of looks like it might work as it is yellow (which my “schoolboy art” memories tell me is the compliment of blue. The colours aren’t very nice though.

The bottom rectangle on the right hand side is the true compliment. I know this as I used HSL to obtain the compliment, rather than RGB.

Use HSL instead: a description of HSL
Use HSL instead: a description of HSL

HSL is an alternative way of representing the RGB colour model. It has three components as the “Use HSL instead” slide explains. Hue is the colour: red, yellow, blue, violet etc and can be viewed as the colours arranged on a colour wheel. The saturation is the amount of colour, ie 0 saturation is grey and 100% saturation is a pure colour. Finally lightness (also referred to as luminance) is how light the colour is, ie 0 lightness is black, 100% lightness is white and in between comes all the shades of grey and colour associated with the chosen hue.

HSL in action (Paint SHop Pro color chooser)
HSL in action (Paint SHop Pro color chooser)

It is difficult to visualise HSL just with words, so the next slide shows a typical HSL colour picker. It is the Paint Shop Pro one. Concentrating the the left hand side, the top half of the colour chooser has a colour wheel as previously discussed. This is the hue. The inside that, there is a rectangle that has 0 – 100% saturation going from left to right. The same rectangle has 0 – 100% lightness going from top to bottom.

With such a colour chooser, the trick of obtaining a compliment colour becomes trivial. If you look closely, you should be able to see a grey circle over the blue part of the left colour wheel. On the right hand side, the grey circle has moved 180 degrees, ie it is on the compliment hue. As the saturation and lightness have remained the same, I have my compliment colour.

This ability to obtain new colours that work well together by changing just one of the three H, S and L values is the key to HSL. For example, to recreate the range of light and dark blues from the previous slide, I need only add or subtract 10% from the lightness value, leaving hue and saturation alone.

yaflaColour - nice online HSL tool
yaflaColor - nice online HSL tool

The Paint SHop Pro colour chooser is all very nice, but very limited when it comes to creating colour palettes. Expensive designer tools like PhotoShop have good palette creation facilities, but it isn’t necessary to spend large amounts of money on such a tool. There is a great – free – online tool called yafla that makes creating colour palettes a breeze.

It is difficult to see the details on the slide, but across the top are the hue, saturation and lightness values. They are actually HSV values, which is subtlety different to HSL, but there was insufficient time to explain the difference during the presentation – see the last slide for more. Below that in the middle is a range of n-degree compliment colours (eg the true compliment is a 180-degree compliment, other colours such as 90-degree and 270-degree compliments then go well with the base colour). On the left and right hand sides, there is a lightness scale and saturation scale respectively. Finally along the bottom is a set of handy eye droppers. Dragging these to one of the colours on the page adds that colour to the palette box above it.

It is of course far better to use the tool than read my description of it, so I’ve supplied a link after the last slide.

Conclusion
Conclusion

In conclusion, it is worth reiterating  a basic software design principle: it is not necessary, and is often highly undesirable to have the functionality that is exposed to the user mirror the underlying implementation. RGB is a case in point here. There are very good reasons why computers work with RGB. There is no good reason why developers should work with RGB though. Work with HSL, then convert back to RGB when a computer needs to get involved, eg when creating a CSS file.

Final slide
Final slide

The final slide offered some links. Obviously I linked to here. I also provided a short url link to YaflaColor.

Lastly I provided a link to a useful article on wikipedia that explains HSL – and its cousin HSV – very well in my view. The difference between HSL and HSV is subtle and probably won’t effect you, but the article explains the differenc in case you want to know.

And that wraps up the presentation.