Generated by SassMeister.com.

input.scss

$colors: (
  red: #ff0000,
  blue: #00ff00,
  green: #00ffff,
  yellow: #ffff00,
  purple: #ff00ff,
  pink: #ff0080,
  orange: #ff8000
);

$white: #ffffff;
$black: #000000;

$color-percentages: (
  red: (10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%),
  green: (20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100%)
);

$colors-map: ();

@each $color, $value in $colors {
  $color-shades: ();

  @for $i from 1 through 9 {
    $percentage: if(map-has-key($color-percentages, $color), nth(map-get($color-percentages, $color), $i), $i * 10%);
    $shade: mix($white, $value, $percentage);
    $color-shades: map-merge($color-shades, (#{$i}00: $shade));
  }

  $colors-map: map-merge($colors-map, ($color: $color-shades));
}

$neutral-map: ();

@for $i from 1 through 9 {
  $shade: $i * 100;
  $percentage: $i * 10%;
  $color: mix($white, $black, $percentage);
  $neutral-map: map-merge($neutral-map, ($shade: $color));
}


// define your use cases
$primary: map-get($colors-map, red);
$secondary: map-get($colors-map, blue);
$tertiary: map-get($colors-map, green);

// the map of the colours for your use case
$decision-map: (
  primary: $primary,
  secondary: $secondary,
  tertiary: $tertiary
);

// make a selection of colours
$desired-color: "primary"; // Specify the desired color here
$desired-shades: (200, 300, 400, 600, 800);
$selected-color-map: map-get($decision-map, $desired-color); // Select the desired color map using map-get


// Mixin to apply a specific color shade to an element
@mixin apply-color-shade($color, $shade, $property: color) {
  $color-map: map-get($colors-map, $color);
  $value: map-get($color-map, '#{$shade}');

  #{$property}: $value;
}

// Mixin to apply a specific neutral shade to an element
@mixin apply-neutral-shade($shade, $property: color) {
  $value: map-get($neutral-map, $shade);

  #{$property}: $value;
}

// Mixin to apply a specific shade from the decision-map to an element
// @mixin apply-decision-shade($color, $shade, $property: color) {
//   $color-map: map-get($decision-map, $color);
//   $value: map-get($color-map, $shade);

//   #{$property}: $value;
// }


.thing {
  @include apply-color-shade(red, 400);
  @include apply-neutral-shade(100);
}



// all colours 
:root {
  @each $color, $shades in $colors-map {
    @each $shade, $value in $shades {
      --#{$color}--#{$shade}: #{$value};
    }
  }
}

// neutrals
:root {
  @each $shade, $value in $neutral-map {
    --neutral--#{$shade}: #{$value};
  }
}

// print the selection and everything else
:root {
  @each $color, $shades in $decision-map {
    // Print tertiary and secondary colors in full
    @if $color != $desired-color {
      @each $shade, $value in $shades {
        --#{$color}--#{$shade}: #{$value};
      }
    }

    // Print desired shades for the desired color
    @if $color == $desired-color and $desired-shades {
      @each $shade in $desired-shades {
        $shade-str: unquote('#{$shade}'); // Convert the shade to a string
        $value: map-get($selected-color-map, $shade-str);
        --#{$desired-color}--#{$shade-str}: #{$value};
      }
    }
  }
}



// create utility classes
@each $color, $shades in $decision-map {
  @each $shade, $value in $shades {
    .text-#{$color}--#{$shade} {
      color: #{$value};
    }
  }
}

@each $color, $shades in $decision-map {
  @each $shade, $value in $shades {
    .background-#{$color}--#{$shade} {
      background-color: #{$value};
    }
  }
}

@each $color, $shades in $decision-map {
  @each $shade, $value in $shades {
    .border-#{$color}--#{$shade} {
      border-color: #{$value};
    }
  }
}

output.css

.thing {
  color: #ff6666;
  color: #1a1a1a;
}

