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% )};}

the result

Live test color schemes on codepen

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

Post navigation

You might be interested in...

No comments yet, be the first!


Your email address will not be published. Required fields are marked *