파스텔 팔레트

<div class="wrap">
  <div class="sws" id="sws"></div>
  <div class="card" id="card">
    <div class="chead" id="chead">Pastel UI</div>
    <div class="cbody"><p id="cp">부드러운 배경 위에 짙은 글자로 대비를 확보합니다.</p><button class="cbtn" id="cbtn">Continue</button></div>
  </div>
</div>

.wrap{width:min(480px,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,.10)}
.chead{padding:clamp(7px,1.8vmin,10px) 14px;font:700 clamp(11px,2.8vmin,13px)/1 system-ui;color:#3a3550}
.cbody{padding:clamp(9px,2.4vmin,14px)}
.cbody p{margin:0 0 8px;font:500 clamp(10px,2.4vmin,12px)/1.4 system-ui;color:#3a3550}
.cbtn{border:0;border-radius:9px;padding:7px 14px;font:700 clamp(9px,2.4vmin,11px)/1 system-ui;cursor:pointer;color:#3a3550}

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 = [[340, 20, 280, 150, 45], [10, 200, 260, 320, 90], [195, 30, 330, 60, 250]];
var S = 45, L = 86, 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 chead = document.getElementById('chead'), card = document.getElementById('card'), cbtn = document.getElementById('cbtn');
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]; });
  chead.style.background = hexes[0];
  card.style.background = hexes[1];
  cbtn.style.background = hexes[2];
}
render();
card.addEventListener('click', function () { idx = (idx + 1) % PALETTES.length; render(); });
setInterval(function () { idx = (idx + 1) % PALETTES.length; render(); }, 2600);