Generated by SassMeister.com.

SassMeister-input-HTML.html

img 

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

////////////////////////////////
//                            //
// 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
  @if $palette == 'grey' {
    $palette: 'gray';
  }
  @else if $palette == 'warm-grey' {
    $palette: 'warm-gray';
  }
  @else if $palette == 'cool-grey' {
    $palette: 'cool-gray';
  }

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

//////////////////////////////
// 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: #6eb400,
    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: #586262,
     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
  )
);


// EXAMPLE USAGE:
div {
  background: color('red', 10);
}

$color--primary: color('red', 50);

p {
  color: $color--primary;
}

SassMeister-output.css

div {
  background: #ffd2dd;
}

p {
  color: #e71d32;
}

SassMeister-rendered.html

img