Colors HSL
HSL Calculator
rgb(255, 0, 0)
#ff0000
H:
S:
L:
HSL Colors
HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.
HSL stands for hue, saturation, and lightness.
HSL color values are specified with: hsl(hue, saturation,
lightness).
Hue
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.
Saturation
Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
Lightness
Lightness is also a percentage; 0% is black, 100% is white.
Try it Yourself
HSL color values are supported in all major browsers.
Example
<style>
div {
background-color: hsl(180, 50%, 50%);
color: hsl(0, 0%, 100%);
}
</style>
Try It Yourself »
