Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
<div class="ibm-colors">
  <h1>IBM Colors</h1>
  <div class="blue-10">$blue-10</div>
  <div class="blue-20"></div>
  <div class="blue-30"></div>
  <div class="blue-40"></div>
  <div class="blue-90"></div>
  <div class="gray"></div>
  <div class="green"></div>
  <div class="red"></div>
  <div class="teal"></div>
  <div class="white"></div>
  <div class="yellow"></div>
</div>
<div class="bluemix-colors">
  <h1>Bluemix Colors</h1>
  <div class="white-mod">$white-mod</div>
  <div class="blue-mod-70">$blue-mod-70</div>
  <div class="blue-mod-90">$blue-mod-90</div>
  <div class="gray-mod">$gray-mod</div>
  <div class="gray-mod-dark">$gray-mod-dark</div>
  <div class="gray-mod-darker">$gray-mod-darker</div>
  <div class="gray-mod-darkest">$gray-mod-darkest</div>
</div>
</div>

SassMeister-input.scss

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

////////////////////////////////
//                            //
// IBM Design Language        //
// Color Palette              //
//                            //
////////////////////////////////

//////////////////////////////
// Color Palette
//
// Gets the specified color from the specified color palette
//
// Usage:
//
// background: color('blue', 80); // #1d3649
// background: color('blue');     // #4178be
//////////////////////////////
@function color($palette, $tone: 'core') {
  // Add a little helper so tone can be passed as single digit number
  @if type-of($tone) == 'number' {
    @if $tone % 10 == $tone {
      $tone: $tone * 10;
    }
  }

  // Because it's spelled gr(a|e)y and we've got spaces
  @if $palette == 'grey' {
    $palette: 'gray';
  }
  @else if $palette == 'warm-grey' or $palette == 'warm grey' or $palette == 'warm gray' {
    $palette: 'warm-gray';
  }
  @else if $palette == 'cool-grey' or $palette == 'cool grey' or $palette == 'cool gray' {
    $palette: 'cool-gray';
  }
  @else if $palette == 'neutral white' {
    $palette: 'neutral-white';
  }
  @else if $palette == 'cool white' {
    $palette: 'cool-white';
  }
  @else if $palette == 'warm white' {
    $palette: 'warm-white';
  }

  @return map-get(map-get($__ibm-color-palettes, $palette), $tone);
}

//////////////////////////////
// Tint and Shade Functions
//////////////////////////////
// Internal helper: finds the palette and key of a color
@function _ibm-find-color($color) {
  $found-index: false;
  $found-palette: false;
  @each $palette, $vals in $__ibm-color-palettes {
    @if not $found-index {
      @each $key, $clr in $vals {
	@if $color == $clr and $key != 'core' {
	  $found-index: $key;
	  $found-palette: $palette;
	}
      }
    }
  }

  $error-message: 'Color #{$color} is not an IBM color';

  @if not $found-index {
    @if feature-exists(at-error) {
      @error $error-message;
    }
    @else {
      @warn $error-message;
    }
  }
  @return ('index': $found-index, 'palette': $found-palette);
}

// Internal helper: transforms amount into base 10, rounding
@function _ibm-round-tint-shade($amount) {
  @if $amount < 10 {
    $amount: $amount * 10;
  }

  $return: round($amount);
  $remainder: $return % 10;
  $return: $return - $remainder;
  @if $remainder >= 5 {
    $return: $return + 10;
  }

  @return $return;
}

//////////////////////////////
// Tint an IBM Color
//
// Pass in a color (as retrieved from the `color` function) and how many stops you want to tint (lighten) the color along its palette.
// Pegged to the lightest color in the palette
//////////////////////////////
@function color-tint($color, $amount) {
  $key: _ibm-find-color($color);
  $index: map-get($key, 'index');
  $palette: map-get($key, 'palette');
  $move: _ibm-round-tint-shade($amount);

  $index: $index - $move;
  @if ($index < 10) {
    $index: 10;
  }

  @return color($palette, $index);
}

//////////////////////////////
// Shade an IBM Color
//
// Pass in a color (as retrieved from the `color` function) and how many stops you want to shade (darken) the color along its palette.
// Pegged to the darkest color in the palette
//////////////////////////////
@function color-shade($color, $amount) {
  $key: _ibm-find-color($color);
  $index: map-get($key, 'index');
  $palette: map-get($key, 'palette');
  $move: _ibm-round-tint-shade($amount);

  $index: $index + $move;
  @if ($index > 100) {
    $index: 100;
  }

  @return color($palette, $index);
}

