Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="neue"></div>
<div class="darkenlighten"></div>
<div class="tintshade"></div>

SassMeister-input.scss

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


$color: #686B40;

.neue {
  height: 6em;
  background-image: linear-gradient(
    90deg,
    scale-color($color, $lightness: -50%) 33%,
    $color 33%,
    $color 67%,
    scale-color($color, $lightness: 50%) 67%
  );
}
.darkenlighten {
  height: 6em;
  background-image: linear-gradient(
    90deg,
    darken($color, 50%) 33%,
    $color 33%,
    $color 67%,
    lighten($color, 50%) 67%
  );
}
.tintshade {
  height: 6em;
  background-image: linear-gradient(
    90deg,
    shade($color, 50%) 33%,
    $color 33%,
    $color 67%,
    tint($color, 50%) 67%
  );
}

SassMeister-output.css

.neue {
  height: 6em;
  background-image: linear-gradient(90deg, #343620 33%, #686B40 33%, #686B40 67%, #bdc095 67%);
}

.darkenlighten {
  height: 6em;
  background-image: linear-gradient(90deg, black 33%, #686B40 33%, #686B40 67%, #dee0ca 67%);
}

.tintshade {
  height: 6em;
  background-image: linear-gradient(90deg, #343520 33%, #686B40 33%, #686B40 67%, #b3b59f 67%);
}

SassMeister-rendered.html

<div class="neue"></div>
<div class="darkenlighten"></div>
<div class="tintshade"></div>