<div class="color-palette">
  <div class="primary-color">primary-color</div>
<div class="primary-color--light">primary-color--light</div>
<div class="primary-color--dark">primary-color--dark</div>
<div class="primary-color--complement">primary-color--complement</div>
<div class="primary-color--triada1">primary-color--triada1</div>
<div class="primary-color--triada2">primary-color--triada2</div>
<div class="primary-color--analogous1">primary-color--analogous1</div>
<div class="primary-color--analogous2">primary-color--analogous2</div>
</div>

<div class="color-picker">
  <label>Select primary-color:</label>
  <input type="color" id="colorPicker" value="#40bf8c">
</div>
:root {
  --primary-color-h: 156;
  --primary-color-s: 50%;
  --primary-color-l: 50%;
  --primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));
  
/*   lighten */
  --primary-color--light: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 15%));
  
/*   darken */
  --primary-color--dark: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) - 15%));
  
/*   complement */
  --primary-color--complement: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), var(--primary-color-l));
  
/*   triad */
  --primary-color--triada-1: hsl(calc(var(--primary-color-h) + 120), var(--primary-color-s), var(--primary-color-l));
  --primary-color--triada-2: hsl(calc(var(--primary-color-h) + 240), var(--primary-color-s), var(--primary-color-l));
  
/*   analogous */
  --degree: 15;
  --primary-color--analogous-1: hsl(calc(var(--primary-color-h) + var(--degree)), var(--primary-color-s), var(--primary-color-l));
  --primary-color--analogous-2: hsl(calc(var(--primary-color-h) - var(--degree)), var(--primary-color-s), var(--primary-color-l));
}

.primary-color {
  background: var(--primary-color)
}
.primary-color--light {
  background: var(--primary-color--light)
}
.primary-color--dark {
  background: var(--primary-color--dark)
}
.primary-color--complement {
  background: var(--primary-color--complement)
}
.primary-color--triada1 {
  background: var(--primary-color--triada-1)
}
.primary-color--triada2 {
  background: var(--primary-color--triada-2)
}
.primary-color--analogous1 {
  background: var(--primary-color--analogous-1)
}
.primary-color--analogous2 {
  background: var(--primary-color--analogous-2)
}



html {
  font-family: sans-serif;
  font-size: 0.625rem;
}
.color-palette div {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
  margin: 10px;
  box-sizing: border-box;
  color: hsl(0, 100% ,100%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.color-picker {
 margin: 2em 0;
}
const root = document.documentElement;
const colorPicker = document.querySelector('#colorPicker');

function setTheme(color) {
  // Convert hex to RGB first
  let r = 0,
    g = 0,
    b = 0;
  if (color.length == 4) {
    r = "0x" + color[1] + color[1];
    g = "0x" + color[2] + color[2];
    b = "0x" + color[3] + color[3];
  } else if (color.length == 7) {
    r = "0x" + color[1] + color[2];
    g = "0x" + color[3] + color[4];
    b = "0x" + color[5] + color[6];
  }
  // Then to HSL
  r /= 255;
  g /= 255;
  b /= 255;
  let cmin = Math.min(r, g, b),
    cmax = Math.max(r, g, b),
    delta = cmax - cmin,
    h = 0,
    s = 0,
    l = 0;

  if (delta == 0) h = 0;
  else if (cmax == r) h = ((g - b) / delta) % 6;
  else if (cmax == g) h = (b - r) / delta + 2;
  else h = (r - g) / delta + 4;

  h = Math.round(h * 60);

  if (h < 0) h += 360;

  l = (cmax + cmin) / 2;
  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
  s = +(s * 100).toFixed(1);
  l = +(l * 100).toFixed(1);

 root.style.setProperty(`--primary-color-h`, h);
 root.style.setProperty(`--primary-color-s`, s + "%");
 root.style.setProperty(`--primary-color-l`, l + "%");
}

colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
 setTheme(event.target.value);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.