틴트 · 셰이드 · 톤

<div class="wrap">
  <div class="rowlabel">Tint <span class="muted">+ white</span></div>
  <div class="row" id="tintRow"></div>
  <div class="rowlabel">Tone <span class="muted">+ gray</span></div>
  <div class="row" id="toneRow"></div>
  <div class="rowlabel">Shade <span class="muted">+ black</span></div>
  <div class="row" id="shadeRow"></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(--muted);margin-top:8px}
.rowlabel .muted{font-weight:500;opacity:.7}
.row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;height:clamp(26px,6.4vmin,40px)}
.row div{border-radius:8px;border:1px solid var(--line)}

const STEPS = [0, 25, 50, 75, 100];
let hue = 20;
const tintRow = document.getElementById('tintRow'), toneRow = document.getElementById('toneRow'), shadeRow = document.getElementById('shadeRow');
[tintRow, toneRow, shadeRow].forEach(row => row.innerHTML = STEPS.map(() => '<div></div>').join(''));

function render() {
  const base = 'hsl(' + hue + ', 72%, 50%)';
  for (let i = 0; i < STEPS.length; i++) {
    const p = STEPS[i];
    tintRow.children[i].style.background = 'color-mix(in srgb, ' + base + ' ' + (100 - p) + '%, white ' + p + '%)';
    toneRow.children[i].style.background = 'color-mix(in srgb, ' + base + ' ' + (100 - p) + '%, gray ' + p + '%)';
    shadeRow.children[i].style.background = 'color-mix(in srgb, ' + base + ' ' + (100 - p) + '%, black ' + p + '%)';
  }
}
(function tick() {
  hue = (hue + 0.2) % 360;
  render();
  requestAnimationFrame(tick);
})();