By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

HSL Colors

HSL stands for Hue, Saturation and Lightness. HSL is a way to define colors in CSS.

Created: 2012-02-03 08:35

HSL stands for Hue, Saturation and Lightness, and provides a way to define colors in CSS.

Its easier to change HSL colors. For example, if you only want to change the brightness of a color, you can simply change the lightness value. With RGB and HEX its harder, because you need to know the theory behind.

Possible Values

HSL takes three values, the first is the Hue, the second is the Saturation, and the third is the Lightness. The Hue should be given in degrees, and the Saturation and Lightness in percentages.

HueAccepts a numeric value 0-360. Values beyond that will wrap, so a negative value of -60 will be the same as a value of 300.
SaturationTakes a value from 0% to 100%. A value of 0% creates a gray shade.
LightnessTakes a value from 0% to 100%. A 0% lightness is black, while a 100% lightness is white, and 50% is normal.

HSL Color Examples

CodeResultColor name
hsl(0, 100%, 50%)Red
hsl(60, 100%, 50%)Yellow
hsl(120, 100%, 50%)Lime
hsl(180, 100%, 50%)Aqua
hsl(240, 100%, 50%)Blue
hsl(300, 100%, 50%)Fuchsia
hsl(360, 100%, 50%)Red

The code for the above table is shown below.

<table>
 <tr><th>Code</td><th>Result</th><th>Color name</th></tr>
 <tr><td>hsl(0, 100%, 50%)</td><td style="background:hsl(0, 100%, 50%);"></td><td>Red</td></tr>
 <tr><td>hsl(60, 100%, 50%)</td><td style="background:hsl(60, 100%, 50%)"></td><td>Yellow</td></tr>
 <tr><td>hsl(120, 100%, 50%)</td><td style="background:hsl(120, 100%, 50%);"></td><td>Lime</td></tr>
 <tr><td>hsl(180, 100%, 50%)</td><td style="background:hsl(180, 100%, 50%);"></td><td>Aqua</td></tr>
 <tr><td>hsl(240, 100%, 50%)</td><td style="background:hsl(240, 100%, 50%);"></td><td>Blue</td></tr>
 <tr><td>hsl(300, 100%, 50%)</td><td style="background:hsl(300, 100%, 50%);"></td><td>Fuchsia</td></tr>
 <tr><td>hsl(360, 100%, 50%)</td><td style="background:hsl(360, 100%, 50%);"></td><td>Red</td></tr>
</table>

Brugbart Vision!

See also

  1. Colors in HTML and CSS