HSL and Global Color Palettes with Custom Properties

CSS is not technically a programming “language” as it is more of a markup language. You assign certain settings and the result is the result, plain and simple. What differentiates a markup language and a programming language is dynamic logic that enables the abstraction of a markup’s declarative nature. Sass is certainly a hero in this topic, but browsers widely adopted CSS custom properties back in 2015, bringing the most commonly used functionality to every browser: global color schemes.

One of the most obvious implementation of a variable through CSS custom properties or through Sass is the use of colors. It’s great that we developers have native powers to set global settings such as colors in a design palette, but I wanted to offer a piece of advice extending the concept of a global color palette.

Typically, someone starting off picking CSS custom properties would throw their color palette into custom properties using well-known hex codes.

:root {
  —color-primary: #F975B6;
  —color-secondary: #34C9D2:
}

Not bad, but here’s a better way that makes practical color palettes far more flexible.

:root {
  —color1h: 45;
  —color1s: 60%;
  —color1l: 78%;
  —color1hsl: 45, 60%, 78%;
}

If, say, we’re styling a button to give it a background color that should be darker than it’s outline, the original hex-method limits you in a way that you have go find the shade of the original hex color on a color picker. There is a great tool named Polished for dynamically changing values in a Node environment that makes something like this possible, but there’s a simpler way.

color: hsl(var(--color1hsl))

/* Old way */
.button {
  outline: 2px solid var(--color-primary); /* hex code insertion */
  background-color: 2px solid /* Uhh, Google */ var(--color-primaryshade);
}

/* Better way */
.button {
  outline: 2px solid hsl(var(--color1hsl); 
  background-color: 2px solid hsl(var(--color1h), var(--color1s), 50%);
}

The benefit of HSL is being able to split the colors of your palette into shades, tints, and alpha values. Instead of researching a hex code for a shade and aggregating it into a dump, you can simply break the hsl variable you have set into parts: hsl(var(--color1h), var(--color1s), 70%). This way, you’re essentially saving your color paletttes as hue values, and extending the flexibility of it. Here’s a fully expanded version of the use using alpha values to give it an easy transparency without having to fuss with any opacity or pseudo-elements:

color: hsla(var(--color1h), var(--color1s), var(--color1l), 50%);

Easily change the alpha value for transparency.

It may seem that there are far more characters to type now, but the flexibility is a major game-changer once you get in the habit of

Now, my demonstration is only using CSS custom properties (aka CSS variables), instead of Sass variables, but Sass works great too. A Sass equivalent would look even more concise:

// Sass
$color1h: 45;
$color1s: 60%;
$color1l: 78%;
$color1hsl: #{$color1h}, #{$color1s}, #{$color1l}, 

The main diffference here is that the hsl variable being created is automatically generated instead of manually. Also, I emphasize custom properties here because custom properties have a lot flexibility in a framework lexical standpoint. You can reference them even inline from practically anywhere there is an HTML element, whereas Sass will need the precompiling isolated to your stylesheets.