뮤트 팔레트

<div class="wrap">
  <div class="sws" id="sws"></div>
  <div class="card" id="card">
    <div class="stat"><b id="num">3,204</b><span id="lbl">Weekly signups</span></div>
    <div class="bars" id="bars"></div>
  </div>
</div>

.wrap{width:min(420px,90%);display:grid;gap:clamp(8px,2.2vmin,14px)}
.sws{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sws div{display:grid;gap:3px;justify-items:center}
.sws i{display:block;width:100%;aspect-ratio:1;border-radius:8px;border:1px solid var(--line)}
.sws b{font:700 clamp(6px,1.6vmin,8px)/1 ui-monospace,monospace;color:var(--muted)}
.card{border-radius:14px;padding:clamp(10px,2.6vmin,16px);display:grid;gap:10px;border:1px solid var(--line)}
.stat{display:grid;gap:2px}
.stat b{font:800 clamp(16px,4vmin,22px)/1 ui-monospace,monospace}
.stat span{font:600 clamp(9px,2.4vmin,11px)/1 system-ui;opacity:.85}
.bars{display:flex;align-items:flex-end;gap:5px;height:clamp(28px,7vmin,40px)}
.bars i{flex:1;border-radius:3px 3px 0 0;display:block}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  var k = function (n) { return (n + h / 30) % 12; };
  var a = s * Math.min(l, 1 - l);
  var f = function (n) { return l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); };
  var hex = function (x) { return Math.round(x * 255).toString(16).padStart(2, '0'); };
  return '#' + hex(f(0)) + hex(f(8)) + hex(f(4));
}
var PALETTES = [[200, 340, 60, 140, 20], [15, 260, 90, 190, 320], [280, 40, 160, 210, 10]];
var S = 27, L = 55, idx = 0;
var BAR_H = [45, 70, 55, 85, 60];
var sws = document.getElementById('sws');
sws.innerHTML = [0, 1, 2, 3, 4].map(function (i) { return '<div><i id="c' + i + '"></i><b id="t' + i + '"></b></div>'; }).join('');
var cells = [0, 1, 2, 3, 4].map(function (i) { return document.getElementById('c' + i); });
var labels = [0, 1, 2, 3, 4].map(function (i) { return document.getElementById('t' + i); });
var card = document.getElementById('card'), num = document.getElementById('num'), lbl = document.getElementById('lbl');
var bars = document.getElementById('bars');
bars.innerHTML = BAR_H.map(function (_, i) { return '<i id="bar' + i + '"></i>'; }).join('');
var barEls = BAR_H.map(function (h, i) { var el = document.getElementById('bar' + i); el.style.height = h + '%'; return el; });
function render() {
  var hues = PALETTES[idx];
  var hexes = hues.map(function (h) { return hslToHex(h, S, L); });
  cells.forEach(function (el, i) { el.style.background = hexes[i]; });
  labels.forEach(function (el, i) { el.textContent = hexes[i]; });
  card.style.background = hslToHex(hues[3], S, 30);
  num.style.color = '#ffffff';
  lbl.style.color = '#ffffff';
  lbl.style.opacity = '0.8';
  barEls.forEach(function (el, i) { el.style.background = hexes[i]; });
}
render();
card.addEventListener('click', function () { idx = (idx + 1) % PALETTES.length; render(); });
setInterval(function () { idx = (idx + 1) % PALETTES.length; render(); }, 2600);