Designing with Hue Saturation and Lightness for more Intuitive Colors
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).
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.
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 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
Red is the beginning and the end of the circle.
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 here 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 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 probably 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?
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 blackhsl($hue,$saturation,$lightness);
Click here to see for yourself what shade of grey this produces
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.
Now all we need to do is saturate the color a bit!
Saturation
Saturation — refers to the perceived (everything is relative) 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 (gray?) in between.
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…
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);
If this article helped you grasp a better understanding of colors, or if you have any questions or corrections, let me in the comments and follow me on dribbble!
Originally published at articles.dappergentlemen.com on January 22, 2015.
