Generated by SassMeister.com.

input.scss

@function hex-to-rgb($hex) {
    @return #{red($hex)},#{green($hex)},#{blue($hex)}; 
//   @return red($hex),green($hex),blue($hex);
}
// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@function hex-to-hsl($hex) {
  $colour-hue: hue($hex); // will return 306
//   $colour-hue: str-replace($colour-hue, 'deg');
  $colour-saturation: saturation($hex); // will return 43%
  $colour-lightness: lightness($hex); // will return 58%
//   @return hsl($colour-hue, $colour-saturation, $colour-lightness)
@return hsl(81, 50%, 41%)
}

$target-colors: (
   green-color: #789d34,
   red-color: #ac3d39,
   blue-color: #236367,
);



$tones: -40,-30,-20, -10, 10, 20, 30, 40;

$toneMap: (
  lightest: 30,
  lighter: 20,
  light: 10,
  base:0,
  dark: -10,
  darker: -20,
  darkest: -30
);


@mixin generate-color-var($key, $value) {
    //  --#{$key}: #{$value};
    //  --#{$key}-hsl: #{hex-to-hsl($value)};
  @each $name, $tone in $toneMap {
    $scale-value: adjust-color($value, $lightness: $tone / 2 * 1%);
    @if $name == 'base' {
      --#{$key}: #{$scale-value};
      --#{$key}-hsl: #{hex-to-hsl($scale-value)};
    } @else {
      --#{$key}-#{$name}: #{$scale-value};
      --#{$key}-#{$name}-hsl: #{hex-to-hsl($scale-value)};
    }
  }
}
// Color Palette: Triadic Scheme

:root {
   @each $key, $value in $target-colors {
       @include generate-color-var($key, $value);
   }
}

output.css

:root {
  --green-color-lightest: #9fc756;
  --green-color-lightest-hsl: #789d34;
  --green-color-lighter: #95c143;
  --green-color-lighter-hsl: #789d34;
  --green-color-light: #87b03a;
  --green-color-light-hsl: #789d34;
  --green-color: #789d34;
  --green-color-hsl: #789d34;
  --green-color-dark: #698a2e;
  --green-color-dark-hsl: #789d34;
  --green-color-darker: #5b7727;
  --green-color-darker-hsl: #789d34;
  --green-color-darkest: #4c6421;
  --green-color-darkest-hsl: #789d34;
  --red-color-lightest: #cc6965;
  --red-color-lightest-hsl: #789d34;
  --red-color-lighter: #c65652;
  --red-color-lighter-hsl: #789d34;
  --red-color-light: #bf443f;
  --red-color-light-hsl: #789d34;
  --red-color: #ac3d39;
  --red-color-hsl: #789d34;
  --red-color-dark: #993633;
  --red-color-dark-hsl: #789d34;
  --red-color-darker: #862f2c;
  --red-color-darker-hsl: #789d34;
  --red-color-darkest: #732926;
  --red-color-darkest-hsl: #789d34;
  --blue-color-lightest: #369aa0;
  --blue-color-lightest-hsl: #789d34;
  --blue-color-lighter: #30888d;
  --blue-color-lighter-hsl: #789d34;
  --blue-color-light: #29757a;
  --blue-color-light-hsl: #789d34;
  --blue-color: #236367;
  --blue-color-hsl: #789d34;
  --blue-color-dark: #1d5154;
  --blue-color-dark-hsl: #789d34;
  --blue-color-darker: #163e41;
  --blue-color-darker-hsl: #789d34;
  --blue-color-darkest: #102c2e;
  --blue-color-darkest-hsl: #789d34;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}