CSS Color Variable Boxes

CSS Variables for color manipulation.

by J. Albert Bowden

HTML

<h1>CSS Color Variables</h1>

<label for="hue">main hue: </label><div class="hue-value">180</div><br><input type="range" min="0" max="360" value="180" step="1" id="hue"><br><br>

<h2>main</h2>
<ul class="container">
	<li class="item main"></li>
	<li class="item main-d"></li>
	<li class="item main-l"></li>
  </ul>
<h3>complementary</h3>
<ul class="container">
  <li class="item comp"></li>
  <li class="item comp-d"></li>
  <li class="item comp-l"></li>
</ul>
<h3>split</h3>
<ul class="container">
  <li class="item split1"></li>
  <li class="item split1-d"></li>
  <li class="item split1-l"></li>
</ul>
<ul class="container">
  <li class="item split2"></li>
  <li class="item split2-d"></li>
  <li class="item split2-l"></li>
</ul>
<h3>analogous</h3>
<ul class="container">
  <li class="item analg1"></li>
  <li class="item analg1-d"></li>
  <li class="item analg1-l"></li>
</ul>
<ul class="container">
  <li class="item analg2"></li>
  <li class="item analg2-d"></li>
  <li class="item analg2-l"></li>
</ul>
<h3>triadic</h3>
<ul class="container">
  <li class="item triad1"></li>
  <li class="item triad1-d"></li>
  <li class="item triad1-l"></li>
</ul>
<ul class="container">
  <li class="item triad2"></li>
  <li class="item triad2-d"></li>
  <li class="item triad2-l"></li>
</ul>

<h3>tetradic</h3>
<ul class="container">
  <li class="item tet1"></li>
  <li class="item tet1-d"></li>
  <li class="item tet1-l"></li>
</ul>
<ul class="container">  
  <li class="item tet2"></li>
  <li class="item tet2-d"></li>
  <li class="item tet2-l"></li>
</ul>
<ul class="container">
  <li class="item tet3"></li>
  <li class="item tet3-d"></li>
  <li class="item tet3-l"></li>
</ul>

CSS

body {
  --hue: 180;
  --sat: 50%;
  --light: 50%;  

  --splitter: 30;  
  --shader: 15%;
  
  --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));
  
  --satDarker: calc(var(--sat) + var(--shader));
  --satLighter: calc(var(--sat) - var(--shader));  

  --lightDarker: calc(var(--light) - var(--shader));
  --lightLighter: calc(var(--light) + var(--shader));  

  --mainColor: hsl(var(--hue), var(--sat), var(--light));
  --mainColorDarker: hsl(var(--hue), var(--satDarker), var(--lightDarker));
  --mainColorLighter: hsl(var(--hue), var(--satLighter), var(--lightLighter));

  --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));    

  --compColor: hsl(var(--hueComp), var(--sat), var(--light));
  --compColorDarker: hsl(var(--hueComp), var(--satDarker), var(--lightDarker));
  --compColorLighter: hsl(var(--hueComp), var(--satLighter), var(--lightLighter));  

  --analgColor1: var(--nextColor);
  --analgColor1Darker: var(--nextColorDarker);
  --analgColor1Lighter: var(--nextColorLighter);
  --analgColor2: var(--prevColor);
  --analgColor2Darker: var(--prevColorDarker);
  --analgColor2Lighter: var(--prevColorLighter);

  --triadColor1: hsl(var(--hueTriad1), var(--sat), var(--light));
  --triadColor1Darker:...

JavaScript

var hue = document.querySelector('#hue');
var hueValue = document.querySelector('.hue-value');

hue.onchange = function() {
  hueValue.textContent = hue.value;
  document.body.style.setProperty('--hue', hue.value);
}