<div class="color color-50">50</div>
<div class="color color-100">100</div>
<div class="color color-200">200</div>
<div class="color color-300">300</div>
<div class="color color-400">400</div>
<div class="color color-500">500</div>
<div class="color color-600">600</div>
<div class="color color-700">700</div>
<div class="color color-800">800</div>
<div class="color color-900">900</div>
<div class="color color-A100">A100</div>
<div class="color color-A200">A200</div>
<div class="color color-A400">A400</div>
<div class="color color-A700">A700</div>
$values: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700);

@function createPalette($color) {
  $white: #fff;
  $black: #000;
  $baseDark: multiply($color, $color);

  $palette: (
    50: mix($color, $white, 12%),
    100: mix($color, $white, 30%),
    200: mix($color, $white, 50%),
    300: mix($color, $white, 70%),
    400: mix($color, $white, 85%),
    500: mix($color, $white, 100%),
    600: mix($color, $baseDark, 87%),
    700: mix($color, $baseDark, 70%),
    800: mix($color, $baseDark, 54%),
    900: mix($color, $baseDark, 25%),
    A100: lighten(saturate(mix($black, $baseDark, 15%), 80%), 65%),
    A200: lighten(saturate(mix($black, $baseDark, 15%), 80%), 55%),
    A400: lighten(saturate(mix($black, $baseDark, 15%), 100%), 45%),
    A700: lighten(saturate(mix($black, $baseDark, 15%), 100%), 40%),
  );

  /* 生成對比色,這裡用使用在文字上 */
  $contrast: ();
  @each $v in $values {
    $contrast: map-merge(
      $contrast,
      (
        $v: getContrast(map-get($palette, $v)),
      )
    );
  }

  /* 將色系與對比系結組合 */
  $palette: map-merge(
    $palette,
    (
      contrast: $contrast,
    )
  );
  @return $palette;
}

@function multiply($rgb1, $rgb2) {
  $r: floor(red($rgb1) * red($rgb2) / 255);
  $g: floor(green($rgb1) * green($rgb2) / 255);
  $b: floor(blue($rgb1) * blue($rgb2) / 255);
  @return rgb($r, $g, $b);
}

@function getBrightness($color) {
  @return (red($color) * 299 + green($color) * 587 + blue($color) * 114) / 1000;
}

@function isLight($color) {
  @return getBrightness($color) >= 128;
}

@function getContrast($color) {
  @if isLight($color) {
    @return #000;
  } @else {
    @return #fff;
  }
}

/************************/

$primary-color: #0087dc;
$primary-palette: createPalette($primary-color);

@each $key, $val in $primary-palette {
  @if $key != contrast {
    .color-#{$key} {
      background: #{$val};
      color: map-get($primary-palette, contrast, $key);
      &::after {
        content: "#{$val}";
        display: inline-block;
        margin-left: 8px;
      }
    }
  }
}


body, html {
  font-family: 'Arial';
}

.color {
  width: 300px;
  line-height: 50px;
  text-align: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.