//////////////////////////////
// Get Colors
//
// Lists out available colors
//////////////////////////////
@function get-colors($palette: null) {
  // Return a list of colors available if nothing is passed in
  @if $palette == null {
    @return map-keys($__ibm-color-palettes);
  }
  // Return the full color map if 'all' is passed in
  @else if $palette == 'all' {
    @return $__ibm-color-palettes;
  }
  // Return just the color map if a specific color is passed in
  @else {
    @return map-get($__ibm-color-palettes, $palette);
  }
}

//////////////////////////////
// IBM Color Palettes
//////////////////////////////
$__ibm-color-palettes: (
  'blue': (
    core: #4178be,
    10: #c0e6ff,
    20: #7cc7ff,
    30: #5aaafa,
    40: #5596e6,
    50: #4178be,
    60: #325c80,
    70: #264a60,
    80: #1d3649,
    90: #152935,
    100: #010205
  ),
  'green': (
    core: #4b8400,
    10: #c8f08f,
    20: #b4e051,
    30: #8cd211,
    40: #5aa700,
    50: #4b8400,
    60: #2d660a,
    70: #144d14,
    80: #0a3c02,
    90: #0c2808,
    100: #010200
  ),
  'teal': (
    core: #008571,
    10: #a7fae6,
    20: #6eedd8,
    30: #41d6c3,
    40: #00b4a0,
    50: #008571,
    60: #006d5d,
    70: #005448,
    80: #003c32,
    90: #012b22,
    100: #000202
  ),
  'purple': (
    core: #9855d4,
    10: #eed2ff,
    20: #d7aaff,
    30: #ba8ff7,
    40: #af6ee8,
    50: #9855d4,
    60: #734098,
    70: #562f72,
    80: #412356,
    90: #311a41,
    100: #030103
  ),
  'magenta': (
    core: #db2780,
    10: #ffd2ff,
    20: #ff9eee,
    30: #ff71d4,
    40: #ff3ca0,
    50: #db2780,
    60: #a6266e,
    70: #7c1c58,
    80: #601146,
    90: #3a0b2e,
    100: #040102
  ),
  'red': (
    core: #e71d32,
    10: #ffd2dd,
    20: #ffa5b4,
    30: #ff7d87,
    40: #ff5050,
    50: #e71d32,
    60: #ad1625,
    70: #8c101c,
    80: #6e0a1e,
    90: #4c0a17,
    100: #040001
  ),
  'orange': (
    core: #ff7832,
    10: #ffd4a0,
    20: #ffa573,
    30: #ff7832,
    40: #ff5003,
    50: #d74108,
    60: #a53725,
    70: #872a0f,
    80: #6d120f,
    90: #43100b,
    100: #030100
  ),
  'yellow': (
    core: #fdd600,
    10: #fde876,
    20: #fdd600,
    30: #efc100,
    40: #be9b00,
    50: #8c7300,
    60: #735f00,
    70: #574a00,
    80: #3c3200,
    90: #281e00,
    100: #020100
  ),
  'gray': (
     core: #777677,
     10: #e0e0e0,
     20: #c7c7c7,
     30: #aeaeae,
     40: #959595,
     50: #777677,
     60: #5a5a5a,
     70: #464646,
     80: #323232,
     90: #121212,
    100: #000
  ),
  'cool-gray': (
     core: #6d7777,
     10: #dfe9e9,
     20: #c8d2d2,
     30: #aeb8b8,
     40: #959f9f,
     50: #6d7777,
     60: #5a6464,
     70: #3c4646,
     80: #323c3c,
     90: #0d1111,
    100: #000203
  ),
  'warm-gray': (
     core: #7d7373,
     10: #e9e0e0,
     20: #d0c7c7,
     30: #b8aeae,
     40: #9e9494,
     50: #7d7373,
     60: #645a5a,
     70: #504646,
     80: #3c3232,
     90: #1a1314,
    100: #030000
  ),
  'neutral-white': (
    core: #fdfdfd,
    10: #fdfdfd,
    20: #f9f9f9,
    30: #f4f4f4,
    40: #ececec
  ),
  'cool-white': (
    core: #fbfcfc,
    10: #fbfcfc,
    20: #f9f9fb,
    30: #f0f2f4,
    40: #ecf2f2
  ),
  'warm-white': (
    core: #fdfbfb,
    10: #fdfbfb,
    20: #fdfbfb,
    30: #f7f5f5,
    40: #f2eeee
  ),
  'black': (
    core: #000
  ),
  'white': (
    core: #fff
  )
);

