HSL

Hue, Saturation, Lightness

• 📗 What is HSL? (Kyle)

hue

color wheel

• values: 0 ~ 360
 (degrees)

• complimentary color: color on the opposite side of the color wheel.

saturation

saturation

• determines how gray looking the color is.

• 0% ~ 100%

lightness

lightness

• determines how white or black a color is.

• 0% ~ 100%

• 50% means no additional white or black added to the color. ⭐️

alpha

• 0 (transparent) ~ 1 (opaque)

code examples

parameters

H	S	L	A
0 ~ 360	0% ~ 100%	0% ~ 100%	0 ~ 1

.bg {
  background-color: hsl(0, 100%, 50%);		/* pure red: #FF0000  */
	background-color: hsla(0, 100%, 50%, 0.5);	/* alpha: 0 ~ 1 */
}

10% darker

hsl(16, 95%, 58%)
/*           ╰ ╯                   */

/* drop the lightness value by 10% */
hsl(16, 95%, 48%)
/*           ╰ ╯                   */

on hover

#container {

    --lightness-offset: 0%;					/* ⭐️ define: css var */

    background-color: hsl(200, 100%,
        calc(50% + var(--lightness-offset))	/* ⭐️ variable lightness */
    );

    display: inline-block;
    padding: 4px 8px 4px 12px;
}

#container::before {
    content: "hover on me❗️";
}

/* change "lightness", "content" on hover */
#container:hover {
    --lightness-offset: -10%;       			/* ⭐️ 10% darker */
}

#container:hover::before {
    content: "10% darker❗️";
}