I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Flower garden walkway

An Easy Guide To HSL Color In CSS3

css / color

Estimated reading time: 2 minutes, 56 seconds

The CSS3 HSL color method is well-supported in modern browsers but somewhat neglected by coders, partly due to the fact that HSL is quite different from alternative models:

  • It’s easy to translate from hexadecimal to RGB color codes, but difficult to translate from those color models into HSL.
  • Hex and RGB color values can be directly transferred to your , but PhotoShop’s HSB color model is not the same thing as HSL.
  • HSL doesn’t give you a greater gamut: it works in the same color range as hex and RGB.

Despite these restrictions, HSL is very much preferred by designers, and I’m about to show you why.

Understanding A New Color System

HSL Color WheelFirst, you need a new mental model for color. Forget sliders: instead, focus on the wheel above. You can see red, green and blue: red, at the top, is at 0 degrees, green is at 120 and blue at 240, dividing the color wheel into thirds. Equidistant between those are yellow, cyan and magenta (from the CMYK color system), at 60, 180 and 300 degrees respectively.

Starting at the top of the wheel and moving clockwise, we proceed through the rainbow hues you recall from school: ROY G BIV. An alternative mnemonic is “Young Guys Can Be Messy Rascals” – Yellow, Green, Cyan, Blue, Magenta and Red, starting at 60° and increasing in equal increments.

So the first component of HSL is easy: it’s a specification of how many degrees around on that wheel a particular color is.

As an example, purple is halfway between blue (240°) and magenta (300°), so the HSL code for it would be: hsl(270,100%,50%). (Don’t worry about the other numbers yet). Making the purple “more blue” would move it counter-clockwise on the color wheel, giving us hsl(255,100%,50%).

The next component, saturation, is better described as “intensity”. At the outside edge of the wheel, colors are fully saturated: they are as “colorful” as they can possibly be. Moving inwards, colors get closer to grey. So saturation is “how far away is the color from grey?” Any HSL color with a saturation of 0% is the exact same shade of grey, all other things being equal.

HSL Saturation Values: hsl(45,x%,50%)

hsl(45,0%,50%) hsl(45,25%,50%) hsl(45,50%,50%) hsl(45,75%,50%) hsl(45,100%,50%)

Luminosity, or “brightness”, specifies how far away the color is from black or white. A brightness level of 50% means the color is perfectly balanced between light and dark, and will essentially remain unchanged. Reducing luminosity darkens the color: all HSL colors with a luminosity level of 0 are pure black. Increasing brightness does exactly that: at the extreme of 100%, all HSL colors are white. Between, you have many possibilities, as illustrated below:

HSL Luminosity Values: hsl(90,100%,x%)

hsl(90,100%,0%) hsl(90,100%,25%) hsl(90,100%,50%) hsl(90,100%,75%) hsl(90,100%,100%)

With practice, this new mental map of color will become instinctive: you’ll likely find that it is much easier to create and manipulate color specified in HSL in your stylesheet code than hex or RGB. Even if you choose not to use it all the time, HSL has some very specific advantages in certain circumstances, as we’ll see in the next article.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.