<body style="--colorH: 210;
             --colorS: 50%;
             --colorL: 40%;">
  <header>
    <div>
      <label for="hue">Hue</label><br/>
      <input id="hue" type="number" min="0" max="360" value="210" />
    </div>
    <div>
      <label for="saturation">Saturation</label><br/>
      <input id="saturation" type="number" min="0" max="100" value="50" />
    </div>
    <div>
      <label for="lightness">Lightness</label><br/>
      <input id="lightness" type="number" min="0" max="100" value="40" />
    </div>
  </header>
  <div class="swatch">
    <div>50%<br/>Darker</div>
    <div>25%<br/>Darker</div>
    <div>COLOR</div>
    <div>25%<br/>Lighter</div>
    <div>50%<br/>Lighter</div>
  </div>
</body>
/* Styling demo */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
    font-family: Helvetica, Arial, sans-serif;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15vw;
  font-weight: 200;
}

header > div {
  margin: 1vw;
}

label {
  font-size: 2vw;
}

input {
  font-size: 3vw;
  padding: 0.5vw;
  width: 15vw;
}

.swatch {
  display: flex;
  width: 100%;
  height: 80%;
  height: calc(100% - 15vw);
}

.swatch div {
  flex: 1;
  min-height: 100px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 4vmin;
  font-weight: 800;
  text-shadow: 0px -1px #000, 1px -1px #000, 1px 0px #000, 1px 1px #000, 0px 1px #000, -1px 1px #000, -1px 0px #000, -1px -1px #000;
}

/* Actual theming */
.swatch div:nth-child(1) {
  background-color: hsl(var(--colorH), var(--colorS), calc(var(--colorL) * 0.5));
}

.swatch div:nth-child(2) {
  background-color: hsl(var(--colorH), var(--colorS), calc(var(--colorL) * 0.75));
}

.swatch div:nth-child(3) {
  background-color: hsl(var(--colorH), var(--colorS), var(--colorL));
}

.swatch div:nth-child(4) {
  background-color: hsl(var(--colorH), var(--colorS), calc(var(--colorL) * 1.25));
}
  
.swatch div:nth-child(5) {
  background-color: hsl(var(--colorH), var(--colorS), calc(var(--colorL) * 1.5));
}
const inputs = document.querySelectorAll("input");

for (let x = 0; x < inputs.length; x++) {
  inputs[x].addEventListener("input", function() {
    document.body.style = `--colorH: ${document.querySelector("#hue").value}deg; --colorS: ${document.querySelector("#saturation").value}%; --colorL: ${document.querySelector("#lightness").value}%;`;
  })
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.