Google Material Design: Sass Color Function

README.md

Google Material Design Colors

https://www.google.com/design/spec/style/color.html

Usage

The 500 color will be used if you use the variable name alone.

.base-color {
  color: $blue;
}

You can use the color() mixin to modify the color as shown in Google's color palette.

.secondary-color {
  color: color($blue-grey, 900);
}

.another-secondary-color {
  color: color($deep-orange, A400);
}

color.scss

$amber: #ffc107;
$black: #000;
$blue: #2196f3;
$blue-grey: #607d8b;
$brown: #795548;
$cyan: #00bcd4;
$deep-orange: #ff5722;
$deep-purple: #673ab7;
$green: #4caf50;
$grey: #9e9e9e;
$indigo: #3f51b5;
$light-blue: #03a9f4;
$light-green: #8bc34a;
$lime: #cddc39;
$orange: #ff9800;
$pink: #e91e63;
$purple: #9c27b0;
$red: #f44336;
$teal: #009688;
$white: #fff;
$yellow: #ffeb3b;

$amber-colors: #fff8e1, #ffecb3, #ffe082, #ffd54f, #ffca28, #ffc107, #ffb300, #ffa000, #ff8f00, #ff6f00, #ffe57f, #ffd740, #ffc400, #ffab00;
$blue-colors: #e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1, #82b1ff, #448aff, #2979ff, #2962ff;
$blue-grey-colors: #eceff1, #cfd8dc, #b0bec5, #90a4ae, #78909c, #607d8b, #546e7a, #455a64, #37474f, #263238;
$brown-colors: #efebe9, #d7ccc8, #bcaaa4, #a1887f, #8d6e63, #795548, #6d4c41, #5d4037, #4e342e, #3e2723;
$cyan-colors: #e0f7fa, #b2ebf2, #80deea, #4dd0e1, #26c6da, #00bcd4, #00acc1, #0097a7, #00838f, #006064, #84ffff, #18ffff, #00e5ff, #00b8d4;
$deep-orange-colors: #fbe9e7, #ffccbc, #ffab91, #ff8a65, #ff7043, #ff5722, #f4511e, #e64a19, #d84315, #bf360c, #ff9e80, #ff6e40, #ff3d00, #dd2c00;
$deep-purple-colors: #ede7f6, #d1c4e9, #b39ddb, #9575cd, #7e57c2, #673ab7, #5e35b1, #512da8, #4527a0, #311b92, #b388ff, #7c4dff, #651fff, #6200ea;
$green-colors: #e8f5e9, #c8e6c9, #a5d6a7, #81c784, #66bb6a, #4caf50, #43a047, #388e3c, #2e7d32, #1b5e20, #b9f6ca, #69f0ae, #00e676, #00c853;
$grey-colors: #fafafa, #f5f5f5, #eeeeee, #e0e0e0, #bdbdbd, #9e9e9e, #757575, #616161, #424242, #212121;
$indigo-colors: #e8eaf6, #c5cae9, #9fa8da, #7986cb, #5c6bc0, #3f51b5, #3949ab, #303f9f, #283593, #1a237e, #8c9eff, #536dfe, #3d5afe, #304ffe;
$light-blue-colors: #e1f5fe, #b3e5fc, #81d4fa, #4fc3f7, #29b6f6, #03a9f4, #039be5, #0288d1, #0277bd, #01579b, #80d8ff, #40c4ff, #00b0ff, #0091ea;
$light-green-colors: #f1f8e9, #dcedc8, #c5e1a5, #aed581, #9ccc65, #8bc34a, #7cb342, #689f38, #558b2f, #33691e, #ccff90, #b2ff59, #76ff03, #64dd17;
$lime-colors: #f9fbe7, #f0f4c3, #e6ee9c, #dce775, #d4e157, #cddc39, #c0ca33, #afb42b, #9e9d24, #827717, #f4ff81, #eeff41, #c6ff00, #aeea00;
$orange-colors: #fff3e0, #ffe0b2, #ffcc80, #ffb74d, #ffa726, #ff9800, #fb8c00, #f57c00, #ef6c00, #e65100, #ffd180, #ffab40, #ff9100, #ff6d00;
$pink-colors: #fce4ec, #f8bbd0, #f48fb1, #f06292, #ec407a, #e91e63, #d81b60, #c2185b, #ad1457, #880e4f, #ff80ab, #ff4081, #f50057, #c51162;
$purple-colors: #f3e5f5, #e1bee7, #ce93d8, #ba68c8, #ab47bc, #9c27b0, #8e24aa, #7b1fa2, #6a1b9a, #4a148c, #ea80fc, #e040fb, #d500f9, #aa00ff;
$red-colors: #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350, #f44336, #e53935, #d32f2f, #c62828, #b71c1c, #ff8a80, #ff5252, #ff1744, #d50000;
$teal-colors: #e0f2f1, #b2dfdb, #80cbc4, #4db6ac, #26a69a, #009688, #00897b, #00796b, #00695c, #004d40, #a7ffeb, #64ffda, #1de9b6, #00bfa5;
$yellow-colors: #fffde7, #fff9c4, #fff59d, #fff176, #ffee58, #ffeb3b, #fdd835, #fbc02d, #f9a825, #f57f17, #ffff8d, #ffff00, #ffea00, #ffd600;

