<ul>
  <li style="--s:0%; --l: 50%"></li>
  <li style="--s:10%; --l: 50%"></li>
  <li style="--s:20%; --l: 50%"></li>
  <li style="--s:30%; --l: 50%"></li>
  <li style="--s:40%; --l: 50%"></li>
  <li style="--s:50%; --l: 50%"></li>
  <li style="--s:60%; --l: 50%"></li>
  <li style="--s:70%; --l: 50%"></li>
  <li style="--s:80%; --l: 50%"></li>
  <li style="--s:90%; --l: 50%"></li>
  <li style="--s:100%; --l: 50%"></li>
</ul>

<ul>
  <li style="--l:0%; --s: 100%"></li>
  <li style="--l:10%; --s: 100%"></li>
  <li style="--l:20%; --s: 100%"></li>
  <li style="--l:30%; --s: 100%"></li>
  <li style="--l:40%; --s: 100%"></li>
  <li style="--l:50%; --s: 100%"></li>
  <li style="--l:60%; --s: 100%"></li>
  <li style="--l:70%; --s: 100%"></li>
  <li style="--l:80%; --s: 100%"></li>
  <li style="--l:90%; --s: 100%"></li>
  <li style="--l:100%; --s: 100%"></li>
</ul>

<form>
  <div class="controle">
    <label for="h">Hue:</label>
    <input type="range" min="0" max="360" step="5" value="100" name="h" id="h" />
    <output foor="h" id="output-h">100</output>
  </div>
</form>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;

  font-family: "Exo", Arial, sans-serif;
  background-color: #151522;
  color: #fff;
  place-content: center;
  padding: 10px;
}

ul {
  list-style: none outside none;

  display: grid;
  grid-template-columns: repeat(11, 1fr);

  position: relative;
}

ul:nth-of-type(1)::before {
  content: "--l: 50%; --s按10%递增";
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  right: 0;
  text-align: center;
}

ul:nth-of-type(2)::before {
  content: "--s: 100%; --l按10%递增";
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  text-align: center;
}

form {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vh;
}

.controle {
  display: inline-flex;
  align-items: center;
}

:root {
  --h: 100;
}

li {
  aspect-ratio: 1/1;
  background-color: hsl(var(--h), var(--s), var(--l));
}

const rootEle = document.documentElement;
const rangeHander = document.getElementById("h");
const outputEle = document.getElementById("output-h");

rangeHander.addEventListener("input", (evt) => {
  rootEle.style.setProperty(`--${evt.target.id}`, `${evt.target.value}`);
  outputEle.innerText = evt.target.value;
});