Color picker

<div class="cpw">
  <span class="cplabel">강조 색상</span>
  <div class="cpswatches" role="radiogroup" aria-label="색상 선택" id="cpsw">
    <button role="radio" aria-checked="true" aria-label="보라" style="background:#5b5bf7"></button>
    <button role="radio" aria-checked="false" aria-label="핑크" style="background:#f25c8a"></button>
    <button role="radio" aria-checked="false" aria-label="민트" style="background:#18c29c"></button>
    <button role="radio" aria-checked="false" aria-label="주황" style="background:#f2994a"></button>
    <button class="cpcustom" role="radio" aria-checked="false" aria-label="직접 선택"></button>
  </div>
  <div class="cppreview"><span id="cphex">#5B5BF7</span></div>
</div>

.cpw{position:absolute;inset:0;display:grid;place-items:center;gap:12px}
.cplabel{color:var(--muted);font-size:10px}
.cpswatches{display:flex;gap:8px}
.cpswatches button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:default;padding:0}
.cpswatches button[aria-checked=true]{border-color:var(--fg);box-shadow:0 0 0 2px var(--bg)}
.cpcustom{background:conic-gradient(from 0deg,#f25c8a,#f2994a,#e0d454,#18c29c,#5b5bf7,#a35bf7,#f25c8a) !important}
.cppreview{font-size:11px;font-weight:700;color:var(--fg);letter-spacing:.03em}

const btns = [...document.querySelectorAll('#cpsw button')];
const hex = document.getElementById('cphex');
const HEX = { 0: '#5B5BF7', 1: '#F25C8A', 2: '#18C29C', 3: '#F2994A', 4: '#A35BF7' };
function select(i) {
  btns.forEach((b, idx) => b.setAttribute('aria-checked', String(idx === i)));
  hex.textContent = HEX[i];
}
let auto = true, i = 0;
btns.forEach((b, idx) => b.addEventListener('click', () => { auto = false; i = idx; select(i); }));
setInterval(() => { if (!auto) return; i = (i + 1) % btns.length; select(i); }, 1100);