<main>
  <div class="container">
    <div class="resultOKLCH result"></div>

    <div>
      O<br>K<br>
      L
      <input type="range" min="0" max="100" value="0" id="l1" name="l1" oninput="oklchTest()" /><br>
      C
      <input type="range" min="0" max="125" value="0" id="c1" name="c1" oninput="oklchTest()" /><br>
      H
      <input type="range" min="0" max="360" value="0" id="h1" name="h1" oninput="oklchTest()" />
      <code id="oklchoutput">oklch(0%, 0%, 0)</code>
    </div>
  </div>

  <div class="container">
    <div class="resultOKLAB result"></div>

    <div>
      O<br>K<br>
      L
      <input type="range" min="0" max="100" value="0" id="l2" name="l2" oninput="oklabTest()" /><br>
      A
      <input type="range" min="-100" max="100" value="0" id="a2" name="a2" oninput="oklabTest()" /><br>
      B
      <input type="range" min="-100" max="100" value="0" id="b2" name="b2" oninput="oklabTest()" />
      <code id="oklaboutput">oklab(0%, 0%, 0%)</code>
    </div>
  </div>
  </main>

main {
  display: flex;
  gap: 50px;
  justify-content: center;
  margin: 0 auto;
  max-width: 500px;
}

.result {
  aspect-ratio: 1;
  border: 1px solid black;
  width: 100px;
}

code {
  display: block;
}

function oklchTest() {
  let square = document.getElementsByClassName('resultOKLCH')[0],
      ok1 = 'oklch('+l1.value+'% '+c1.value+'% '+h1.value+')';

  square.style.backgroundColor = ok1;
  oklchoutput.innerHTML = ok1;
  
}

function oklabTest() {
  let square = document.getElementsByClassName('resultOKLAB')[0],
      ok2 = 'oklab('+l2.value+'% '+a2.value+'% '+b2.value+'%)';

  square.style.backgroundColor = ok2;
  oklaboutput.innerHTML = ok2;
  
}