Designing with Hue Saturation and Lightness

As someone who designs and builds projects for mobile and the web, I've always found working with RGB and Hexadecimal to be confusing and a bit counterintuitive. It isn't simple for me like CMYK, which resembles painting with watercolors.

RGB is presentational. HSL is Semantic.

With the addition of HSL to most major browsers and preprocessors, designers and devlopers can start to use a system that makes much more sense. Especially if you don't want to switch over to a visual color picker all the time (which is how I work with HEX and RGB).

can i use hsl colors

The amount of time you can save by taking a few minutes to learn about HSL is nothing compared to the time you will save during prototyping and development. So let's jump in!

HSL: Hue, Saturation, Lightness

We are going to walk through the process of building a color to help illustrate how to use HSL in your every-day work.

Let's build the color $dapper-purple.

Pretend a designer just showed you this color and asked for you to represent it in code. The reasons why he needs this are above your security level. The president may be involved. I've said too much.

dapper purple

What do we know for sure just from looking at this color?

Well, we know that it has a hue we would call purple

Hue

Hue

Hue is represented by a number between 0 and 360 and represents a point of color on our species visible color spectrum. Imagine all the crazy hues we can't see. I wonder what hue time is?

Colors with the same hue are distinguised with adjectives referring to their saturation and lightness.

Examples: light blue, dark orange (brown), vivid red etc.

You don't need to remember every number on hue slider between 0 and 360, but by being familiar with a few colors and their associated numbers will mean you no longer have to use visual sliders. There aren't any more specific numbers you will need to remember. Here is the short guide I use:

0 - Red
60 - Yellow
120 - Green
180 - Cyan
240 - Blue
300 - Magenta
360 - Red

hue wheel

Red is the beginning and end. Take the red pill Neo.

If that is too many colors to remember try starting with just
Red(0 + 360)
Green(120)
Blue(240)

Back to that $dapper-purple color we need to create. Where does purple fall on that 0 - 360 slider?

Remember that blue falls at 240 on the hue slider and red is at 360. Do you remember from 1st grade art class that purple is a mix of both blue and red? If not it's ok, I've just reminded you!

This purple looks like it has more blue than red, so let's start closer to blue(240) than red(360).

$hue:265;///purple
$saturation:0;
$lightness:0;

hsl($hue,$saturation,$lightness);

Click on Result to see for yourself what color this produces:

Were you surprised to see that it is black? That is because it has a lightness value of 0.

Lightness

lightness greyscale Lightness is the amount of white, represented by a number between 0 (0% white) and 100 (100% white). Lightness is different from brightness and value (Adobe Illustrator uses HSB instead of HSL). Brightness and Value describe the amount of light, which can be any color of light and not just white.

Imagine that lightness is actually white light. You are sitting in a room and all of the light is suddenly extinguished when the only window is sealed shut. There is now 0% light in the room. What colors do you see?

Unless you have a powerful imagination or the ability to see heat you probabaly see only black, or rather, you can see 0% of the things in the room. That is probably a good thing since the only things in this room are spiders. Quick open your eyes!

If lightness is set to 0 (no white) you will get black, no matter what the hue and saturation is set to. If lightness is set to 100 you will have white, no matter what the hue and saturation is set to. Every number between 0 and 100 on the lightness scale is a grey value with either more white (max=100) or less white (min=0).

It is much easier to understand how colors work together in your designs if you start by only working in greyscale. This gives you 1 thing to concern yourself with in the early design stages. That 1 thing is how different values (shades of grey) interact with each other. Smarter people than me have said it before, contrast is king.

Let's add some lightness now into our $dapper-purple color.

What did the original color look like again?
dapper purple

Right, so the original color shown to us by the designer is definitely purple. It doesn't look like there is very much white in it. It actually appears to be darker than it is lighter. That means that it is below 50 (50 is equal to 50% white added). Let's just guess that it is halfway between 50% white and 0% white (or black).

$hue:265;///purple
$saturation:0;
$lightness:30;///dark but not black

hsl($hue,$saturation,$lightness);

Click on Result to see the shade of grey we just made!

The value of that grey looks like the value of the original purple. If you don’t believe me here is a fancy animated gif where I desaturate (remove the hue) from the original purple next to the grey value we just made.

desaturate dapper purple animation

Now all we need to do is saturate the color a bit!

Saturation

Saturation Slider (The above image only has 4 unique colors in it. Behold the power of dithering!)

Saturation - refers to the perceived intensity of a specific color. It is the colorfulness (the degree of difference between a color and gray) of a color relative to its own lightness. If you remove all of the saturation out of a color, all you have left is black, white, and all the shades of grey in between. There are more than 50 Shades of Grey. Many more.

I think of saturation in terms of adding in the percent of the chosen hue.

Imagine a rainy fall day. The clouds are blocking most of the natural light and everything just seems grey around you. There is no saturation to any of the colors around you.

0% saturation leaves us with the grey (30 white added to black) we have already created. Let's remove some of the metaphorical clouds and add some saturation back into our $dapper-purple.

Remind me of the original purple again...
dapper purple

Right! It doesn't look like a very vivid purple. It actually looks pretty desaturated. I would guess around 40% - 50% desaturated. Let's go with the lower number since many flat designs lately are heavily saturated.

Drumroll Please

$hue:265;///purple
$saturation:40;///not super saturated
$lightness:30;///dark but not black

hsl($hue,$saturation,$lightness);

Click Result to see the final generated color and see close we got to the original!

If this article helped you grasp a better understanding of HSL colors, or if you have any questions or corrections, let me know on twitter!


Part of being a great designer is in understanding the fundamentals of great design. Fundamentals we here at Dapper Gentlemen live and breathe every day. If you have design or development goals you would like to reach this year let us know. We love listening to and building great ideas!