:root {
  --red--100: #ff1a1a;
  --red--200: #ff3333;
  --red--300: #ff4d4d;
  --red--400: #ff6666;
  --red--500: #ff8080;
  --red--600: #ff9999;
  --red--700: #ffb3b3;
  --red--800: #ffcccc;
  --red--900: #ffe6e6;
  --blue--100: #1aff1a;
  --blue--200: #33ff33;
  --blue--300: #4dff4d;
  --blue--400: #66ff66;
  --blue--500: #80ff80;
  --blue--600: #99ff99;
  --blue--700: #b3ffb3;
  --blue--800: #ccffcc;
  --blue--900: #e6ffe6;
  --green--100: #33ffff;
  --green--200: #4dffff;
  --green--300: #66ffff;
  --green--400: #80ffff;
  --green--500: #99ffff;
  --green--600: #b3ffff;
  --green--700: #ccffff;
  --green--800: #e6ffff;
  --green--900: white;
  --yellow--100: #ffff1a;
  --yellow--200: #ffff33;
  --yellow--300: #ffff4d;
  --yellow--400: #ffff66;
  --yellow--500: #ffff80;
  --yellow--600: #ffff99;
  --yellow--700: #ffffb3;
  --yellow--800: #ffffcc;
  --yellow--900: #ffffe6;
  --purple--100: #ff1aff;
  --purple--200: #ff33ff;
  --purple--300: #ff4dff;
  --purple--400: #ff66ff;
  --purple--500: #ff80ff;
  --purple--600: #ff99ff;
  --purple--700: #ffb3ff;
  --purple--800: #ffccff;
  --purple--900: #ffe6ff;
  --pink--100: #ff1a8d;
  --pink--200: #ff3399;
  --pink--300: #ff4da6;
  --pink--400: #ff66b3;
  --pink--500: #ff80c0;
  --pink--600: #ff99cc;
  --pink--700: #ffb3d9;
  --pink--800: #ffcce6;
  --pink--900: #ffe6f2;
  --orange--100: #ff8d1a;
  --orange--200: #ff9933;
  --orange--300: #ffa64d;
  --orange--400: #ffb366;
  --orange--500: #ffc080;
  --orange--600: #ffcc99;
  --orange--700: #ffd9b3;
  --orange--800: #ffe6cc;
  --orange--900: #fff2e6;
}

:root {
  --neutral--100: #1a1a1a;
  --neutral--200: #333333;
  --neutral--300: #4d4d4d;
  --neutral--400: #666666;
  --neutral--500: gray;
  --neutral--600: #999999;
  --neutral--700: #b3b3b3;
  --neutral--800: #cccccc;
  --neutral--900: #e6e6e6;
}

:root {
  --primary--200: #ff3333;
  --primary--300: #ff4d4d;
  --primary--400: #ff6666;
  --primary--600: #ff9999;
  --primary--800: #ffcccc;
  --secondary--100: #1aff1a;
  --secondary--200: #33ff33;
  --secondary--300: #4dff4d;
  --secondary--400: #66ff66;
  --secondary--500: #80ff80;
  --secondary--600: #99ff99;
  --secondary--700: #b3ffb3;
  --secondary--800: #ccffcc;
  --secondary--900: #e6ffe6;
  --tertiary--100: #33ffff;
  --tertiary--200: #4dffff;
  --tertiary--300: #66ffff;
  --tertiary--400: #80ffff;
  --tertiary--500: #99ffff;
  --tertiary--600: #b3ffff;
  --tertiary--700: #ccffff;
  --tertiary--800: #e6ffff;
  --tertiary--900: white;
}

.text-primary--100 {
  color: #ff1a1a;
}

.text-primary--200 {
  color: #ff3333;
}

.text-primary--300 {
  color: #ff4d4d;
}

.text-primary--400 {
  color: #ff6666;
}

.text-primary--500 {
  color: #ff8080;
}

.text-primary--600 {
  color: #ff9999;
}

.text-primary--700 {
  color: #ffb3b3;
}

.text-primary--800 {
  color: #ffcccc;
}

.text-primary--900 {
  color: #ffe6e6;
}

.text-secondary--100 {
  color: #1aff1a;
}

.text-secondary--200 {
  color: #33ff33;
}

.text-secondary--300 {
  color: #4dff4d;
}

.text-secondary--400 {
  color: #66ff66;
}

.text-secondary--500 {
  color: #80ff80;
}

.text-secondary--600 {
  color: #99ff99;
}

