---
# Generate HSL color schemes with SCSS and CSS Custom Properties
**URL:** https://modul-r.codekraft.it/2022/01/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% )};}
```
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
- [Home](https://modul-r.codekraft.it/)
- [Theme Setup](https://modul-r.codekraft.it/2019/06/theme-setup/)
- [Environment Setup](https://modul-r.codekraft.it/2019/06/environment-setup/)
- [Functions and Components](https://modul-r.codekraft.it/2019/06/custom-theme-functions/)
- [Classic](https://modul-r.codekraft.it/category/classic/)
- [Shop](https://modul-r.codekraft.it/shop/)
- [Tag /Archive format](https://modul-r.codekraft.it/tag/post-formats/)
- [Modul R](https://wordpress.org/themes/modul-r/)
- [Modul R (git)](https://github.com/erikyo/Modul-R)
- [Modul R Child (git)](https://github.com/erikyo/Modul-R-child)
- [CF7 Antispam](https://wordpress.org/plugins/cf7-antispam/)
- [OH-MY-SVG](https://modul-r.codekraft.it/oh-my-svg/)
- [Model-Viewer WordPress block](https://modul-r.codekraft.it/model-viewer-wordpress-block/)
- [Remove Capslock](https://wordpress.org/plugins/remove-capslock)
- [Blog](https://modul-r.codekraft.it/category/random-access-memories/)
- [Codekraft](https://github.com/codekraft-studio)
- [About Me](https://modul-r.codekraft.it/erik-golinelli/)
- [Contact](https://modul-r.codekraft.it/contacts/)
- [Credits](https://modul-r.codekraft.it/credits/)
---
## Footer Links
- [Theme Setup](https://modul-r.codekraft.it/2019/06/theme-setup/)
- [Functions and Components](https://modul-r.codekraft.it/2019/06/custom-theme-functions/)
- [Environment Setup](https://modul-r.codekraft.it/2019/06/environment-setup/)
- [Download](https://wordpress.org/themes/modul-r/)
- [Contact form 7](https://modul-r.codekraft.it/category/contact-form-7/)
- [Quick Start](https://modul-r.codekraft.it/category/quick-start/)
- [Classic](https://modul-r.codekraft.it/category/classic/)
- [Post Formats](https://modul-r.codekraft.it/category/post-formats/)
- [Block](https://modul-r.codekraft.it/category/block/)
- [Clothing](https://modul-r.codekraft.it/product-category/clothing/)
- [Privacy Policy](https://modul-r.codekraft.it/privacy-policy/)
- [Proudly powered by WordPress & made in Bologna with ♥ by Codekraft](https://codekraft.it/)