Lighter/Darker Mods with HSL and CSS Variables

A simple example of creating lightness and darkness color mods with CSS Variables while using HSL colors.

by Travis Almand

HTML

<p>lighter</p>
<div class="box"></div>
<div class="box box-light"></div>
<div class="box box-lighter"></div>
<div class="box box-lightest"></div>

<br />

<p>darker</p>
<div class="box"></div>
<div class="box box-dark"></div>
<div class="box box-darker"></div>
<div class="box box-darkest"></div>

CSS

:root {
  --h: 0;
  --s: 100%;
  --l: 50%;
  
  --light: 1.25;
  --lighter: 1.5;
  --lightest: 1.75;
  
  --dark: 0.75;
  --darker: 0.5;
  --darkest: 0.25;
  
  --back: hsl(var(--h), 100%, 50%);
  
  --back-light: var(--h), var(--s), calc(var(--l) * var(--light));
  --back-lighter: var(--h), var(--s), calc(var(--l) * var(--lighter));
  --back-lightest: var(--h), var(--s), calc(var(--l) * var(--lightest));
  
  --back-dark: var(--h), var(--s), calc(var(--l) * var(--dark));
  --back-darker: var(--h), var(--s), calc(var(--l) * var(--darker));
  --back-darkest: var(--h), var(--s), calc(var(--l) * var(--darkest));
}

.box {
  background-color: var(--back);
  display: inline-block;
  height: 100px;
  width: 100px;
  margin: 20px;
}

.box-light { background: hsl(var(--back-light)); }
.box-lighter { background: hsl(var(--back-lighter)); }
.box-lightest { background: hsl(var(--back-lightest)); }

.box-dark { background: hsl(var(--back-dark)); }
.box-darker { background: hsl(var(--back-darker)); }
.box-darkest { background: hsl(var(--back-darkest)); }

JavaScript

// document.documentElement.style.setProperty('--h', '100');

// document.body.style.setProperty('--h', '100');

// document.querySelector('.box-light').style.setProperty('--h', '100');