Example color.scss file

//split complimentaryish

$rotate: 160;

$baseColor1: #ED1C24; 
$baseColor2: #241D4F;
$baseColor3: #bd10d4; 
$baseColor4: #ffff00;
$baseColor5: #4E573A;

$themeColor1: $baseColor1;
$themeColor2: $baseColor2;
$themeColor3: $baseColor3;
$themeColor4: $baseColor4;
$themeColor5: $baseColor5;


$range1: 10%;
$range2: 10%;
$range3: 10%;
$range4: 20%;
$range5: 10%;


$themeColor1dark: adjust-color($baseColor1, $lightness: -$range1);
$themeColor1darker: adjust-color($baseColor1, $lightness: -2*$range1);
$themeColor1darkest: adjust-color($baseColor1, $lightness: -3*$range1);
$themeColor1light: adjust-color($baseColor1, $lightness: $range1);
$themeColor1lighter: adjust-color($baseColor1, $lightness: 2*$range1);
$themeColor1lightest: adjust-color($baseColor1, $lightness: 3*$range1);
$themeColor1hint: adjust-color($baseColor1, $lightness: 5*$range1);


$themeColor2dark: adjust-color($baseColor2, $lightness: -$range2);
$themeColor2darker: adjust-color($baseColor2, $lightness: -2*$range2);
$themeColor2darkest: adjust-color($baseColor2, $lightness: -3*$range2);
$themeColor2light: adjust-color($baseColor2, $lightness: 2*$range2);
$themeColor2lighter: adjust-color($baseColor2, $lightness: 2*$range2);
$themeColor2lightest: adjust-color($baseColor2, $lightness: 3*$range2);
$themeColor2hint: adjust-color($baseColor2, $lightness: 5*$range2);


$themeColor3dark: adjust-color($baseColor3, $lightness: -$range3);
$themeColor3darker: adjust-color($baseColor3, $lightness: -2*$range3);
$themeColor3darkest: adjust-color($baseColor3, $lightness: -3*$range3);
$themeColor3light: adjust-color($baseColor3, $lightness: $range3);
$themeColor3lighter: adjust-color($baseColor3, $lightness: 2*$range3);
$themeColor3lightest: adjust-color($baseColor3, $lightness: 3*$range3);
$themeColor3hint: adjust-color($baseColor3, $lightness: 5*$range3);

$themeColor4dark: adjust-color($baseColor4, $lightness: -$range4);
$themeColor4darker: adjust-color($baseColor4, $lightness: -2*$range4);
$themeColor4darkest: adjust-color($baseColor4, $lightness: -4*$range4);
$themeColor4light: adjust-color($baseColor4, $lightness: 2*$range4);
$themeColor4lighter: adjust-color($baseColor4, $lightness: 2*$range4);
$themeColor4lightest: adjust-color($baseColor4, $lightness: 4*$range4);
$themeColor4hint: adjust-color($baseColor4, $lightness: 5*$range4);

$themeColor5dark: adjust-color($baseColor5, $lightness: -2*$range5);
$themeColor5darker: adjust-color($baseColor5, $lightness: -2*$range5);
$themeColor5darkest: adjust-color($baseColor5, $lightness: -5*$range5);
$themeColor5light: adjust-color($baseColor5, $lightness: 2*$range5);
$themeColor5lighter: adjust-color($baseColor5, $lightness: 2*$range5);
$themeColor5lightest: adjust-color($baseColor5, $lightness: 5*$range5);
$themeColor5hint: adjust-color($baseColor5, $lightness: 5*$range5);

$monochromeDarkest: #000;
$monochromeDarker: #222;
$monochromeDark: #555;
$monochromeMid: #888;
$monochromeLight: #AAA;
$monochromeLighter: #DDD;
$monochromeLightest: #FFF;


$headerBG: $themeColor1;


// navigation

// ---- top bar ----
$topBarFG: white;
$topBarBG: $themeColor2;
$topBarDropDownFG: $themeColor4lightest;
$topBarDropDownBG: $themeColor3darkest;
$topBarDropDownActiveFG: $themeColor4light;
$topBarDropDownActiveBG: $themeColor2lighter;
$topBarHoverBG: $themeColor2light;
$topBarActiveHoverFG: white;
$topBarActiveHoverBG: $topBarHoverBG;

$captionFG: $themeColor1lightest;
$captionBG: black;
$captionOpacity: 0.4;

$sideBarNavHeadingFG: $themeColor1darkest;
$sideBarNavFG: $themeColor3dark;
$sideBarNavBG: #eee;

$topBarFGSelected: $themeColor1;
$topBarBGSelected: white;

$sideBarFGSelected: $themeColor4lightest;
$sideBarBGSelected: $topBarHoverBG;

$sideBarFGHover: white;
$sideBarBGHover: $themeColor2lightest;

$breadcrumbsBG: $sideBarNavBG;
$breadcrumbsFG: $themeColor2;
$breadcrumbSelectedFG: $themeColor2lightest;

$borderTopColor: #444;
$borderBottomColor: #AAA;

$headerCompanyNameColor: $themeColor1;

$tagLineFG: $themeColor4light;




// ---- banner colors ----
$bannerFG: $themeColor2lightest;
$bannerBG: green;

$paginationBorder: #E6E6E6;
$paginationFG: #636363;
$paginationBG: #F9F9F9;
$paginationFGselected: $themeColor1;
$paginationBGselected: #E8EFFD;


// comments form
$commentsPanelBG: #F2F2F2;


// -- footer colors --
$footerHeaderFG: white;
$footerFG: white;
$footerBG: $themeColor2;

$searchFooterFG: $themeColor1;


$headingColor: $themeColor2light;
$headingColorHover: $themeColor2dark;