Direct link to the article Creating Color Themes With Custom Properties, HSL, and a Little calc()

Creating Color Themes With Custom Properties, HSL, and a Little calc()

Before the advent of CSS custom properties (we might call them “variables” in this article as that’s the spirit of them), implementing multiple color schemes on the same website usually meant writing separate stylesheets. Definitely not the most maintainable thing …

Avatar of Dieter Raber
Dieter Raber on (Updated on )

Yay for HSLa

Huge sogging longbottoms? High strength low alloy steel? NOPE, we’re talking Hue Saturation Lightness (and alpha) and it’s a way of declaring color in CSS. It looks like this:

#some-element {
  background-color: hsla(170, 50%, 45%, 1);
}

It is similar …

Avatar of Chris Coyier
Chris Coyier on (Updated on )