JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Sass Color Demo</h1>

<p>Below are a few ways to extend your color palette using only four colors, CSS classes, Sass color variables and some basic Sass color functions:</p>

<h2>Brand Colors</h2>
<ul class="colorDemo">
  <li class="brandBlue"><span>Blue</span></li>
  <li class="brandOrange"><span>Orange</span></li>
  <li class="brandCyan"><span>Cyan</span></li>
  <li class="brandPurple"><span>Purple</span></li>
</ul>

<h2>Darken</h2>
<ul class="darken brandBlue colorDemo">
  <li class="step-0"><span>0%</span></li>
  <li class="step-10"><span>10%</span></li>
  <li class="step-20"><span>20%</span></li>
  <li class="step-30"><span>30%</span></li>
  <li class="step-40"><span>40%</span></li>
  <li class="step-50"><span>50%</span></li>
  <li class="step-60"><span>60%</span></li>
  <li class="step-70"><span>70%</span></li>
  <li class="step-80"><span>80%</span></li>
  <li class="step-90"><span>90%</span></li>
  <li class="step-100"><span>100%</span></li>
</ul>

<h2>Lighten</h2>
<ul class="lighten brandPurple colorDemo">
  <li class="step-0"><span>0%</span></li>
  <li class="step-10"><span>10%</span></li>
  <li class="step-20"><span>20%</span></li>
  <li class="step-30"><span>30%</span></li>
  <li class="step-40"><span>40%</span></li>
  <li class="step-50"><span>50%</span></li>
  <li class="step-60"><span>60%</span></li>
  <li class="step-70"><span>70%</span></li>
  <li class="step-80"><span>80%</span></li>
  <li class="step-90"><span>90%</span></li>
  <li class="step-100"><span>100%</span></li>
</ul>

<h2>Desaturate</h2>
<ul class="desaturate brandOrange colorDemo">
  <li class="step-0"><span>0%</span></li>
  <li class="step-10"><span>10%</span></li>
  <li class="step-20"><span>20%</span></li>
  <li class="step-30"><span>30%</span></li>
  <li class="step-40"><span>40%</span></li>
  <li class="step-50"><span>50%</span></li>
  <li class="step-60"><span>60%</span></li>
  <li class="step-70"><span>70%</span></li>
  <li class="step-80"><span>80%</span></li>
  <li...

SCSS

/* #Variables
================================================== */

// set a global base unit of measure
$globalPaddingUnit = 20px;
// set some basic color variables: true white, true black and grey
$white-true: #FFF;
$black-true: #000;
$grey-1: lighten($black-true, 75%); // using some math to create grey from the black color variable, because we can.
// create variables for brand colors developed by an Art Director given to you as hex values
$brand-blue: #005696;
$brand-orange: #fd9902;
$brand-cyan: #4ba1cc;
$brand-purple: #6c0d9b;
// set some default colors: body color, basic text color, link color
$default-body-color: $white-true; // a variable can be defined by another variable. How cool is that?
$default-body-text-color: darken($grey-1, 40%); // using some math to adjust the grey variable
$default-link-color:$brand-blue;

/* #Color
================================================== */

body {
  background: $default-body-color;
  color: $default-body-text-color;
}

a:link, a:visited { color: $default-link-color; text-decoration: none; }
a:hover { text-decoration: underline; }

ul.colorDemo {
  li {
    border: 1px solid $black-true;
    color: $white-true;
    &.brandBlue { background: $brand-blue;}
    &.brandOrange { background: $brand-orange;}
    &.brandCyan { background: $brand-cyan;}
    &.brandPurple { background: $brand-purple;}
  }
  &.brandBlue.darken { // whoa! check out all this nested goodness
    li {
      color: $white-true;
      &.step-0 {background: darken($brand-cyan, 0%);}
      &.step-10 {background: darken($brand-cyan, 10%);}
      &.step-20 {background: darken($brand-cyan, 20%);}
      &.step-30 {background: darken($brand-cyan, 30%);}
      &.step-40 {background: darken($brand-cyan, 40%);}
      &.step-50 {background: darken($brand-cyan, 50%);}
      &.step-60 {background: darken($brand-cyan, 60%);}
      &.step-70 {background: darken($brand-cyan, 70%);}
      &.step-80 {background: darken($brand-cyan, 80%);}
      &.step-90...