Generate HSL color schemes with SCSS and CSS Custom Properties

Here’s how to generate complex HSL color schemes with saturation, lightness and opacity with SASS and CSS variables (custom properties).

All you need to do is to set the --color-hue the --color-sat and --color-luma variables that represents the hsl values of your main color.

---

Each color will then be represented as follows:

$color-primary: var(--color-hue), var(--color-sat), var(--color-luma);
--color-primary: hsl(#{$color-primary});

---

Quick Tips:

In order to create a new Value (eg. secondary color) you can create a new variable for the hue of this colour (so that you can reuse it) and then create a custom prop with that in this way.

/* the secondary color hue */
--color-hue--secondary: calc(var(--color-hue) - 150);
/* the secondary color custom property */
--color-secondary: hsl(var(--color-hue--secondary), var(--color-sat), 50%); 

And it’s not over yet! If you need a background or a colour to be used only once, you can always do it like this:

#c { background: hsl(var(--color-hue), var(--color-sat), calc(var(--color-luma) - 100%));}
#d { background: #{gen-custom-prop( $color-secondary, false, false, false, 50% )};}

---

---

Live test color schemes on codepen

See the Pen Generate HSL color schemes with SCSS and CSS Custom Properties by erikYO! (@erikyo) on CodePen.