Generated by SassMeister.com #scss

input.scss

@use 'sass:math';
@use 'sass:map';
 
// $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: math.floor(red($rgb1) * red($rgb2) / 255);
  $g: math.floor(green($rgb1) * green($rgb2) / 255);
  $b: math.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;
  }
}



$testColor: #3F51B5;


@each $shade, $color in createPalette($testColor) {
    // @debug "divider offset: #{$color}";
  .primary-#{$shade} {
    background-color: $color;
    color:getContrast($color);
    animation-name: primary#{$shade};
    &:after {
      content: "#{$color}";
    }
  }
  @keyframes primary#{$shade} {
    0% {
      background: $testColor;
    }
    100% {
      background: $color;
    }
  }
}


.palette {
  display: grid;
  writing-mode: vertical-lr;
  grid-template-rows: repeat(14, 1fr);
  width: 100vw;
  div {
    display: inline-block;
    border: none;
    box-sizing: border-box;
    height: 100vh;
    padding: 1vw;
    overflow: hidden;
    animation-duration: 1s;
    animation-delay: .5s;
    background: $testColor;
    animation-fill-mode: forwards;
    font-size: 2vw;
    font-family: Inconsolata, monospace;
    @for $i from 1 to 15 {
      &:nth-child(#{$i}) {
        animation-delay: $i * 0.05s;
      }
    }
    &:before, &:after {
      opacity: 0;
      animation: fadeIn 1s .5s ease forwards;
    }
    &:before {
      content: attr(class); 
    }
    &:after {
      float: right;
    }
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

markup.html

<div class="palette"> 
  <div class="primary-50"></div>
  <div class="primary-100"></div>
  <div class="primary-200"></div>
  <div class="primary-300"></div>
  <div class="primary-400"></div>
  <div class="primary-500"></div>
  <div class="primary-600"></div>
  <div class="primary-700"></div>
  <div class="primary-800"></div>
  <div class="primary-900"></div>
  <div class="primary-A100"></div>
  <div class="primary-A200"></div>
  <div class="primary-A400"></div>
  <div class="primary-A700"></div>
</div>

output.css

.primary-50 {
  background-color: #e8eaf6;
  color: #000;
  animation-name: primary50;
}
.primary-50:after {
  content: "#e8eaf6";
}

@keyframes primary50 {
  0% {
    background: #3F51B5;
  }
  100% {
    background: #e8eaf6;
  }
}
.primary-100 {
  background-color: #c5cbe9;
  color: #000;
  animation-name: primary100;
}
.primary-100:after {
  content: "#c5cbe9";
}

@keyframes primary100 {
  0% {
    background: #3F51B5;
  }
  100% {
    background: #c5cbe9;
  }
}
.primary-200 {
  background-color: #9fa8da;
  color: #000;
  animation-name: primary200;
}
.primary-200:after {
  content: "#9fa8da";
}

@keyframes primary200 {
  0% {
    background: #3F51B5;
  }
  100% {
    background: #9fa8da;
  }
}
.primary-300 {
  background-color: #7985cb;
  color: #000;
  animation-name: primary300;
}
.primary-300:after {
  content: "#7985cb";
}

@keyframes primary300 {
  0% {
    background: #3F51B5;
  }
  100% {
    background: #7985cb;
  }
}
.primary-400 {
  background-color: #5c6bc0;
  color: #fff;
  animation-name: primary400;
}
.primary-400:after {
  content: "#5c6bc0";
}

@keyframes primary400 {
  0% {
    background: #3F51B5;
  }
  100% {
    background: #5c6bc0;
  }
}
.primary-500 {
  background-color: #3f51b5;
  color: #fff;
  animation-name: primary500;
}
.primary-500:after {
  content: "#3f51b5";
}

@keyframes primary500 {
  0% {
    background: #3F51B5;
  }
  100% {
    background: #3f51b5;
  }
}
.primary-600 {
  background-color: #394aae;
  color: #fff;
  animation-name: primary600;
}
.primary-600:after {
  content: "#394aae";
}

@keyframes primary600 {
  0% {
    background: #3F51B5;
  }
  100% {
    background: #394aae;
  }
}
.primary-700 {
  background-color: #3140a5;
  color: #fff;
  animation-name: primary700;
}
.primary-700:after {
  content: "#3140a5";
}

@keyframes primary700 {
  0% {
    background: #3F51B5;
  }
  100% {
    background: #3140a5;
  }
}
.primary-800 {
  background-color: #29379d;
  color: #fff;
  animation-name: primary800;
}
.primary-800:after {
  content: "#29379d";
}

@keyframes primary800 {
  0% {
    background: #3F51B5;
  }
  100% {
    background: #29379d;
  }
}
.primary-900 {
  background-color: #1b278d;
  color: #fff;
  animation-name: primary900;
}
.primary-900:after {
  content: "#1b278d";
}

@keyframes primary900 {
  0% {
    background: #3F51B5;
  }
  100% {
    background: #1b278d;
  }
}
.primary-A100 {
  background-color: #c7cbff;
  color: #000;
  animation-name: primaryA100;
}
.primary-A100:after {
  content: "#c7cbff";
}

@keyframes primaryA100 {
  0% {
    background: #3F51B5;
  }
  100% {
    background: #c7cbff;
  }
}
.primary-A200 {
  background-color: #949cff;
  color: #000;
  animation-name: primaryA200;
}
.primary-A200:after {
  content: "#949cff";
}

@keyframes primaryA200 {
  0% {
    background: #3F51B5;
  }
  100% {
    background: #949cff;
  }
}
.primary-A400 {
  background-color: #616eff;
  color: #fff;
  animation-name: primaryA400;
}
.primary-A400:after {
  content: "#616eff";
}

@keyframes primaryA400 {
  0% {
    background: #3F51B5;
  }
  100% {
    background: #616eff;
  }
}
.primary-A700 {
  background-color: #4756ff;
  color: #fff;
  animation-name: primaryA700;
}
.primary-A700:after {
  content: "#4756ff";
}

@keyframes primaryA700 {
  0% {
    background: #3F51B5;
  }
  100% {
    background: #4756ff;
  }
}
.palette {
  display: grid;
  writing-mode: vertical-lr;
  grid-template-rows: repeat(14, 1fr);
  width: 100vw;
}
.palette div {
  display: inline-block;
  border: none;
  box-sizing: border-box;
  height: 100vh;
  padding: 1vw;
  overflow: hidden;
  animation-duration: 1s;
  animation-delay: 0.5s;
  background: #3F51B5;
  animation-fill-mode: forwards;
  font-size: 2vw;
  font-family: Inconsolata, monospace;
}
.palette div:nth-child(1) {
  animation-delay: 0.05s;
}
.palette div:nth-child(2) {
  animation-delay: 0.1s;
}
.palette div:nth-child(3) {
  animation-delay: 0.15s;
}
.palette div:nth-child(4) {
  animation-delay: 0.2s;
}
.palette div:nth-child(5) {
  animation-delay: 0.25s;
}
.palette div:nth-child(6) {
  animation-delay: 0.3s;
}
.palette div:nth-child(7) {
  animation-delay: 0.35s;
}
.palette div:nth-child(8) {
  animation-delay: 0.4s;
}
.palette div:nth-child(9) {
  animation-delay: 0.45s;
}
.palette div:nth-child(10) {
  animation-delay: 0.5s;
}
.palette div:nth-child(11) {
  animation-delay: 0.55s;
}
.palette div:nth-child(12) {
  animation-delay: 0.6s;
}
.palette div:nth-child(13) {
  animation-delay: 0.65s;
}
.palette div:nth-child(14) {
  animation-delay: 0.7s;
}
.palette div:before, .palette div:after {
  opacity: 0;
  animation: fadeIn 1s 0.5s ease forwards;
}
.palette div:before {
  content: attr(class);
}
.palette div:after {
  float: right;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}