Generated by SassMeister.com.

input.scss

$blue: #4e73df;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #e83e8c;
$red: #e74a3b;
$orange: #fd7e14;
$yellow: #f6c23e;
$green: #1cc88a;
$teal: #20c9a6;
$cyan: #36b9cc;

$white: #ffffff;
$gray: #858796;
$gray-medium: #cfd0db;
$gray-dark: #5a5c69;
$gray-light: #eaecf4;
$light: #f8f9fc;
$dark: #5a5c69;
$anthracite: #3a3b45;

$primary: #4e73df;
$secondary: #858796;

$success: #1cc88a;
$info: #36b9cc;
$warning: #f6c23e;
$danger: #e74a3b;

$colors : ('blue': $blue, 'indigo': $indigo, 'purple': $purple, 'pink': $pink, 'red:': $red, 'orange': $orange, 'yellow': $yellow, 'green': $green, 'teal': $teal, 'cyan': $cyan);

:root {
     @each $color, $value in $colors {
    --#{$color}: #{$value};
    --theme-#{$color}-darkened: #{darken($value, 20%)};
    --theme-#{$color}-lightened: #{mix(white, $value, 90%)};
    --theme-#{$color}-muted: #{desaturate($value, 40%)};
    --secondary-#{$color}: #{adjust-hue($value, -45deg)};
  }
}

output.css

:root {
  --blue: #4e73df;
  --theme-blue-darkened: #1e42a9;
  --theme-blue-lightened: #edf1fc;
  --theme-blue-muted: #7887b5;
  --secondary-blue: #4edfde;
  --indigo: #6610f2;
  --theme-indigo-darkened: #3d0894;
  --theme-indigo-lightened: #f0e7fe;
  --theme-indigo-muted: #7242c0;
  --secondary-indigo: #1064f2;
  --purple: #6f42c1;
  --theme-purple-darkened: #432776;
  --theme-purple-lightened: #f1ecf9;
  --theme-purple-muted: #7e748f;
  --secondary-purple: #4274c1;
  --pink: #e83e8c;
  --theme-pink-darkened: #ac145a;
  --theme-pink-lightened: #fdecf4;
  --theme-pink-muted: #bd6990;
  --secondary-pink: #c53ee8;
  --red:: #e74a3b;
  --theme-red:-darkened: #a72115;
  --theme-red:-lightened: #fdedeb;
  --theme-red:-muted: #bb6e67;
  --secondary-red:: #e73bad;
  --orange: #fd7e14;
  --theme-orange-darkened: #aa4e01;
  --theme-orange-lightened: #fff2e8;
  --theme-orange-muted: #ce8243;
  --secondary-orange: #fd1459;
  --yellow: #f6c23e;
  --theme-yellow-darkened: #c59009;
  --theme-yellow-lightened: #fef9ec;
  --theme-yellow-muted: #ceb066;
  --secondary-yellow: #f63e44;
  --green: #1cc88a;
  --theme-green-darkened: #0f6f4c;
  --theme-green-lightened: #e8faf3;
  --theme-green-muted: #4a9a7d;
  --secondary-green: #2fc81c;
  --teal: #20c9a6;
  --theme-teal-darkened: #12715d;
  --theme-teal-lightened: #e9faf6;
  --theme-teal-muted: #4f9a8b;
  --secondary-teal: #20c927;
  --cyan: #36b9cc;
  --theme-cyan-darkened: #20717c;
  --theme-cyan-lightened: #ebf8fa;
  --theme-cyan-muted: #68939a;
  --secondary-cyan: #36cc6f;
}

settings.json

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