<h1>Welcome to the CSS <span class="colored">color</span> experiment</h1>
<p>You can change this page, by modifying the global color with the following input.</p>
<input type="color" oninput="updateCSS(this)">
<hr>
<button class="primary">Foo</button>
<button class="secondary">Bar</button>
<button class="tertiary">Baz</button>
:root {
  --color-hue: 10;
  --color-sat: 50%;
  --color-lit: 50%;
  --color-primary: hsl(
    var(--color-hue),
    var(--color-sat),
    var(--color-lit)
  );
  --color-mod: 0;
}
* {
  box-sizing: border-box;
  transition: all 0.25s ease-in-out;
}
body {
  font-family: sans-serif;
  margin:0;
  padding: 3rem;
  overflow: auto;
  min-height: 100vh;
  background: hsl(
    var(--color-hue),
    var(--color-sat),
    98%
  );
}
.colored {
  color: var(--color-primary);
}
button {
  appearance: none;
  padding: 0.5em 1em;
  border-radius: 3px;
  font-size: 1rem;
  color: #fff;
  background: hsl(
    calc(var(--color-mod) + var(--color-hue)),
    var(--color-sat),
    var(--color-lit)
  );;
  text-shadow: 0 2px 3px rgba(0,0,0,0.5);
  border: 0;
  border-bottom: 2px solid;
  border-color: hsl(
    calc(var(--color-hue) + var(--color-mod)), 
    var(--color-sat),
    calc(var(--color-lit) - 20%)
  );
}
button.secondary {
  --color-mod: 120;
}
button.tertiary {
  --color-mod: 240;
}
View Compiled
function hexToHSL(H) {
  // Convert hex to RGB first
  let r = 0, g = 0, b = 0;
  if (H.length == 4) {
    r = "0x" + H[1] + H[1];
    g = "0x" + H[2] + H[2];
    b = "0x" + H[3] + H[3];
  } else if (H.length == 7) {
    r = "0x" + H[1] + H[2];
    g = "0x" + H[3] + H[4];
    b = "0x" + H[5] + H[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);

  // return "hsl(" + h + "," + s + "%," + l + "%)";
  return { h, s, l }
}
var updateCSS = function(el) {
  let root = document.documentElement;
  let color = hexToHSL(el.value);

  root.style.setProperty('--color-hue', color.h);
  root.style.setProperty('--color-sat', color.s + "%");
  root.style.setProperty('--color-lit', color.l + "%");
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.