Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
<div class="div-4"></div>
<div class="div-5"></div>
<div class="div-6"></div>
<div class="div-7"></div>
<div class="div-8"></div>
<div class="div-9"></div>
<div class="div-10"></div>
<div class="div-11"></div>
<div class="div-12"></div>
<div class="div-13"></div>
<div class="div-14"></div>
<div class="div-15"></div>
<div class="div-16"></div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$wk-tinted-red: #EB675A !default;
// The red used for the tints is different
$wk-primary-blue: #007ac3 !default;
$wk-primary-green: #85bc20 !default;
$wk-primary-gray: #474747 !default;

[class*="div-"] {
  width: 100px;
  height: 50px;
  display: inline-block;
  border-top: 50px solid #eb675a;
}

.div-1 {
  border-color: #eb675a;
  background-color: mix($wk-tinted-red, #fff, 100%);
}

.div-2 {
  border-color: #f69385;
  background-color: mix($wk-tinted-red, #fff, 71%);
}

.div-3 {
  border-color: #f8b3b3;
  background-color: mix($wk-tinted-red, #fff, 49%);
}

.div-4 {
  border-color: #25a3d6;
  background-color: mix($wk-primary-blue, #fff, 70%);
}

.div-5 {
  border-color: #74c1e2;
  background-color: mix($wk-primary-blue, #fff, 47%);
}

.div-6 {
  border-color: #a0d4eb;
  background-color: mix($wk-primary-blue, #fff, 33%);
}

.div-7 {
  border-color: #0068a1;
  background-color: mix($wk-primary-blue, #000, 85%);
}

.div-8 {
  border-color: #94d476;
  background-color: mix($wk-primary-green, #fff, 66%);
}

.div-9 {
  border-color: #b8e2a2;
  background-color: mix($wk-primary-green, #fff, 45%);
}

.div-10 {
  border-color: #cdebbe;
  background-color: mix($wk-primary-green, #fff, 31%);
}

.div-11 {
  border-color: #696a6c;
  background-color: mix($wk-primary-gray, #fff, 81%);
}

.div-12 {
  border-color: #8e8f90;
  background-color: mix($wk-primary-gray, #fff, 61%);
}

.div-13 {
  border-color: #b3b4b5;
  background-color: mix($wk-primary-gray, #fff, 41%);
}

.div-14 {
  border-color: #cacacb;
  background-color: mix($wk-primary-gray, #fff, 29%);
}

.div-15 {
  border-color: #e1e1e1;
  background-color: mix($wk-primary-gray, #fff, 16%);
}

.div-16 {
  border-color: #efeff0;
  background-color: mix($wk-primary-gray, #fff, 8%);
}

SassMeister-output.css

[class*="div-"] {
  width: 100px;
  height: 50px;
  display: inline-block;
  border-top: 50px solid #eb675a;
}

.div-1 {
  border-color: #eb675a;
  background-color: #eb675a;
}

.div-2 {
  border-color: #f69385;
  background-color: #f1938a;
}

.div-3 {
  border-color: #f8b3b3;
  background-color: #f5b5ae;
}

.div-4 {
  border-color: #25a3d6;
  background-color: #4da2d5;
}

.div-5 {
  border-color: #74c1e2;
  background-color: #87c0e3;
}

.div-6 {
  border-color: #a0d4eb;
  background-color: #abd3eb;
}

.div-7 {
  border-color: #0068a1;
  background-color: #0068a6;
}

.div-8 {
  border-color: #94d476;
  background-color: #aed36c;
}

.div-9 {
  border-color: #b8e2a2;
  background-color: #c8e19b;
}

.div-10 {
  border-color: #cdebbe;
  background-color: #d9eaba;
}

.div-11 {
  border-color: #696a6c;
  background-color: #6a6a6a;
}

.div-12 {
  border-color: #8e8f90;
  background-color: #8f8f8f;
}

.div-13 {
  border-color: #b3b4b5;
  background-color: #b4b4b4;
}

.div-14 {
  border-color: #cacacb;
  background-color: #cacaca;
}

.div-15 {
  border-color: #e1e1e1;
  background-color: #e2e2e2;
}

.div-16 {
  border-color: #efeff0;
  background-color: #f0f0f0;
}

SassMeister-rendered.html

<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
<div class="div-4"></div>
<div class="div-5"></div>
<div class="div-6"></div>
<div class="div-7"></div>
<div class="div-8"></div>
<div class="div-9"></div>
<div class="div-10"></div>
<div class="div-11"></div>
<div class="div-12"></div>
<div class="div-13"></div>
<div class="div-14"></div>
<div class="div-15"></div>
<div class="div-16"></div>