OKLCH

<div class="wrap">
  <div class="rowlabel">HSL <span class="muted">L 10→90%, 채도 고정</span></div>
  <div class="strip" id="hslStrip"></div>
  <div class="rowlabel">OKLCH <span class="muted">L 20→95%, 크로마 고정</span></div>
  <div class="strip" id="oklchStrip"></div>
</div>

.wrap{width:min(560px,94%);display:grid;gap:6px}
.rowlabel{font:700 clamp(10px,2.6vmin,12px)/1 ui-monospace,monospace;color:var(--fg);margin-top:10px}
.rowlabel .muted{color:var(--muted);font-weight:500}
.strip{display:grid;grid-template-columns:repeat(9,1fr);height:clamp(28px,7vmin,46px);border-radius:10px;overflow:hidden;border:1px solid var(--line)}

const STEPS = 9;
let hue = 20;
const hslStrip = document.getElementById('hslStrip'), oklchStrip = document.getElementById('oklchStrip');
for (let i = 0; i < STEPS; i++) { hslStrip.appendChild(document.createElement('div')); oklchStrip.appendChild(document.createElement('div')); }

function render() {
  for (let i = 0; i < STEPS; i++) {
    const t = i / (STEPS - 1);
    const l1 = 10 + t * 80;
    hslStrip.children[i].style.background = 'hsl(' + hue + ', 75%, ' + l1 + '%)';
    const l2 = (20 + t * 75) / 100;
    oklchStrip.children[i].style.background = 'oklch(' + l2.toFixed(2) + ' 0.15 ' + hue + ')';
  }
}
(function tick() {
  hue = (hue + 0.25) % 360;
  render();
  requestAnimationFrame(tick);
})();