The Sass Lighten and Darken Scale Helper

index.html

<h1>The Sass <span class="lighten">Lighten</span> and <span class="darken">Darken</span> Scale Helper</h1>
<div class="normal"></div>
<div class="lighten-1"></div><div class="darken-1"></div>
<div class="lighten-2"></div><div class="darken-2"></div>
<div class="lighten-3"></div><div class="darken-3"></div>
<div class="lighten-4"></div><div class="darken-4"></div>
<div class="lighten-5"></div><div class="darken-5"></div>
<div class="lighten-6"></div><div class="darken-6"></div>
<div class="lighten-7"></div><div class="darken-7"></div>
<div class="lighten-8"></div><div class="darken-8"></div>
<div class="lighten-9"></div><div class="darken-9"></div>
<div class="lighten-10"></div><div class="darken-10"></div>
<div class="lighten-11"></div><div class="darken-11"></div>
<div class="lighten-12"></div><div class="darken-12"></div>
<div class="lighten-13"></div><div class="darken-13"></div>
<div class="lighten-14"></div><div class="darken-14"></div>
<div class="lighten-15"></div><div class="darken-15"></div>
<div class="lighten-16"></div><div class="darken-16"></div>
<div class="lighten-17"></div><div class="darken-17"></div>
<div class="lighten-18"></div><div class="darken-18"></div>
<div class="lighten-19"></div><div class="darken-19"></div>
<div class="lighten-20"></div><div class="darken-20"></div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "compass/utilities/color/contrast";
$contrasted-dark-default: black;
$contrasted-light-default: white;
//Add your color in the variable $color1
$color1:#06669f;

.normal{
  background:$color1;
  width:100%;
  height:100px;
  &:after {
    content:'#{$color1} - Base Color';
    position:absolute;
    text-align:center;
    margin-left:42%;
    padding-left:8px;
    padding-top:30px;
    @include contrasted($color1);
  }
}

@for $i from 1 through 17 {
	div.lighten-#{$i} {
    $newColor: lighten($color1,5%*$i);
    background:lighten($color1,5%*$i);
    width:50%;
    float:left;
    height:100px;
    @include contrasted($newColor);
	}
  $percentage: 5%*$i;
  $color2: lighten($color1,5%*$i);
  div.lighten-#{$i}:after {
    content:'#{$color2}   - '+$percentage;
    position:absolute;
    text-align:center;
    margin-left:20%;
    padding-left:8px;
    padding-top:30px;
  }
  div.darken-#{$i} {
    $newColor: darken($color1,5%*$i);
    background:darken($color1,5%*$i);
    width:50%;
    float:left;
    height:100px;
    @include contrasted($newColor);
	}
  $percentage: 5%*$i;
  $color3: darken($color1,5%*$i);
  div.darken-#{$i}:after {
    content:'#{$color3}   - '+$percentage;
    position:absolute;
    text-align:center;
    margin-left:20%;
    padding-left:8px;
    padding-top:30px;
  }
}

//Page Specific Styles
h1{
  text-align:center;
  .lighten{
    color:lighten($color1, 10%);
  }
  .darken{
    color:darken($color1,10%);
  }
}

The Sass Lighten and Darken Scale Helper.markdown

The Sass Lighten and Darken Scale Helper

Using 5% increments, quickly see the varients of your color choice side by side for lighten and darken Sass functions

A Pen by Smartass.io on CodePen.

License.