단색 배색

<div class="wrap">
  <div class="scale" id="scale"></div>
  <div class="card" id="card">
    <div class="chead" id="chead">Monochrome</div>
    <div class="cbody"><p id="cp">단일 색상, 명도만 바꿔서 위계를 만듭니다.</p><button class="cbtn" id="cbtn">Action</button></div>
  </div>
</div>

.wrap{width:min(460px,92%);display:grid;gap:clamp(10px,2.6vmin,16px)}
.scale{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;height:clamp(20px,5vmin,28px)}
.scale div{border-radius:5px}
.card{border-radius:14px;overflow:hidden;border:1px solid var(--line);cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.12)}
.chead{padding:clamp(8px,2vmin,12px) 14px;font:700 clamp(11px,2.8vmin,13px)/1 system-ui;color:#fff}
.cbody{padding:clamp(10px,2.6vmin,16px)}
.cbody p{margin:0 0 10px;font:500 clamp(11px,2.6vmin,13px)/1.5 system-ui;color:#fff}
.cbtn{border:0;border-radius:8px;padding:8px 16px;font:700 clamp(10px,2.6vmin,12px)/1 system-ui;color:#fff;cursor:pointer}

const STEPS = [12, 24, 38, 52, 66, 80, 94];
let hue = 250, autoRotate = true;
const scale = document.getElementById('scale');
scale.innerHTML = STEPS.map((_, i) => '<div id="c' + i + '"></div>').join('');
const cells = STEPS.map((_, i) => document.getElementById('c' + i));
const chead = document.getElementById('chead'), cbtn = document.getElementById('cbtn'), card = document.getElementById('card'), cp = document.getElementById('cp');

function hsl(h, s, l) { return 'hsl(' + h + ', ' + s + '%, ' + l + '%)'; }
function render() {
  cells.forEach((el, i) => el.style.background = hsl(hue, 55, STEPS[i]));
  card.style.background = hsl(hue, 40, STEPS[5]);
  chead.style.background = hsl(hue, 62, STEPS[0]);
  cbtn.style.background = hsl(hue, 68, STEPS[3]);
  cp.style.color = STEPS[5] > 60 ? hsl(hue, 55, 12) : '#fff';
}
card.addEventListener('click', () => autoRotate = !autoRotate);

(function tick() {
  if (autoRotate) hue = (hue + 0.15) % 360;
  render();
  requestAnimationFrame(tick);
})();