_colors.scss

:root {
	--hue-shift: 0deg;

	@include generateHSLCustomPropertiesFromColor('palette-black', #060606);
	@include generateHSLCustomPropertiesFromColor('palette-green', #00bc8c);
	@include generateHSLCustomPropertiesFromColor('palette-dark-grey', #313131);
	@include generateHSLCustomPropertiesFromColor('palette-grey', #444444);
	@include generateHSLCustomPropertiesFromColor('palette-red', #f00);
	@include generateHSLCustomPropertiesFromColor('palette-white', #fff);
}

.usingAColor {
  color: var(--palette-red);
}

.usingAColorWithTransparency {
  color: hsla(var(--palette-black-hsl), 0.5);
}

.usingAColorWithAdjustments {
  color: hsl(var(--palette-black-h), var(--palette-black-s), calc(var(--palette-black-l) - 10%));
}

.adjustingAllHuesForChaos {
  --hue-shift: 180deg;
}

_generateHSLCustomProperties.scss

@mixin generateHSLCustomProperties($name, $h, $s, $l) {
	// $safeName is necessary because $name could theoretically be a color literal, and Sass doesn't
	// like that.
	$safeName: '' + $name;

	--#{$safeName}-h: calc(#{$h} + var(--hue-shift));
	--#{$safeName}-s: #{$s};
	--#{$safeName}-l: #{$l};

	--#{$safeName}-hsl: var(--#{$safeName}-h), var(--#{$safeName}-s), var(--#{$safeName}-l);

	--#{$safeName}: hsl(var(--#{$safeName}-hsl));
}

// Example input
// @include generateHSLCustomPropertiesFromColor('palette-blue', #0092c7);

// Example output
//	--palette-blue-h: calc(195.9798994975deg + var(--hue-shift));
//	--palette-blue-s: 100%;
//	--palette-blue-l: 39.0196078431%;
//	--palette-blue-hsl: var(--palette-blue-h),var(--palette-blue-s),var(--palette-blue-l)
//	--palette-blue: hsl(var(--palette-blue-hsl));

_generateHSLCustomPropertiesFromColor.scss

@mixin generateHSLCustomPropertiesFromColor($name, $color) {
	@include generateHSLCustomProperties(
		$name,
		hue($color),
		saturation($color),
		lightness($color),
	)
}