@function color($color, $number: 500) {
  $colors: $indigo-colors;
  $index: 6;

  @if $color == $amber {
    $colors: $amber-colors;
  } @else if $color == $black {
    @return $black;
  } @else if $color == $blue {
    $colors: $blue-colors;
  } @else if $color == $blue-grey {
    $colors: $blue-grey-colors;
  } @else if $color == $brown {
    $colors: $brown-colors;
  } @else if $color == $cyan {
    $colors: $cyan-colors;
  } @else if $color == $deep-orange {
    $colors: $deep-orange-colors;
  } @else if $color == $deep-purple {
    $colors: $deep-purple-colors;
  } @else if $color == $green {
    $colors: $green-colors;
  } @else if $color == $grey {
    $colors: $grey-colors;
  } @else if $color == $indigo {
    $colors: $indigo-colors;
  } @else if $color == $light-blue {
    $colors: $light-blue-colors;
  } @else if $color == $light-green {
    $colors: $light-green-colors;
  } @else if $color == $green {
    $colors: $green-colors;
  } @else if $color == $lime {
    $colors: $lime-colors;
  } @else if $color == $orange {
    $colors: $orange-colors;
  } @else if $color == $pink {
    $colors: $pink-colors;
  } @else if $color == $purple {
    $colors: $purple-colors;
  } @else if $color == $red {
    $colors: $red-colors;
  } @else if $color == $teal {
    $colors: $teal-colors;
  } @else if $color == $white {
    @return $white;
  } @else if $color == $yellow {
    $colors: $yellow-colors;
  }

  @if $number == 50 {
    $index: 1;
  } @else if $number == 100 {
    $index: 2;
  } @else if $number == 200 {
    $index: 3;
  } @else if $number == 300 {
    $index: 4;
  } @else if $number == 400 {
    $index: 5;
  } @else if $number == 500 {
    $index: 6;
  } @else if $number == 600 {
    $index: 7;
  } @else if $number == 700 {
    $index: 8;
  } @else if $number == 800 {
    $index: 9;
  } @else if $number == 900 {
    $index: 10;
  } @else {
    @if $color != $blue-grey and $color != $brown and $color != $grey {
      @if $number == A100 {
        $index: 11;
      } @else if $number == A200 {
        $index: 12;
      } @else if $number == A400 {
        $index: 13;
      } @else if $number == A700 {
        $index: 14;
      }
    }
  }

  @return nth($colors, $index);
}