Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="btn1">btn1</div>
<div class="btn2">btn2</div>
<div class="btn3">btn3</div>
<div class="btn4">btn4</div>
<div class="btn5">btn5</div>

<ul>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// Color Hacker (v1.0.0)
// ----

@import "color-hacker";

$primary-color: #165346;
$key: $primary-color;
$cs-2: #205B4F;
$cs-3: #256053;
$cs-4: #2B6559;

$color1to2: scale-color(adjust-hue($key, 0.5835deg), $saturation: -17.43303%, $lightness: 4.44444%);
$color1to3: scale-color(adjust-hue($key, -0.43345deg), $saturation: -23.64107%, $lightness: 6.91358%);
$color1to4: scale-color(adjust-hue($key, 0.37309deg), $saturation: -30.6694%, $lightness: 9.62963%);

.hacked-colors {
  /* cs-2 */
  color1to2: hack-colors($primary-color $cs-2);
  /* cs-3 */
  color2to3: hack-colors($cs-2 $cs-3);
  color1to3: hack-colors($primary-color $cs-3);
  /* cs-4 */
  color2to4: hack-colors($cs-2 $cs-4);
  color3to4: hack-colors($cs-3 $cs-4);
  color1to4: hack-colors($primary-color $cs-4);
}

.btn1 { background-color: $key; }
.btn2 { background-color: $color1to2; }
.btn3 { background-color: $color1to3; }
.btn4 { background-color: $color1to4; }

div {
  height:30px;
  width:100%;
  color: white;
}

li {
  height:50px;
}
$class-slug: nav !default;
@for $i from 1 through 20 {
  li:nth-child(#{$i}) { 
    background-color: scale-color(adjust-hue($key, -0.5 * $i), $saturation: -.5% * $i, $lightness: 4% * $i);
  }
}

SassMeister-output.css

.hacked-colors {
  /* cs-2 */
  color1to2: "$key: #165346; $color-2: scale-color(adjust-hue($key, 0.5835deg), $saturation: -17.43303%, $lightness: 4.44444%); ";
  /* cs-3 */
  color2to3: "$key: #205B4F; $color-2: scale-color(adjust-hue($key, -1.01695deg), $saturation: -7.5188%, $lightness: 2.58398%); ";
  color1to3: "$key: #165346; $color-2: scale-color(adjust-hue($key, -0.43345deg), $saturation: -23.64107%, $lightness: 6.91358%); ";
  /* cs-4 */
  color2to4: "$key: #205B4F; $color-2: scale-color(adjust-hue($key, -0.2104deg), $saturation: -16.03107%, $lightness: 5.42636%); ";
  color3to4: "$key: #256053; $color-2: scale-color(adjust-hue($key, 0.80655deg), $saturation: -9.20433%, $lightness: 2.91777%); ";
  color1to4: "$key: #165346; $color-2: scale-color(adjust-hue($key, 0.37309deg), $saturation: -30.6694%, $lightness: 9.62963%); ";
}

.btn1 {
  background-color: #165346;
}

.btn2 {
  background-color: #205b4f;
}

.btn3 {
  background-color: #256053;
}

.btn4 {
  background-color: #2b6559;
}

div {
  height: 30px;
  width: 100%;
  color: white;
}

li {
  height: 50px;
}

li:nth-child(1) {
  background-color: #1a6050;
}

li:nth-child(2) {
  background-color: #1d6c5a;
}

li:nth-child(3) {
  background-color: #217964;
}

li:nth-child(4) {
  background-color: #25856d;
}

li:nth-child(5) {
  background-color: #289277;
}

li:nth-child(6) {
  background-color: #2c9e80;
}

li:nth-child(7) {
  background-color: #30aa89;
}

li:nth-child(8) {
  background-color: #34b792;
}

li:nth-child(9) {
  background-color: #38c39b;
}

li:nth-child(10) {
  background-color: #42c9a1;
}

li:nth-child(11) {
  background-color: #4fcca6;
}

li:nth-child(12) {
  background-color: #5ccfab;
}

li:nth-child(13) {
  background-color: #69d3b1;
}

li:nth-child(14) {
  background-color: #76d6b6;
}

li:nth-child(15) {
  background-color: #82dabc;
}

li:nth-child(16) {
  background-color: #8fddc2;
}

li:nth-child(17) {
  background-color: #9ce1c8;
}

li:nth-child(18) {
  background-color: #a8e4cf;
}

li:nth-child(19) {
  background-color: #b5e8d5;
}

li:nth-child(20) {
  background-color: #c1ecdc;
}

SassMeister-rendered.html

<div class="btn1">btn1</div>
<div class="btn2">btn2</div>
<div class="btn3">btn3</div>
<div class="btn4">btn4</div>
<div class="btn5">btn5</div>

<ul>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
</ul>