Generated by SassMeister.com.

SassMeister-input-HTML.html

<button class="cct_runtime_3 btn">3</button>
<button class="cct_runtime_3 btn active">3</button>
<button class="cct_runtime_6 btn">6</button>
<button class="cct_runtime_6 btn active">6</button>
<button class="cct_runtime_12 btn">12</button>
<button class="cct_runtime_12 btn active">12</button>
<button class="cct_runtime_18 btn">18</button>
<button class="cct_runtime_18 btn active">18</button>
<button class="cct_runtime_24 btn">24</button>
<button class="cct_runtime_24 btn active">24</button>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

    $months: 
      (3, #ea7f41), 
      (6, #d8d81a), 
      (12, #73a349), 
      (18, #58bcb4), 
      (24, #3276c9);

@each $months, $color in $months {
  // Build color steps with lightness for background & borders
  $colorA1: $color;                                 // base color
  $colorA2: adjust-color($color, $lightness: 30%);  // lighter
  $colorB1: adjust-color($color, $lightness: -10%); // darker
  $colorB2: adjust-color($color, $lightness: -20%); // much darker

  .cct_runtime_#{$months}.btn {
    border-color: $colorA1!important;
    background-color: $colorA2!important;
  }

  :checked + .cct_runtime_#{$months}.btn,
  .cct_runtime_#{$months}.btn.active {
    background-color: $colorA1!important;
    border-color: $colorB1!important;
    color: white;
  }

  .cct_runtime_#{$months}.panel, .cct_runtime_upgrade.panel {
    border-color: $colorA1;
    & > .panel-heading {
      background-color: $colorA2;
      border-color: inherit;
    }
  }
}

SassMeister-output.css

.cct_runtime_3.btn {
  border-color: #ea7f41 !important;
  background-color: #f9dccb !important;
}

:checked + .cct_runtime_3.btn,
.cct_runtime_3.btn.active {
  background-color: #ea7f41 !important;
  border-color: #df6219 !important;
  color: white;
}

.cct_runtime_3.panel, .cct_runtime_upgrade.panel {
  border-color: #ea7f41;
}

.cct_runtime_3.panel > .panel-heading, .cct_runtime_upgrade.panel > .panel-heading {
  background-color: #f9dccb;
  border-color: inherit;
}

.cct_runtime_6.btn {
  border-color: #d8d81a !important;
  background-color: #f3f398 !important;
}

:checked + .cct_runtime_6.btn,
.cct_runtime_6.btn.active {
  background-color: #d8d81a !important;
  border-color: #aaaa15 !important;
  color: white;
}

.cct_runtime_6.panel, .cct_runtime_upgrade.panel {
  border-color: #d8d81a;
}

.cct_runtime_6.panel > .panel-heading, .cct_runtime_upgrade.panel > .panel-heading {
  background-color: #f3f398;
  border-color: inherit;
}

.cct_runtime_12.btn {
  border-color: #73a349 !important;
  background-color: #c1daab !important;
}

:checked + .cct_runtime_12.btn,
.cct_runtime_12.btn.active {
  background-color: #73a349 !important;
  border-color: #5a8039 !important;
  color: white;
}

.cct_runtime_12.panel, .cct_runtime_upgrade.panel {
  border-color: #73a349;
}

.cct_runtime_12.panel > .panel-heading, .cct_runtime_upgrade.panel > .panel-heading {
  background-color: #c1daab;
  border-color: inherit;
}

.cct_runtime_18.btn {
  border-color: #58bcb4 !important;
  background-color: #c5e8e5 !important;
}

:checked + .cct_runtime_18.btn,
.cct_runtime_18.btn.active {
  background-color: #58bcb4 !important;
  border-color: #40a199 !important;
  color: white;
}

.cct_runtime_18.panel, .cct_runtime_upgrade.panel {
  border-color: #58bcb4;
}

.cct_runtime_18.panel > .panel-heading, .cct_runtime_upgrade.panel > .panel-heading {
  background-color: #c5e8e5;
  border-color: inherit;
}

.cct_runtime_24.btn {
  border-color: #3276c9 !important;
  background-color: #aac7ea !important;
}

:checked + .cct_runtime_24.btn,
.cct_runtime_24.btn.active {
  background-color: #3276c9 !important;
  border-color: #285ea0 !important;
  color: white;
}

.cct_runtime_24.panel, .cct_runtime_upgrade.panel {
  border-color: #3276c9;
}

.cct_runtime_24.panel > .panel-heading, .cct_runtime_upgrade.panel > .panel-heading {
  background-color: #aac7ea;
  border-color: inherit;
}

SassMeister-rendered.html

<button class="cct_runtime_3 btn">3</button>
<button class="cct_runtime_3 btn active">3</button>
<button class="cct_runtime_6 btn">6</button>
<button class="cct_runtime_6 btn active">6</button>
<button class="cct_runtime_12 btn">12</button>
<button class="cct_runtime_12 btn active">12</button>
<button class="cct_runtime_18 btn">18</button>
<button class="cct_runtime_18 btn active">18</button>
<button class="cct_runtime_24 btn">24</button>
<button class="cct_runtime_24 btn active">24</button>