HSL(Hue-Saturation-Lightness)

The HSL color model is used in numerical color specifications. The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation).

The format of the HSL Value

hsl(H,S,L)
The format of an HSL color value in the functional notation is ‘hsl(’ followed by the hue in degrees, saturation and lightness as a percentage, followed by ‘)’.
- Hue
  Hue is represented as an angle of the color circle (i.e. the rainbow represented in a circle). This angle is so typically measured in degrees that the unit is implicit in CSS; syntactically, only a <number> is given. By definition red=0=360, and the other colors are spread around the circle, so green=120, blue=240, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120.[Example A]
- Saturation
  Saturation is represented as percentages. 100% is full saturation, and 0% is a shade of gray.[Example B]
- Lightness
  Lightness is represented as percentages. 0% lightness is black, 100% lightness is white, and 50% lightness is “normal”.[Example B]

Example

Example A

Change only the value of Hue. Sets the Saturation=100% and Lightness=50%.

Hue	hsl(H,S,L)	Color Name
0	hsl(0, 100%, 50%)	red
60	hsl(60, 100%, 50%)
120	hsl(120, 100%, 50%)	green
180	hsl(180, 100%, 50%)
240	hsl(240, 100%, 50%)	blue
300	hsl(300, 100%, 50%)
360	hsl(360, 100%, 50%)	red

Example B

Change the values of the Saturation and the Lightness. Sets the Hue=0(red).

		Saturation
		100%	75%	50%	25%	0%
Lightness	100%
	88%
	75%
	63%
	50%
	38%
	25%
	13%
	0%

CSS Reference

CSS Color defines the HSL color values in 4.2.4. HSL color values.