Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="bg"><div class="in">14 / 21</div></div>

SassMeister-input.scss

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

$success: #009900;
$secondary: #ffffff;

@function brightness($color) {
  @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)); //w3c definition of color brightness
}

@function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) {
  @if brightness($adjusted-color) < brightness($comparison-color) {
    @return scale-color($adjusted-color, $lightness: $lightness)
  } @else {
    @return scale-color($adjusted-color, $lightness: $darkness)
  }
}

div {
  background-color: desaturate(dark-light-diff($success, $secondary, 60%, -35%), 30%);
  width:100px;
  font-weight: bold;
  color: #919191;
}

.in {
  padding-top:10px;
  padding-left:40px;
  height:30px;
  font-family:sans-serif;
  font-size:14pt;
}

SassMeister-output.css

div {
  background-color: #86ea86;
  width: 100px;
  font-weight: bold;
  color: #919191;
}

.in {
  padding-top: 10px;
  padding-left: 40px;
  height: 30px;
  font-family: sans-serif;
  font-size: 14pt;
}

SassMeister-rendered.html

<div class="bg"><div class="in">14 / 21</div></div>