Choosing the perfect color

| UX

There are these times when you've got a color in your mind but just can't seem to find it. An easier way to pick that color is to use the HSL color model rather than RGB (or CMYK).

The HSL color model makes picking the color easier than RGB for example, because it uses components we can relate to. HSL stands for Hue-Saturation-Lightness and is not to be confused with HSB/HSV (Hue-Saturation-Brightness/Value).

From the wikipedia page (emphasis added):

… Joblove and Greenberg described the HSL model – whose dimensions they labeled hue, relative chroma, and intensity – and compared it to HSV. Their model was based more upon how colors are organized and conceptualized in human vision in terms of other color-making attributes, such as hue, lightness, and chroma; as well as upon traditional color mixing methods – e.g., in painting – that involve mixing brightly colored pigments with black or white to achieve lighter, darker, or less colorful colors.

The color model

The HSL color model has three components:

  1. Hue: The actual color component (red, blue, green, etc.). This is a circular quantity and takes values in degrees from 0 to 360. (And yes, 0° and 360° is the same.)
  2. Saturation: Relative chroma. I look at it as how rich/dull the color should be. Takes values from 0 to 100.
    0 being unsaturated (a shade of grey) and 100 being fully saturated.
  3. Lightness: The amount of white/black in the color. Takes values from 0 – 100.
    0 being the dark end (black), 50 being neutral and 100 being the light end (white).

You can play with hslpicker.com or any other picker of your choice to get the hang of the model.

Using the model

  1. Pick a hue. Say the color you're looking for is some kind of blue, pick the nearest hue.
  2. Pick the saturation. Higher values for a richer color, lower values for a more dull color.
  3. Pick the lightness. Start from 50 — it preserves the selected saturation. Use a value above 50 to add more white to the color and a value below 50 to add more black to the color.

You might need to fine-tune the above parameters to find the color you're after.

Any color with a saturation 100 and lightness 50 will result in the purest form of the selected hue. Decreasing the saturation affects the purity of the hue and changing the lightness affects the saturation (and in-turn affects the hue).

If you're using hslpicker.com, you'll notice how moving a slider changes the colors in the sliders above it:

  • Changing the Saturation affects the Hues
  • Changing the Lightness affects the Saturation & the Hues

It might take you some time to get used to this model (if you're a designer you probably might already be using this), but you'll soon notice how the color you pick with this is very predictable unlike its RGB counterpart.
Once you've got the selected color, you can use its RGB representation wherever you'd like. If you intend to use it for print, you might need to tweak the color after converting it to CMYK — colors with high saturation might not be representable by CMYK.

I created an Android HSL Picker recently which can be downloaded from here. It's not as great as I'd like it to be - but it's an open source app and it'd be great if you could contribute to it. The source code is available on GitHub here.