<div class="box">
   OKLCH
</div>
<div class="code"></div>
<table> 
  <tr><th>Lightness</th><td><input type="range" data-p="l" /></td></tr>
  <tr><th>Chroma</th><td><input type="range" data-p="c" /></td></tr>
  <tr><th>Hue</th><td><input type="range" data-p="h" /></td></tr>
</table>

.box {
  box-sizing: border-box;
  height: 100px;
  width: 300px;
  border: 1px solid #ccc;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
}
.code {
  box-sizing: border-box;
  font-family: monospace;
  font-size: 14px;
  width: 300px;
  background-color: #234;
  color: white;
  padding: .5em;
  
}

const lch = { l: .5, c: .5, h: .5 }
const target = document.querySelector(".box");
const code = document.querySelector(".code");
const inputs = document.querySelectorAll("input")

inputs.forEach(i => {
  const p = i.attributes["data-p"].value
  i.addEventListener("input", e => {
    const attr = {}
    attr[p] = +e.target.value / 100
    changeColor(attr)
  })
  
})

function changeColor( color = {}) {
  Object.assign(lch,color)
  const { l,c,h } = lch;
  const prop = `oklch(${Math.round(l*100)}% ${Math.round(0.37*c * 100)/100} ${Math.round(360*h)})`
  target.style.backgroundColor = prop
  code.innerHTML = `background-color: ${prop};`
}
changeColor();