$blue-10: color('blue', 10);
$blue-20: color('blue', 20);
$blue-30: color('blue', 30);
$blue-40: color('blue', 40);
$blue-90: color('blue', 90);
$gray: color('cool-gray', 60);
$green: color('green', 30);
$red: color('red', 40);
$teal: color('teal', 20);
$white: color('white');
$yellow: color('yellow', 30);

$white-mod: #2C3E48;
$blue-mod-70: #2D3F49;
$blue-mod-90: #20343E;
$gray-mod: #8C9BA5;
$gray-mod-dark: #485760;
$gray-mod-darker: #42535C;
$gray-mod-darkest: #394B54;

.container {
  display: flex;
}
.ibm-colors {
  margin-right: 3em;
  div {
    width: 100px;
    height: 100px;
    color: white;
  }
  
  .blue-10 { background-color: $blue-10; }
  .blue-20 { background-color: $blue-20; }
  .blue-30 { background-color: $blue-30; }
  .blue-40 { background-color: $blue-40; }
  .blue-90 { background-color: $blue-90; }
  .gray { background-color: $gray; }
  .green { background-color: $green; }
  .red { background-color: $red; }
  .teal { background-color: $teal; }
  .yellow { background-color: $yellow; }
}


.bluemix-colors {
  div {
    width: 100px;
    height: 100px;
    color: white;
  }
  .white-mod {
    background-color: $white-mod;
  }

  .blue-mod-70 {
    background-color: $blue-mod-70;
  }

  .blue-mod-90 {
    background-color: $blue-mod-90;
  }

  .gray-mod {background-color: $gray-mod;}
  .gray-mod-dark {background-color: $gray-mod-dark;}
  .gray-mod-darker {background-color: $gray-mod-darker;}
  .gray-mod-darkest {background-color: $gray-mod-darkest;}
}

SassMeister-output.css

.container {
  display: flex;
}

.ibm-colors {
  margin-right: 3em;
}

.ibm-colors div {
  width: 100px;
  height: 100px;
  color: white;
}

.ibm-colors .blue-10 {
  background-color: #c0e6ff;
}

.ibm-colors .blue-20 {
  background-color: #7cc7ff;
}

.ibm-colors .blue-30 {
  background-color: #5aaafa;
}

.ibm-colors .blue-40 {
  background-color: #5596e6;
}

.ibm-colors .blue-90 {
  background-color: #152935;
}

.ibm-colors .gray {
  background-color: #5a6464;
}

.ibm-colors .green {
  background-color: #8cd211;
}

.ibm-colors .red {
  background-color: #ff5050;
}

.ibm-colors .teal {
  background-color: #6eedd8;
}

.ibm-colors .yellow {
  background-color: #efc100;
}

.bluemix-colors div {
  width: 100px;
  height: 100px;
  color: white;
}

.bluemix-colors .white-mod {
  background-color: #2C3E48;
}

.bluemix-colors .blue-mod-70 {
  background-color: #2D3F49;
}

.bluemix-colors .blue-mod-90 {
  background-color: #20343E;
}

.bluemix-colors .gray-mod {
  background-color: #8C9BA5;
}

.bluemix-colors .gray-mod-dark {
  background-color: #485760;
}

.bluemix-colors .gray-mod-darker {
  background-color: #42535C;
}

.bluemix-colors .gray-mod-darkest {
  background-color: #394B54;
}

SassMeister-rendered.html

<div class="container">
<div class="ibm-colors">
  <h1>IBM Colors</h1>
  <div class="blue-10">$blue-10</div>
  <div class="blue-20"></div>
  <div class="blue-30"></div>
  <div class="blue-40"></div>
  <div class="blue-90"></div>
  <div class="gray"></div>
  <div class="green"></div>
  <div class="red"></div>
  <div class="teal"></div>
  <div class="white"></div>
  <div class="yellow"></div>
</div>
<div class="bluemix-colors">
  <h1>Bluemix Colors</h1>
  <div class="white-mod">$white-mod</div>
  <div class="blue-mod-70">$blue-mod-70</div>
  <div class="blue-mod-90">$blue-mod-90</div>
  <div class="gray-mod">$gray-mod</div>
  <div class="gray-mod-dark">$gray-mod-dark</div>
  <div class="gray-mod-darker">$gray-mod-darker</div>
  <div class="gray-mod-darkest">$gray-mod-darkest</div>
</div>
</div>