1. Computing

Discuss in my forum

HSL

By , About.com Guide

HSL Color Circle

HSL Color Circle

© J Kyrnin
Definition:

HSL is an abbreviation of hue, saturation, and lightness. It is a color model used to describe colors in a way that is easier for humans to interpret than the straight RGB color model.

HSL colors are described with three values, in order:

  • hue - a number representing an angle on the color circle (a rainbow of color represented in a circle). This is what we typically think of when we think of a “color”.
  • saturation - how pure the hue is. A pure color is 100% saturated, while grays are unsaturated.
  • lightness - how light or dark the hue is. White is 100% lightness, while black is 0% lightness.

To pick a color using HSL, first choose the hue you want to use. Red is 0 or 360°, green is 120° and blue is 240°. Then decide how saturated and light or dark you want it.

The benefit to HSL colors is that they are a lot easier to guess at. You simply start with a hue on the color wheel and then adjust the saturation and lightness until you've got the one you want.

Also Known As:

HSL is sometimes called HSB for hue, saturation, and brightness. And sometimes HSV for hue, saturation, and value.

Examples:

HSL is a color system that is available in CSS 3. To use it, you separate the three values as numbers like you would in RGB colors:

Red: hsl(0,100%,100%)
Green: hsl(120,100%,100%)
Blue: hsl(240,100%,100%)

Some Commonly Used Hue Numbers

  • red: 0 or 360
  • orange: 30
  • yellow: 60
  • yellow-green: 90
  • green: 120
  • green-cyan: 150
  • cyan: 180
  • cyan-blue: 210
  • blue: 240
  • blue-magenta: 270
  • magenta: 300
  • magenta-red: 330

©2013 About.com. All rights reserved.