The accent-color property

<div class="wrap" id="wrap">
  <label class="row"><input type="checkbox" checked><span>뉴스레터 구독</span></label>
  <label class="row"><input type="checkbox"><span>SMS 알림</span></label>
  <label class="row"><input type="radio" name="plan" checked><span>Basic</span></label>
  <label class="row"><input type="radio" name="plan"><span>Pro</span></label>
  <input class="full" type="range" min="0" max="100" value="65">
  <progress class="full" id="pg" value="65" max="100"></progress>
  <code id="hex">#5b5bf7</code>
</div>

.wrap{width:min(320px,88%);display:grid;gap:clamp(8px,2.2vmin,12px)}
.row{display:flex;align-items:center;gap:8px;font:600 clamp(11px,2.8vmin,13px)/1 system-ui;color:var(--fg)}
input[type=checkbox],input[type=radio]{width:17px;height:17px}
.full{width:100%}
progress{height:9px}
code{justify-self:center;font:700 clamp(9px,2.4vmin,11px)/1 ui-monospace,monospace;color:var(--muted)}

var COLORS = ['#5b5bf7', '#f25c8a', '#18c29c', '#f59e0b', '#8b5cf6'];
var wrap = document.getElementById('wrap'), hex = document.getElementById('hex'), pg = document.getElementById('pg');
var idx = 0;
function render() {
  var c = COLORS[idx];
  wrap.style.accentColor = c;
  hex.textContent = c;
}
render();
setInterval(function () { idx = (idx + 1) % COLORS.length; render(); }, 2200);
setInterval(function () { pg.value = 30 + Math.round(Math.random() * 60); }, 1400);