Generated by SassMeister.com.

SassMeister-input-HTML.html

    <ul class="sg-colors">
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
</ul>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// Color Toolkit
// =============


// Colors
// ------
@mixin colors(
  $map
) {
  $colors: map-merge($colors, $map) !global;
}


// Color
// -----
@function color($color) {
  // Parse arguments
  $color: map-get($colors, $color) or $color;
  $base: nth($color, 1);
  $adjust: if(length($color) > 1, nth($color, 2), ());

  // Recursive check
  $color: if(map-has-key($colors, $base), color($base), $base);

  // Adjustments
  @each $function, $value in $adjust {
    @if function-exists($function) {
      $color: call($function, $color, $value);
    } @else {
      @warn "#{$function} is not a valid color function.";
    }
  }

  @return $color;
}


// Tint
// ----
@function tint(
  $color,
  $percentage
) {
  $color: color($color);

  @return mix(#fff, $color, $percentage);
}


// Shade
// -----
@function shade(
  $color,
  $percentage
) {
  $color: color($color);

  @return mix(#000, $color, $percentage);
}


// Brightness
// ----------
@function brightness(
  $color
) {
  $color: color($color);

  $_red: red($color) * .299;
  $_green: green($color) * .587;
  $_blue: blue($color) * .114;

  @return ($_red + $_green + $_blue) / 255 * 100%;
}


// Contrast
// --------
@function contrast(
  $color,
  $dark: contrast-dark,
  $light: contrast-light
) {
  $color: color($color);
  $dark: color($dark);
  $light: color($light);

  @if not(type-of($dark) == color) {
    $dark: #000;
  }

  @if not(type-of($light) == color) {
    $light: #fff;
  }

  $_color-brightness: brightness($color);
  $_dark-text-brightness: brightness($dark);
  $_light-text-brightness: brightness($light);

  $_light-contrast: abs($_color-brightness - $_light-text-brightness);
  $_dark-contrast: abs($_color-brightness - $_dark-text-brightness);

  @return if($_light-contrast > $_dark-contrast, $light, $dark);
}


// Contrasted
// ----------
@mixin contrasted(
  $background,
  $dark: contrast-dark,
  $light: contrast-light
) {
  $background: color($background);

  background-color: $background;
  color: contrast($background, $dark, $light);
}


$colors: (
  'gray': rgb(92, 102, 111),
  'dark': 'gray' ('shade': 60%),
  'light': 'gray' ('tint': 85%),
  'white': #fff,
  'red': rgb(207, 10, 44),
  'green': #008000,

  'primary': 'red',
  'background': 'white',
  'text': 'dark',
  'action': 'primary',
  'focus': 'action' ('shade': 20%),
  'go': 'green',

  'contrast-dark': 'dark',
  'contrast-light': 'white',
);

.sg-colors {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 2rem;
}

.sg-color {
  border: 1px solid color('background');
  flex: 1 1 14rem;
  padding: 2rem;

  @for $i from 1 through length($colors) {
    $color: nth(map-keys($colors), $i);

    &:nth-child(#{$i}) {
      background: color($color);
      color: contrast($color);

      &:after {
        content: $color ': #{color($color)}';
      }
    }
  }
}

SassMeister-output.css

.sg-colors {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 2rem;
}

.sg-color {
  border: 1px solid #fff;
  flex: 1 1 14rem;
  padding: 2rem;
}

.sg-color:nth-child(1) {
  background: #5c666f;
  color: #fff;
}

.sg-color:nth-child(1):after {
  content: "gray" ": #5c666f";
}

.sg-color:nth-child(2) {
  background: #25292c;
  color: #fff;
}

.sg-color:nth-child(2):after {
  content: "dark" ": #25292c";
}

.sg-color:nth-child(3) {
  background: #e7e8e9;
  color: #25292c;
}

.sg-color:nth-child(3):after {
  content: "light" ": #e7e8e9";
}

.sg-color:nth-child(4) {
  background: #fff;
  color: #25292c;
}

.sg-color:nth-child(4):after {
  content: "white" ": #fff";
}

.sg-color:nth-child(5) {
  background: #cf0a2c;
  color: #fff;
}

.sg-color:nth-child(5):after {
  content: "red" ": #cf0a2c";
}

.sg-color:nth-child(6) {
  background: #008000;
  color: #fff;
}

.sg-color:nth-child(6):after {
  content: "green" ": #008000";
}

.sg-color:nth-child(7) {
  background: #cf0a2c;
  color: #fff;
}

.sg-color:nth-child(7):after {
  content: "primary" ": #cf0a2c";
}

.sg-color:nth-child(8) {
  background: #fff;
  color: #25292c;
}

.sg-color:nth-child(8):after {
  content: "background" ": #fff";
}

.sg-color:nth-child(9) {
  background: #25292c;
  color: #fff;
}

.sg-color:nth-child(9):after {
  content: "text" ": #25292c";
}

.sg-color:nth-child(10) {
  background: #cf0a2c;
  color: #fff;
}

.sg-color:nth-child(10):after {
  content: "action" ": #cf0a2c";
}

.sg-color:nth-child(11) {
  background: #a60823;
  color: #fff;
}

.sg-color:nth-child(11):after {
  content: "focus" ": #a60823";
}

.sg-color:nth-child(12) {
  background: #008000;
  color: #fff;
}

.sg-color:nth-child(12):after {
  content: "go" ": #008000";
}

.sg-color:nth-child(13) {
  background: #25292c;
  color: #fff;
}

.sg-color:nth-child(13):after {
  content: "contrast-dark" ": #25292c";
}

.sg-color:nth-child(14) {
  background: #fff;
  color: #25292c;
}

.sg-color:nth-child(14):after {
  content: "contrast-light" ": #fff";
}

SassMeister-rendered.html

    <ul class="sg-colors">
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
</ul>