CSS: HSL Color

HSL Color Generator

HSL Color Syntax

Syntax using space separator and slash

Syntax using space separator was introduced around 2020.

hsl(hue saturation lightness)

hsl(hue saturation lightness / opacity)

hue

a integer from 0 to 360.

saturation

percentage. (the % can be omitted)

lightness

percentage. (the % can be omitted)

opacity

a number from 0 to 1.

/* gold */
/* Hex: #FFD700 */

/* space as separator */
p {
 background-color: hsl(51 100 50);
}

/* percentage */
p {
 background-color: hsl(51 100% 50%);
}

/* with opacity */
p {
 background-color: hsl(51 100% 50% / 50%);
}

/* with opacity as number */
p {
 background-color: hsl(51 100% 50% / 0.5);
}

Syntax using comma separator (legacy)

comma separator syntax is older, available since 2012 at least.

hsl(hue, saturation, lightness)

hsl(hue, saturation, lightness, opacity)

/* comma as separator */
p {
 background-color: hsl(51, 100%, 50%);
}

p {
 background-color: hsl(51, 100%, 50%, 0.5);
}

p {
 background-color: hsl(51, 100%, 50%, 50%);
}

HSL color samples

HSLA function (legacy)

hsla(hue, saturation, lightness, opacity)

• opacity is from 0 to 1.

div {
 background-color: hsla(120, 100%, 50%, 0.3);
}