Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.20)
// Compass (v1.0.3)
// ----

// primary palette
$modernAqua: #0C9C9E;
$teal: $modernAqua;
$tealLight: mix($teal, #fff, 15%);

$modernAquaLight: #e3f2f0;
$modernPlum: #A50069;
$modernPlumLight: lighten($modernPlum, 10%); //#d80089
$modernPlumDark: darken($modernPlum, 10%); //#720049
$modernYellow: #FFE92C;
$newModernYellow: #e1e92c;
$newModernYellowLight: tint($newModernYellow, 15%);
$modernYellowLight: lighten($modernYellow, 10%); //#ffee5f
$modernYellowLighter: lighten($modernYellow, 25%); //#fff6ac
$warmBrown: #493B31;
$warmBrownLight: #dad3af;
$warmWhite: #F0EDEB;
$warmWhiteNotSoDark: #e3ddda;
$warmWhiteDark: darken($warmWhite, 10%); //#dad3ce
$warmWhiteDarker: #e3ddda;

// secondary / extended
$emerald: #00A353;
$gold: #f4af3d;
$grape: #761b60;
$salmon: #E6674A;
$taupe: #c7c0bc;
$turquoise: #2a969d;
$white: #ffffff;

//mix($color, $color-alt, 20%)
$thirtyPercentSalmon: rgba($salmon, 0.3);
$highlightedTeal: #38918d;
$thirtyPctHighlightedTeal: tint($highlightedTeal, 30%);
//rgba($color, $alpha)
//$highlightedTeal: rgba($tealMix, 0.3);
//$highlightedTeal: tint($tealMix, 70%);
//$highlightedTeal: transparentize($tealMix, 0.7);



// miscellaneous
//$disabledAqua: lighten($modernAqua, 10);
$disabledPlum: tint($modernPlum, 65%); //#e0a6cb
$gray: #ccc;
$gray2: #aaa;
$gray3: #666;
$highlight: #f6f8bf;
$tooltipBackgroundColor: $modernAquaLight;
$tooltipTextColor: $warmBrown;
$tooltipShadowColor: $warmBrown;
$formElementBorders: #c8c4c1;
$lightBlue: #dbf0f1;
$lightBlueDarker: #cee1e0;
$lightBlueEvenDarker: #88ced0;
$green: #43b02a;

.modYel {
  background-color: $modernYellow;
}
.modYelLight {
  background-color: $modernYellowLight;
}
.modYelLigher {
  background-color: $modernYellowLighter;
}
.modPlumLight {
  background-color: $modernPlumLight;
}
.modPlumDark {
  background-color: $modernPlumDark;
}
.warmWhiteDark {
  background-color: $warmWhiteDark;
}
.disabledPlum {
  background-color: $disabledPlum;
}
.highlightedTeal {
  background-color: $thirtyPctHighlightedTeal;
}
.tealLight {
  background-color: $tealLight;
}
.newModernYellowLight {
  background-color: $newModernYellowLight
}

SassMeister-output.css

.modYel {
  background-color: #FFE92C;
}

.modYelLight {
  background-color: #ffee5f;
}

.modYelLigher {
  background-color: #fff6ac;
}

.modPlumLight {
  background-color: #d80089;
}

.modPlumDark {
  background-color: #720049;
}

.warmWhiteDark {
  background-color: #dad3ce;
}

.disabledPlum {
  background-color: #e0a6cb;
}

.highlightedTeal {
  background-color: #74b2af;
}

.tealLight {
  background-color: #dbf0f0;
}

.newModernYellowLight {
  background-color: #e6ec4c;
}