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)
// ----

@function lighten-neue($color, $amount: 0%) {
  @if $amount == 0 { $amount: 0%; } // work with unitless 0
  @return lighten($color, ($amount / 100%) * (100% - lightness($color)));
}
@function darken-neue($color, $amount: 0%) {
  @if $amount == 0 { $amount: 0%; } // work with unitless 0
  @return darken($color, ($amount / 100%) * (lightness($color)));
}

$color: #686B40;

.neue {
  height: 6em;
  background-image: linear-gradient(
    90deg,
    darken-neue($color, 50%) 33%,
    $color 33%,
    $color 67%,
    lighten-neue($color, 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>