HSL Web Color

 

HSL colors are a relatively recent innovation for color specification that can be used on the Web. As a feature of CSS3 and the latest versions of the browsers*, HSL can provide a wider range of color choices than the traditional and original RGB specifications.

HSL stands for Hue, Saturation, and Lightness. Because hue, saturation, and lightness are three different values that are specified separately, there is a much wider range of color options available. HSL can take advantage to the 16 million or so colors that are available on the average computer monitor.

The chart on the right will help us explain and understand how HSL works. Here is how each of the HSL values work:

  • Hue - This is the color that is specified based on its position on the HSL color wheel. The chart on the right shows that Red is at the top of the wheel in the 0 degree position. This is also the same position as 360 degrees. The blue range is in the vicinity of 135 degrees, while the green range is in the area of 225 degrees.
  • Saturation - This is the value of a color that some people call the "intensity." The examples below will demonstrate this further. If you look at a blue color and say, "Wow, that's really blue!" you are probably reacting to saturation. Low saturation is gray or gray-ish while high saturation is very intense.
  • Lightness - Lightness is how light or dark a color appears. If it is very light it will approach white, if it is very dark it will be nearly black.

Here are some examples of hue:

Here is red with a hue of 0 or 360, saturation of 100% and lightness of 50%
Here is green with a hue of 135, saturation of 100% and lightness of 50%
Here is blue with a hue of 225, saturation of 100% and lightness of 50%
Here is blue with a hue of 45, saturation of 100% and lightness of 50%
Here is blue with a hue of 315, saturation of 100% and lightness of 50%

Here are three examples of saturation:

Here is blue with a hue of 180, saturation of 100% and lightness of 50%
Here is blue with a hue of 180, saturation of 50% and lightness of 50%
Here is blue with a hue of 180, saturation of 0% and lightness of 50%

Below are four examples of lightness:

Here is pink with a hue of 330, saturation of 75% and lightness of 100%
Here is pink with a hue of 330, saturation of 75% and lightness of 75%
Here is pink with a hue of 330, saturation of 75% and lightness of 50%
Here is pink with a hue of 330, saturation of 75% and lightness of 25%
Here is pink with a hue of 330, saturation of 75% and lightness of 0%

Of course, you can mix and match the HSL values. Here are three examples:

Here is pink with a hue of 330, saturation of 75% and lightness of 75%
Here is cyan with a hue of 160, saturation of 45% and lightness of 35%
Here is green with a hue of 80, saturation of 80% and lightness of 45%

The HSL color value phrasing is simple to understand and write. Here is the how the rule for the 330, 75%, 75% color (a shade of pink) above is written:

background: hsl(330, 75%, 75%);

Following standard CSS phrasing, the property is background:.

The attribute is hsl(330, 75%, 75%), and you will notice that it has multiple parts. The hsl species that it follow the HSL color schema. The first value, 330, indicates the hue. The first percentage, 75%, is the saturation. The last percentage, 75%, is the lightness.

The pink example above is presented as a div. You may be interested to see the full CSS rule for that div which includes the class name, dimensions, color, and more. It is:

.mix_n_match_one {
background: hsl(330, 75%, 75%);
height: 20px;
padding: 4px;
width: 700px;
margin-left: 30px;
color: #000;
}

Because HSL colors are so new to the Web, most Web page builders are not yet familiar with their capabilities and coding systems. At the time of this writing, the most popular Web graphics programs do not allow the specification of color by HSL. Web editing programs do not recognize HSL color which means that color selection can be hit-or-miss unless the Web page builder is very familiar with the system.

Without easy-to-use color selectors HSL is difficult for most Web page builders. We have found two helpful Web sites that have HSL selectors that may be useful for your projects:

We have saved the most important point for last. The HSL system is only recognized by the most current versions of the browsers*. Older versions will not display HSL colors. In fact, if you are seeing problems on this page there is a strong likelihood that your browser is too old!

ADDITIONAL RESOURCES: For a chart showing Web safe colors go to our Web Colors page here. The Interactive Media Center has an online tutorial for Color On The Web at this link.

* HSL colors are supported by the most recent browsers. Older versions, such as Internet Explorer 8 and below, will not display the colors. If you cannot see the colors described on this page, you may wish to update your browser.