Generated by SassMeister.com.

SassMeister-input-HTML.html

<br/>
<div class="grid">
<div class="lighter">lighter</div>
<div class="color">main color</div>
<div class="darker">darker</div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

// ----
// Plug your color into the variable:
$color: #486b00;

////////////
// These autogenerate based on color math
.lighter {
  background-color:  desaturate(lighten($color, 65%), 40%);  
}

.color {
  background-color: $color;  
}

.darker {
  background-color:  desaturate(darken($color, 8%), 10%);  
}




.grid {
  display:grid;
  grid-gap: 20px;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows: 200px;
  > * {
    padding: 10px;
    color: white;
    text-align: center;
    font-size: 40px;
    &:first-child{
      color: black;
    }
  }
}

SassMeister-output.css

.lighter {
  background-color: #e3f1c6;
}

.color {
  background-color: #486b00;
}

.darker {
  background-color: #2b3f03;
}

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px;
}

.grid > * {
  padding: 10px;
  color: white;
  text-align: center;
  font-size: 40px;
}

.grid > *:first-child {
  color: black;
}

SassMeister-rendered.html

<br/>
<div class="grid">
<div class="lighter">lighter</div>
<div class="color">main color</div>
<div class="darker">darker</div>
</div>