동시 대비

<div class="wrap">
  <div class="pane" id="paneA"><div class="sq"></div></div>
  <div class="pane" id="paneB"><div class="sq"></div></div>
  <div class="note">두 회색 사각형은 모두 <b>#8a8a8a</b> 입니다.</div>
</div>

.wrap{width:min(520px,94%);display:grid;grid-template-columns:1fr 1fr;gap:14px;justify-items:center}
.note{grid-column:1/-1;font:600 clamp(10px,2.6vmin,12px)/1.4 system-ui;color:var(--muted);text-align:center}
.note b{color:var(--fg)}
.pane{width:100%;aspect-ratio:4/3;border-radius:14px;display:grid;place-items:center;transition:background .8s;border:1px solid var(--line)}
.sq{width:38%;height:38%;background:#8a8a8a;border-radius:6px}

let hue = 20;
const paneA = document.getElementById('paneA'), paneB = document.getElementById('paneB');
function hsl(h, s, l) { return 'hsl(' + h + ', ' + s + '%, ' + l + '%)'; }
function render() {
  paneA.style.background = hsl(hue, 70, 28);
  paneB.style.background = hsl((hue + 180) % 360, 65, 80);
}
render();
setInterval(() => { hue = (hue + 47) % 360; render(); }, 2600);