---
# Generate HSL color schemes with SCSS and CSS Custom Properties

**URL:** https://modul-r.codekraft.it/generate-color-schemes-with-scss-and-css-custom-properties/
Date: 2022-01-27
Author: Erik
Post Type: post
Summary: 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: Quick Tips: In […]
Categories: Blog
Featured Image: https://modul-r.codekraft.it/wp-content/uploads/2022/01/pexels-photo-4219312.webp
---

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

![](https://modul-r.codekraft.it/wp-content/uploads/2022/01/image.png)the result

Live test color schemes on [codepen](https://codepen.io/erikyo/pen/ExbjpYg)

  See the Pen 
  Generate HSL color schemes with SCSS and CSS Custom Properties by erikYO! ([@erikyo](https://codepen.io/erikyo))
  on [CodePen](https://codepen.io).

---

## Categories

- Blog

---

## Navigation

- [Modul*R](https://modul-r.codekraft.it/)

---

## Footer Links

- [WordPress](https://wordpress.org/)