무채색 팔레트

<div class="wrap">
  <div class="chart" id="chart"></div>
  <div class="scale" id="scale"></div>
</div>

.wrap{width:min(420px,90%);display:grid;gap:clamp(10px,2.6vmin,16px)}
.chart{display:flex;align-items:flex-end;gap:8px;height:clamp(70px,20vmin,120px);border-bottom:2px solid var(--line);padding:0 4px}
.chart i{flex:1;border-radius:4px 4px 0 0;display:block}
.scale{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;height:clamp(14px,3.6vmin,20px)}
.scale i{border-radius:4px;display:block}

function gray(l) { return 'hsl(0, 0%, ' + l + '%)'; }
var STEPS = [10, 24, 38, 52, 66, 80, 94];
var scale = document.getElementById('scale');
scale.innerHTML = STEPS.map(function (_, i) { return '<i id="s' + i + '"></i>'; }).join('');
STEPS.forEach(function (l, i) { document.getElementById('s' + i).style.background = gray(l); });
var N = 6;
var chart = document.getElementById('chart');
chart.innerHTML = Array.from({ length: N }).map(function (_, i) { return '<i id="b' + i + '"></i>'; }).join('');
var bars = Array.from({ length: N }).map(function (_, i) { return document.getElementById('b' + i); });
function randomData() { return bars.map(function () { return 20 + Math.random() * 80; }); }
function render(vals) {
  vals.forEach(function (v, i) {
    bars[i].style.height = v + '%';
    var l = Math.max(10, Math.min(92, Math.round(94 - v * 0.75)));
    bars[i].style.background = gray(l);
  });
}
var vals = randomData();
render(vals);
setInterval(function () { vals = randomData(); render(vals); }, 2200);