Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="colors-light">
  <li></li>
  <li></li>
  <li></li>
  
  <li></li>
  <li></li>
  <li></li>
  
  <li></li>
  <li></li>
  <li></li>
</ul>

<div class="main-color">
  Your main color
</div>
<ul class="colors-dark">
  <li></li>
  <li></li>
  <li></li>
  
  <li></li>
  <li></li>
  <li></li>
  
  <li></li>
  <li></li>
  <li></li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// ----

$color: #DC3D7A;
$light: 10;

.main-color {
  padding: 3rem 1rem;
  background: $color;
  text-align: center;
  @if lightness($color) < 50 {
    color: white;
  }
  &:after {
    content: '#{$color}';
  }
}

%div-colors {
  width: 100%;
  li {
    display: inline-block;
    width: 100 / 3 * 1%;
    height: 82px;
    margin: 0 -4px -4px 0;
    text-align: center;
    position: relative;
    &:before {      
      position: absolute;
      top: 36px; left: 0; bottom: 0; right: 0;
    }
  }
}




@while $light < 100 {
  
  $light-color: scale-color($color, $lightness: (percentage($light)/100)) !global;
  $dark-color: scale-color($color, $lightness: -(percentage($light)/100)) !global;
  
 .colors-light {
    @extend %div-colors;
    li:nth-last-child(#{($light / 10)}) {
      @if lightness($light-color) < 50 {
        color: white;
      }
      background: $light-color;
      &:before {
        content: '#{$light-color}';
      }
    }
  }

  .colors-dark {
    @extend %div-colors;
    li:nth-child(#{($light / 10)}) {
      @if lightness($dark-color) < 50 {
        color: white;
      }
      background: $dark-color;
      &:before {
        content: '#{$dark-color}';
      }
    }
  }

$light: $light + 10;
}




// NANO RESET
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

SassMeister-output.css

.main-color {
  padding: 3rem 1rem;
  background: #DC3D7A;
  text-align: center;
}
.main-color:after {
  content: "#DC3D7A";
}

.colors-light, .colors-dark {
  width: 100%;
}
.colors-light li, .colors-dark li {
  display: inline-block;
  width: 33.33333%;
  height: 82px;
  margin: 0 -4px -4px 0;
  text-align: center;
  position: relative;
}
.colors-light li:before, .colors-dark li:before {
  position: absolute;
  top: 36px;
  left: 0;
  bottom: 0;
  right: 0;
}

.colors-light li:nth-last-child(1) {
  background: #e05087;
}
.colors-light li:nth-last-child(1):before {
  content: "#e05087";
}

.colors-dark li:nth-child(1) {
  color: white;
  background: #d6276a;
}
.colors-dark li:nth-child(1):before {
  content: "#d6276a";
}

.colors-light li:nth-last-child(2) {
  background: #e36495;
}
.colors-light li:nth-last-child(2):before {
  content: "#e36495";
}

.colors-dark li:nth-child(2) {
  color: white;
  background: #be225e;
}
.colors-dark li:nth-child(2):before {
  content: "#be225e";
}

.colors-light li:nth-last-child(3) {
  background: #e777a2;
}
.colors-light li:nth-last-child(3):before {
  content: "#e777a2";
}

.colors-dark li:nth-child(3) {
  color: white;
  background: #a71e52;
}
.colors-dark li:nth-child(3):before {
  content: "#a71e52";
}

.colors-light li:nth-last-child(4) {
  background: #ea8baf;
}
.colors-light li:nth-last-child(4):before {
  content: "#ea8baf";
}

.colors-dark li:nth-child(4) {
  color: white;
  background: #8f1a47;
}
.colors-dark li:nth-child(4):before {
  content: "#8f1a47";
}

.colors-light li:nth-last-child(5) {
  background: #ee9ebd;
}
.colors-light li:nth-last-child(5):before {
  content: "#ee9ebd";
}

.colors-dark li:nth-child(5) {
  color: white;
  background: #77153b;
}
.colors-dark li:nth-child(5):before {
  content: "#77153b";
}

.colors-light li:nth-last-child(6) {
  background: #f1b1ca;
}
.colors-light li:nth-last-child(6):before {
  content: "#f1b1ca";
}

.colors-dark li:nth-child(6) {
  color: white;
  background: #5f112f;
}
.colors-dark li:nth-child(6):before {
  content: "#5f112f";
}

.colors-light li:nth-last-child(7) {
  background: #f5c5d7;
}
.colors-light li:nth-last-child(7):before {
  content: "#f5c5d7";
}

.colors-dark li:nth-child(7) {
  color: white;
  background: #470d23;
}
.colors-dark li:nth-child(7):before {
  content: "#470d23";
}

.colors-light li:nth-last-child(8) {
  background: #f8d8e4;
}
.colors-light li:nth-last-child(8):before {
  content: "#f8d8e4";
}

.colors-dark li:nth-child(8) {
  color: white;
  background: #300918;
}
.colors-dark li:nth-child(8):before {
  content: "#300918";
}

.colors-light li:nth-last-child(9) {
  background: #fbecf2;
}
.colors-light li:nth-last-child(9):before {
  content: "#fbecf2";
}

.colors-dark li:nth-child(9) {
  color: white;
  background: #18040c;
}
.colors-dark li:nth-child(9):before {
  content: "#18040c";
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

SassMeister-rendered.html

<ul class="colors-light">
  <li></li>
  <li></li>
  <li></li>
  
  <li></li>
  <li></li>
  <li></li>
  
  <li></li>
  <li></li>
  <li></li>
</ul>

<div class="main-color">
  Your main color
</div>
<ul class="colors-dark">
  <li></li>
  <li></li>
  <li></li>
  
  <li></li>
  <li></li>
  <li></li>
  
  <li></li>
  <li></li>
  <li></li>
</ul>