Guil Hernandez
writes on November 9, 2012
In this CSS Quick Tip, we’ll learn how to define color values with the HSLa color model. HSLa stands for Hue, Saturation, Lightness, and alpha.
This HSLa Color Values method is much more intuitive than RGBA or Hex values, allows you to use the color wheel to select the hue.
Need a color picker? Try http://hslpicker.com
Guil: Hi, everyone. I’m Guil. In this Treehouse Quick Tip we’ll learn
how to define color values in CSS with the HSLA color
model. If you’re already familiar with hexadecimal or RGBA
color values I think you’ll find HSLA values extremely
useful for your next project. Let’s get started.
HSL stands for hue, saturation, lightness, and the A stands
for alpha. Like RGBA, HSLA accepts three values to
determine color and a fourth value to set the opacity or
transparency of an element. So, let’s dive into some CSS
and see how this works.
In our CSS rule for the div with the class of box, we’ll go
ahead and add the background color property followed by the
HSLA value. In between the parentheses the first number is
the hue value, the second is the saturation, the third
value is the lightness value, and the fourth value is, you
guessed it, the alpha value.
The hue value is an angle in the color wheel measured in
degrees from zero to 360. The six major colors are red,
yellow, green, cyan, blue and magenta and they’re spaced
out by angles of 60 degrees, as you can see here in our
color wheel example. So a value of 130, like the one we
used in our CSS, gives us a hue in somewhere in the range
of green.
Back in our CSS, in the saturation value 0% is completely
desaturated or gray-scale and 100% gives us a full color
saturation. So here it’s set to 50% saturation. In the
lightness value, 0% lightness is black, 100% lightness is
white, and 50% lightness is a normal lightness value. So
here we chose 45% for the lightness. Finally, in the alpha
value, a value of zero gives us full transparency and a
value of one would be completely opaque. So here we chose
0.6 as our alpha value.
In the browser we’ll refresh the page, and there we see the
transparent green color value we set using HSLA. So once
you wrap your head around the color wheel the rest is a
breeze. HSLA is much more intuitive than RGBA or hex
values, as you can see, and it’s much easier to make color
and shade adjustments on the fly without having to jump
into Photoshop or any color picker. But if you need a
little help to start things off check out this most
excellent color picker at hslpicker.com.
HSLA has great browser support and now that we’re all HSLA
pro’s it’s time to start using it more in our projects. So
give it a shot.
Announcer: If you’d like to see more advanced videos and tutorials like
this one, go to teamtreehouse.com and start learning for
free.
I’m just switching over to HSLA myself today. Frankly I would have switched over quite a while ago if I had known about it. Nearly 10 years designing websites I have never heard of it until earlier today. Took all of about 8 seconds to figure out that it’s much better than the way I’ve been doing colors