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 → a number from 0 to 100.
• lightness → a number from 0 to 100.
• 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

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(51 100 50)
• hsl(51 100% 50%)
• hsl(51 100% 50% / 50%)
• hsl(51 100% 50% / 0.5)
• hsl(51, 100%, 50%)
• hsl(51, 100%, 50%, 0.5)
• hsl(51, 100%, 50%, 50%)

HSL color samples

• hsl(0, 100%, 50%)
• hsl(20, 100%, 50%)
• hsl(40, 100%, 50%)
• hsl(60, 100%, 50%)
• hsl(60, 100%, 50%)
• hsl(80, 100%, 50%)
• hsl(100, 100%, 50%)
• hsl(120, 100%, 50%)
• hsl(140, 100%, 50%)
• hsl(160, 100%, 50%)
• hsl(180, 100%, 50%)
• hsl(200, 100%, 50%)
• hsl(220, 100%, 50%)
• hsl(240, 100%, 50%)
• hsl(260, 100%, 50%)
• hsl(280, 100%, 50%)
• hsl(300, 100%, 50%)
• hsl(320, 100%, 50%)
• hsl(340, 100%, 50%)

• hsl(0, 0%, 50%)
• hsl(0, 10%, 50%)
• hsl(0, 20%, 50%)
• hsl(0, 30%, 50%)
• hsl(0, 40%, 50%)
• hsl(0, 50%, 50%)
• hsl(0, 60%, 50%)
• hsl(0, 70%, 50%)
• hsl(0, 80%, 50%)
• hsl(0, 90%, 50%)
• hsl(0, 100%, 50%)

• hsl(0, 100%, 0%)
• hsl(0, 100%, 10%)
• hsl(0, 100%, 20%)
• hsl(0, 100%, 30%)
• hsl(0, 100%, 40%)
• hsl(0, 100%, 50%)
• hsl(0, 100%, 60%)
• hsl(0, 100%, 70%)
• hsl(0, 100%, 80%)
• hsl(0, 100%, 90%)
• hsl(0, 100%, 100%)

HSLA function (legacy)

hsla(hue, saturation, lightness, opacity)

• opacity is from 0 to 1.

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