CSS Variables For Color Manipulation

colorVars.css

/* ----

 css custom properties to manipulate color
 MIT - 2017 - Soft Punch
 https://gist.github.com/softpunch/ 

 set initial "main" color via HSL values. 
 automatically calculate harmonies and variations of that color with pure css.

 harmonies are determined solely by hue. 
 lighter and darker variations are determined by adjusting saturation and lightness.

 useful information about HSL/HSB lighter and darker variations:
 https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e

 in this stylesheet, css variables are declared with the :root selector,
 which should make them available inside all subsequent css selector blocks.

 however, if the variables are likely to be modified by javascript, 
 it may be easier to access them in a script if they're declared with the body selector instead.

 if a browser does not support var(), it will simply ignore the declaration.
 fallbacks can be placed before or within variables.

 more information about css variables:
 https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/
 https://madebymike.com.au/writing/using-css-variables/

 browser support:
 http://caniuse.com/#feat=css-variables

 to use the colors defined by these variables elsewhere in a stylesheet, 
 reference them by name, inside of var().
 
 examples:
 set the background of the body of a web page with a darker variation of the main color

 body {
  background: var(--mainColorDarker);
 }

 set the background of a div with a lighter variation of a complementary color

 .div {
  background: var(--compColorLighter);
 }

 interactive demo:
 https://jsfiddle.net/softpunch/Lw38fxzz/show/light/

 demo source:
 https://jsfiddle.net/softpunch/Lw38fxzz/

---- */


:root {
 
/* set initial (main) HSL color values to use */ 
  --hue: 180;
  --sat: 50%;
  --light: 50%;  

/* set degree of separation between two split complementary colors */ 
  --splitter: 30;  

/* set amount of light & saturation to change for darker & lighter color variants */ 
  --shader: 15%;
  
/* calculate hue values for each color manipulation */ 
  --hueNext: calc(var(--hue) + 30);
  --huePrev: calc(var(--hue) - 30);
  --hueComp: calc(var(--hue) + 180);
  --hueTriad1: calc(var(--hue) + 120);
  --hueTriad2: calc(var(--hue) + 120 + 120);
  --hueTet1: calc(var(--hue) + 90);
  --hueTet2: calc(var(--hue) + 90 + 90);
  --hueTet3: calc(var(--hue) + 90 + 90 + 90);  
  --hueSplitComp1: calc(var(--hueComp) + var(--splitter));
  --hueSplitComp2: calc(var(--hueComp) - var(--splitter));
  
/* calculate saturation values for lighter & darker color variations */  
  --satDarker: calc(var(--sat) + var(--shader));
  --satLighter: calc(var(--sat) - var(--shader));  

/* calculate light values for lighter & darker color variations */  
  --lightDarker: calc(var(--light) - var(--shader));
  --lightLighter: calc(var(--light) + var(--shader));  

/* calculate main color and its lighter & darker variations */  
  --mainColor: hsl(var(--hue), var(--sat), var(--light));
  --mainColorDarker: hsl(var(--hue), var(--satDarker), var(--lightDarker));
  --mainColorLighter: hsl(var(--hue), var(--satLighter), var(--lightLighter));

/* calculate adjacent colors and their lighter & darker variations */  
  --nextColor: hsl(var(--hueNext), var(--sat), var(--light));
  --nextColorDarker: hsl(var(--hueNext), var(--satDarker), var(--lightDarker));
  --nextColorLighter: hsl(var(--hueNext), var(--satLighter), var(--lightLighter));
  --prevColor: hsl(var(--huePrev), var(--sat), var(--light));
  --prevColorDarker: hsl(var(--huePrev), var(--satDarker), var(--lightDarker));
  --prevColorLighter: hsl(var(--huePrev), var(--satLighter), var(--lightLighter));    

/* calculate complementary color and its lighter & darker variations */  
  --compColor: hsl(var(--hueComp), var(--sat), var(--light));
  --compColorDarker: hsl(var(--hueComp), var(--satDarker), var(--lightDarker));
  --compColorLighter: hsl(var(--hueComp), var(--satLighter), var(--lightLighter));  

/* calculate analagous colors (1 & 2) and their lighter & darker variations */  
  --analgColor1: var(--nextColor);
  --analgColor1Darker: var(--nextColorDarker);
  --analgColor1Lighter: var(--nextColorLighter);
  --analgColor2: var(--prevColor);
  --analgColor2Darker: var(--prevColorDarker);
  --analgColor2Lighter: var(--prevColorLighter);

/* calculate triadic color harmonies (1 & 2) and their lighter & darker variations */  
  --triadColor1: hsl(var(--hueTriad1), var(--sat), var(--light));
  --triadColor1Darker: hsl(var(--hueTriad1), var(--satDarker), var(--lightDarker));
  --triadColor1Lighter: hsl(var(--hueTriad1), var(--satLighter), var(--lightLighter));  
  --triadColor2: hsl(var(--hueTriad2), var(--sat), var(--light));
  --triadColor2Darker: hsl(var(--hueTriad2), var(--satDarker), var(--lightDarker));
  --triadColor2Lighter: hsl(var(--hueTriad2), var(--satLighter), var(--lightLighter));  

/* calculate tetradic color harmonies (1-3) and their lighter & darker variations */  
  --tetColor1: hsl(var(--hueTet1), var(--sat), var(--light));
  --tetColor1Darker: hsl(var(--hueTet1), var(--satDarker), var(--lightDarker));
  --tetColor1Lighter: hsl(var(--hueTet1), var(--satLighter), var(--lightLighter));  
  --tetColor2: hsl(var(--hueTet2), var(--sat), var(--light));
  --tetColor2Darker: hsl(var(--hueTet2), var(--satDarker), var(--lightDarker));
  --tetColor2Lighter: hsl(var(--hueTet2), var(--satLighter), var(--lightLighter));    
  --tetColor3: hsl(var(--hueTet3), var(--sat), var(--light));
  --tetColor3Darker: hsl(var(--hueTet3), var(--satDarker), var(--lightDarker));
  --tetColor3Lighter: hsl(var(--hueTet3), var(--satLighter), var(--lightLighter));  

/* calculate split complementary colors (1 & 2) and their lighter & darker variations */  
  --splitCompColor1: hsl(var(--hueSplitComp1), var(--sat), var(--light));
  --splitCompColor1Darker: hsl(var(--hueSplitComp1), var(--satDarker), var(--lightDarker));
  --splitCompColor1Lighter: hsl(var(--hueSplitComp1), var(--satLighter), var(--lightLighter));  
  --splitCompColor2: hsl(var(--hueSplitComp2), var(--sat), var(--light));
  --splitCompColor2Darker: hsl(var(--hueSplitComp2), var(--satDarker), var(--lightDarker));
  --splitCompColor2Lighter: hsl(var(--hueSplitComp2), var(--satLighter), var(--lightLighter));  
}