컬러 스킴 생성기

<div class="wrap">
  <div class="head"><b>Generate</b><span class="tag" id="tag">Complementary</span></div>
  <div class="sws" id="sws"></div>
</div>

.wrap{width:min(480px,92%);display:grid;gap:clamp(8px,2.2vmin,14px)}
.head{display:flex;justify-content:space-between;align-items:center}
.head b{font:800 clamp(12px,3vmin,15px)/1 system-ui}
.tag{font:700 clamp(9px,2.4vmin,11px)/1 ui-monospace,monospace;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--fg);background:var(--surface)}
.sws{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sws div{display:grid;gap:4px;justify-items:center}
.sws i{display:block;width:100%;aspect-ratio:1;border-radius:9px;border:1px solid var(--line)}
.sws b{font:700 clamp(7px,1.8vmin,9px)/1 ui-monospace,monospace;color:var(--muted)}

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 RULES = [
  { name: 'Complementary', offsets: [0, 180, 0, 180, 90] },
  { name: 'Analogous', offsets: [-40, -20, 0, 20, 40] },
  { name: 'Triadic', offsets: [0, 120, 240, 60, 180] },
  { name: 'Split-Comp', offsets: [0, 150, 210, 75, 285] },
];
var sws = document.getElementById('sws'), tag = document.getElementById('tag');
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); });
function generate() {
  var rule = RULES[Math.floor(Math.random() * RULES.length)];
  var base = Math.floor(Math.random() * 360);
  var s = 62 + Math.random() * 20, l = 48 + Math.random() * 12;
  tag.textContent = rule.name;
  rule.offsets.forEach(function (off, i) {
    var h = (base + off + 360) % 360;
    var hex = hslToHex(h, s, Math.max(20, l - i * 3));
    cells[i].style.background = hex;
    labels[i].textContent = hex;
  });
}
generate();
setInterval(generate, 2600);