HSL and You : A More Enlightened Way of Choosing Colors

Almost a decade ago I put a basic HSV color picker online, calling it “yaflaColor“. The purpose of the tool was to find compatible colors — whether chromatically compatible, or as variants of a single hue — then using them in their RGB hex form for projects.

The following block shows three hues — 20, 50 and 80 degrees on the 360 degree color wheel — at varying levels of saturation, from unsaturated to fully saturated.


HSV offers a very intuitive method of working with colors, most certainly beating the common trial and error method of combining various values for red, green and blue until a wanted result emerges.

An alternative to HSV is the related HSL scheme (Hue, Saturation, Lightness), and this is the one that ended up getting incorporated into the CSS3 standard. You can now directly use HSL in your CSS and styles, the following block having its background-color set to linearly progressing set of hues and saturations (the lightness steady at 50%. A lightness of 100% will always be white, while 0% will always be black).

As an aside, it’s worth noting that the various pre-processors (LESS, SASS) support HSV if that is your yearning.

Returning to that simple tool I mentioned earlier, the thing still sees a surprising amount of daily visitors so I did some cursory updates to modernize it a bit and dropped it online at http://colors.yafla.com/. The new variant works with HSL rather than HSV — given that the former has become the most commonly used scheme — though I’ll eventually add a toggle between the two.

I haven’t updated the tool for use with touch screens yet, with the sliders needing some touch updates, but will soon.

EDIT 2013-12-20 – Took a few moments and added touch to the sliders, and the experience is moderately decent on touchscreens, though the targets are a little small for the purpose of a finger.

All of this is really just laying a bit of groundwork for an upcoming blog post on some color issues that I faced when building the Name Navigator. That tool makes heavy use of colors for differentiation purposes, and I quickly discovered that while mainstream browsers accept HSL as an input, they internally use RGB. This becomes especially evident when using gradients, as I did in the legend.

Look for that to appear soon.