.text-secondary--700 {
  color: #b3ffb3;
}

.text-secondary--800 {
  color: #ccffcc;
}

.text-secondary--900 {
  color: #e6ffe6;
}

.text-tertiary--100 {
  color: #33ffff;
}

.text-tertiary--200 {
  color: #4dffff;
}

.text-tertiary--300 {
  color: #66ffff;
}

.text-tertiary--400 {
  color: #80ffff;
}

.text-tertiary--500 {
  color: #99ffff;
}

.text-tertiary--600 {
  color: #b3ffff;
}

.text-tertiary--700 {
  color: #ccffff;
}

.text-tertiary--800 {
  color: #e6ffff;
}

.text-tertiary--900 {
  color: white;
}

.background-primary--100 {
  background-color: #ff1a1a;
}

.background-primary--200 {
  background-color: #ff3333;
}

.background-primary--300 {
  background-color: #ff4d4d;
}

.background-primary--400 {
  background-color: #ff6666;
}

.background-primary--500 {
  background-color: #ff8080;
}

.background-primary--600 {
  background-color: #ff9999;
}

.background-primary--700 {
  background-color: #ffb3b3;
}

.background-primary--800 {
  background-color: #ffcccc;
}

.background-primary--900 {
  background-color: #ffe6e6;
}

.background-secondary--100 {
  background-color: #1aff1a;
}

.background-secondary--200 {
  background-color: #33ff33;
}

.background-secondary--300 {
  background-color: #4dff4d;
}

.background-secondary--400 {
  background-color: #66ff66;
}

.background-secondary--500 {
  background-color: #80ff80;
}

.background-secondary--600 {
  background-color: #99ff99;
}

.background-secondary--700 {
  background-color: #b3ffb3;
}

.background-secondary--800 {
  background-color: #ccffcc;
}

.background-secondary--900 {
  background-color: #e6ffe6;
}

.background-tertiary--100 {
  background-color: #33ffff;
}

.background-tertiary--200 {
  background-color: #4dffff;
}

.background-tertiary--300 {
  background-color: #66ffff;
}

.background-tertiary--400 {
  background-color: #80ffff;
}

.background-tertiary--500 {
  background-color: #99ffff;
}

.background-tertiary--600 {
  background-color: #b3ffff;
}

.background-tertiary--700 {
  background-color: #ccffff;
}

.background-tertiary--800 {
  background-color: #e6ffff;
}

.background-tertiary--900 {
  background-color: white;
}

.border-primary--100 {
  border-color: #ff1a1a;
}

.border-primary--200 {
  border-color: #ff3333;
}

.border-primary--300 {
  border-color: #ff4d4d;
}

.border-primary--400 {
  border-color: #ff6666;
}

.border-primary--500 {
  border-color: #ff8080;
}

.border-primary--600 {
  border-color: #ff9999;
}

.border-primary--700 {
  border-color: #ffb3b3;
}

.border-primary--800 {
  border-color: #ffcccc;
}

.border-primary--900 {
  border-color: #ffe6e6;
}

.border-secondary--100 {
  border-color: #1aff1a;
}

.border-secondary--200 {
  border-color: #33ff33;
}

.border-secondary--300 {
  border-color: #4dff4d;
}

.border-secondary--400 {
  border-color: #66ff66;
}

.border-secondary--500 {
  border-color: #80ff80;
}

.border-secondary--600 {
  border-color: #99ff99;
}

.border-secondary--700 {
  border-color: #b3ffb3;
}

.border-secondary--800 {
  border-color: #ccffcc;
}

.border-secondary--900 {
  border-color: #e6ffe6;
}

.border-tertiary--100 {
  border-color: #33ffff;
}

.border-tertiary--200 {
  border-color: #4dffff;
}

.border-tertiary--300 {
  border-color: #66ffff;
}

.border-tertiary--400 {
  border-color: #80ffff;
}

.border-tertiary--500 {
  border-color: #99ffff;
}

.border-tertiary--600 {
  border-color: #b3ffff;
}

.border-tertiary--700 {
  border-color: #ccffff;
}

.border-tertiary--800 {
  border-color: #e6ffff;
}

.border-tertiary--900 {
  border-color: white;
}

settings.json

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