HSL color space

HSL color space

HSL (Hue Saturation Lightness) color space is a human way to represent color values in computer systems. The main idea was to present a color model in a more intuitive approach. Typically it used for most color pickers UIs.

There is one more color model that has quite the same logic called HSV(HSB).

HSL has three dimensions that use to define the exact color. Geometry interpretation of it is a cylinder. Where the central axis is neural achromatic colors.

HUE [0-360]

The main dimension is Hue that can be presented as a color circle with values from 0 to 360. Where 0 is solid Red color, 120 mean pure green value and 240 mean blue.

Check the respective HSL color codes below.

hsl(0,50%,50%) hsl(18,50%,50%) hsl(36,50%,50%) hsl(54,50%,50%) hsl(72,50%,50%) hsl(90,50%,50%) hsl(108,50%,50%) hsl(126,50%,50%) hsl(144,50%,50%) hsl(162,50%,50%) hsl(180,50%,50%) hsl(198,50%,50%) hsl(216,50%,50%) hsl(234,50%,50%) hsl(252,50%,50%) hsl(270,50%,50%) hsl(288,50%,50%) hsl(306,50%,50%) hsl(324,50%,50%) hsl(342,50%,50%)


The second axis has a range between 0 and 100 percent. It gives Hue color a gray shade. 0 - is a pure gray color, and 100 is a Hue color itself, without any shades.

Check the respective HSL color codes below.

hsl(0,0%,50%) hsl(0,5%,50%) hsl(0,10%,50%) hsl(0,15%,50%) hsl(0,20%,50%) hsl(0,25%,50%) hsl(0,30%,50%) hsl(0,35%,50%) hsl(0,40%,50%) hsl(0,45%,50%) hsl(0,50%,50%) hsl(0,55%,50%) hsl(0,60%,50%) hsl(0,65%,50%) hsl(0,70%,50%) hsl(0,75%,50%) hsl(0,80%,50%) hsl(0,85%,50%) hsl(0,90%,50%) hsl(0,95%,50%) hsl(0,100%,50%)


The last axis has the same range as the previous 0-100%. Obviously, it means a value of light in color. 0 - is no light at all or black color, 100 - is the max value of light - white. In the middle of it (50) a canonical Hue value.

Check the respective HSL color codes below.

hsl(0,0%,0%) hsl(0,50%,5%) hsl(0,50%,10%) hsl(0,50%,15%) hsl(0,50%,20%) hsl(0,50%,25%) hsl(0,50%,30%) hsl(0,50%,35%) hsl(0,50%,40%) hsl(0,50%,45%) hsl(0,50%,50%) hsl(0,50%,55%) hsl(0,50%,60%) hsl(0,50%,65%) hsl(0,50%,70%) hsl(0,50%,75%) hsl(0,50%,80%) hsl(0,50%,85%) hsl(0,50%,90%) hsl(0,50%,95%) hsl(0,0%,100%)


HSL function is supported by all major modern browsers, including IE9. It was added in CSS3 specification.

Color HSLA

HSLA is an extended way to define a color. There is an additional axis added called alpha.

Alpha makes hsl transparent in the range [0-1]. Which means 0 - completely transparent, 1 - no transparency at all.

Basic Syntax

hsl(hue, saturation, lightness)
hsla(hue, saturation, lightness, alpha)

CSS Examples

.selector1 { background-color: hsl(0, 0%, 0%); } /* black background color */
/* shades */
.selector2 { color: hsl(0, 100%, 50%); } /* hue red */
.selector3 { color: hsl(0, 100%, 75%); } /* light red */
.selector4 { color: hsl(0, 100%, 25%); } /* dark red */
.selector5 { color: hsl(0, 60%, 70%); } /* pastel red */
.selector6 { color: hsla(0, 100%, 100%, 0.5); } /* hue red with alpha */