Move over RGB. HSL is in town! 😁

 

Hi, *|USERNAME|*!

When it comes to colors, you are probably very familiar with defining them in the RGB format with its # character and weird arrangement of numbers and letters between A and F. The problem with RGB is that it only makes sense if you are a computer. You can't easily tell what a color is by just looking at its RGB representation. What does #B3EFB2 stand for? What about #F71735? What we need is a different, more human-friendly way of specifying colors.

That different and human-friendly way is HSL (or its related cousin, HSV). The way the HSL color format works is by breaking a color up into its Hue, Saturation, and Lightness parts. Let's look at what these parts mean.

Hue represents the actual color you want, and you specify the color by picking the degree value it falls under in the infamous color wheel:



Saturation determines how intense your color is, and you specify that intensity between 0% (no intensity) to 100% (full intensity).

The last value you specify is Lightness, and it too is specified as a percentage. 0% is total black, and 100% is full white.

You can combine all of three of these values to generate the color you want. Going an extra step further, you can then specify this color in your CSS (or JavaScript). To make that happen, you can use the hsl function and specify it as the value for any color property:
 

.rectangle {
  width: 200px;
  height: 100px;
  border: 10px solid #333;
  
  margin: 100px;
  margin-left: 20px;
  background-color: hsl(54, 100%, 62%);
}

The hsl (and related hsla where alpha/transparency is also supported) functions have near universal browser support, so you can use them today. While I haven't devoted a tutorial to HSL yet, you can learn more about it from the Understanding Degrees on the Web and Generating Random Colors tutorials.

TILL NEXT TIME

---

As always, before I leave you to it, I would love to hear from you on things I can do better, topics you'd like me to write about, and more. Don't be shy! The easiest way to contact me is via Twitter or by posting on the forums (like your grandparents probably did!)

Cheers,
Kirupa 😃