HSL
Hue, Saturation, Lightness
📗 What is HSL? (Kyle)
values: 0 ~ 360 (degrees)
complimentary color: color on the opposite side of the color wheel.
determines how gray looking the color is.
0% ~ 100%
determines how white or black a color is.
0% ~ 100%
50% means no additional white or black added to the color. ⭐️
0 (transparent) ~ 1 (opaque)
code examples
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 */
}hsl(16, 95%, 58%)
/* ╰ ╯ */
/* drop the lightness value by 10% */
hsl(16, 95%, 48%)
/* ╰ ╯ */#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❗️";
}Last updated
Was this helpful?