Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="outcome">
  OUTCOME
  </div>
  <div class="outcome">
  OUTCOME
  </div>
  <div class="outcome">
  OUTCOME
  </div>

SassMeister-input.scss

// ----
// Sass (v3.5.6)
// Compass (vundefined)
// ----

    // Colors to use
    $colors:(
        red:  red,
        blue: blue
    );
    
    // Generated color lists
    $generated: ();

    // For each defined color
    @each $name, $color in $colors {
        
        // Current color map
        $current : ();
        
        // Generates the colors transformations (shades)
        @for $i from 1 through 9 {
            $current: append($current, lighten($color, (100 - ($i * 10))));
        }
        
        // Adds the current color
        $current: append($current, $color);
        
        // Generates the colors transformations (tints)
        @for $i from 11 through 19 {
            $current: append($current, darken($color, ($i * 10) - 100));
        }
        
        // If the map has not been created
        @if map-has-key($generated, $name) == false {
            $generated: map-merge($generated, ($color : $current));
        }
        
    }
    
    // Create a function to get the desired color
    @function get-color($color, $index: 10) { // Default to base color
    
        // Get the desired color map
        $list: map-get($generated, $color);
        
        // Return the color index
        @return nth($list, $index);
    
    }
    
    .foo {
      color: get-color(blue, 19);
    }

SassMeister-output.css

.foo {
  color: black;
}

SassMeister-rendered.html

<div class="outcome">
  OUTCOME
  </div>
  <div class="outcome">
  OUTCOME
  </div>
  <div class="outcome">
  OUTCOME
  </div>