고채도 팔레트

<div class="wrap">
  <div class="sws" id="sws"></div>
  <div class="poster" id="poster">
    <b id="ptitle">SALE</b>
    <button class="pbtn" id="pbtn">Shop now</button>
  </div>
</div>

.wrap{width:min(420px,90%);display:grid;gap:clamp(10px,2.6vmin,16px)}
.sws{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sws i{display:block;width:100%;aspect-ratio:1;border-radius:8px}
.poster{border-radius:14px;padding:clamp(16px,4vmin,26px);display:grid;gap:12px;justify-items:center;text-align:center}
.poster b{font:900 clamp(20px,5.4vmin,30px)/1 system-ui;letter-spacing:-.02em;color:#fff}
.pbtn{border:0;border-radius:999px;padding:9px 20px;font:800 clamp(10px,2.6vmin,12px)/1 system-ui;cursor:pointer;color:#141414}

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 = [[0, 200, 60, 280, 150], [330, 45, 190, 260, 90], [15, 320, 170, 230, 55]];
var S = 95, L = 52, idx = 0;
var sws = document.getElementById('sws');
sws.innerHTML = [0, 1, 2, 3, 4].map(function (i) { return '<i id="c' + i + '"></i>'; }).join('');
var cells = [0, 1, 2, 3, 4].map(function (i) { return document.getElementById('c' + i); });
var poster = document.getElementById('poster'), pbtn = document.getElementById('pbtn');
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]; });
  poster.style.background = hexes[0];
  pbtn.style.background = hexes[2];
}
render();
poster.addEventListener('click', function () { idx = (idx + 1) % PALETTES.length; render(); });
setInterval(function () { idx = (idx + 1) % PALETTES.length; render(); }, 2200);