어스 톤

<div class="wrap">
  <div class="sws" id="sws"></div>
  <div class="card" id="card">
    <div class="thumb" id="thumb"></div>
    <div class="cbody"><b id="ctitle">Studio Chair</b><span id="csub">Oak &amp; canvas</span></div>
  </div>
</div>

.wrap{width:min(440px,92%);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;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,.14)}
.thumb{height:clamp(50px,14vmin,90px)}
.cbody{padding:clamp(9px,2.4vmin,14px);display:grid;gap:2px}
.cbody b{font:700 clamp(11px,2.8vmin,13px)/1.2 system-ui}
.cbody span{font:500 clamp(9px,2.4vmin,11px)/1 system-ui;opacity:.85}

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 = [
  [{ h: 16, s: 45, l: 40 }, { h: 32, s: 42, l: 58 }, { h: 45, s: 55, l: 50 }, { h: 85, s: 26, l: 36 }, { h: 20, s: 18, l: 20 }],
  [{ h: 8, s: 38, l: 35 }, { h: 28, s: 35, l: 62 }, { h: 95, s: 22, l: 42 }, { h: 150, s: 14, l: 30 }, { h: 40, s: 60, l: 45 }],
  [{ h: 25, s: 40, l: 48 }, { h: 40, s: 50, l: 65 }, { h: 60, s: 35, l: 55 }, { h: 105, s: 20, l: 33 }, { h: 15, s: 25, l: 18 }],
];
var idx = 0;
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'), thumb = document.getElementById('thumb'), ctitle = document.getElementById('ctitle'), csub = document.getElementById('csub');
function render() {
  var p = PALETTES[idx];
  var hexes = p.map(function (c) { return hslToHex(c.h, c.s, c.l); });
  cells.forEach(function (el, i) { el.style.background = hexes[i]; });
  labels.forEach(function (el, i) { el.textContent = hexes[i]; });
  thumb.style.background = 'linear-gradient(135deg,' + hexes[1] + ',' + hexes[2] + ')';
  card.style.background = hexes[4];
  ctitle.style.color = hexes[1];
  csub.style.color = hexes[1];
}
render();
card.addEventListener('click', function () { idx = (idx + 1) % PALETTES.length; render(); });
setInterval(function () { idx = (idx + 1) % PALETTES.length; render(); }, 2800);