Warm and cool colors

<div class="wrap">
  <div class="big" id="big"></div>
  <div class="label" id="lbl">Warm</div>
  <div class="strip" id="strip"><i id="dot"></i></div>
</div>

.wrap{width:min(460px,92%)}
.strip{position:relative;height:clamp(12px,3.4vmin,16px);border-radius:8px;border:1px solid var(--line);cursor:pointer;touch-action:none;
  background:linear-gradient(90deg,hsl(0,75%,55%),hsl(60,75%,55%),hsl(120,75%,55%),hsl(180,75%,55%),hsl(240,75%,55%),hsl(300,75%,55%),hsl(360,75%,55%))}
.big{width:clamp(80px,24vmin,140px);height:clamp(80px,24vmin,140px);border-radius:50%;margin:0 auto clamp(10px,2.6vmin,16px);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.label{text-align:center;font:800 clamp(15px,4.4vmin,22px)/1 system-ui;margin-bottom:clamp(10px,2.6vmin,16px);letter-spacing:-.01em}
#dot{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;border:2px solid var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.35);pointer-events:none}

let hue = 20, autoRotate = true;
const big = document.getElementById('big'), lbl = document.getElementById('lbl'), strip = document.getElementById('strip'), dot = document.getElementById('dot');

function classify(h) {
  if (h < 60 || h > 330) return { ko: '따뜻한 색', en: 'Warm', color: '#ef4444' };
  if (h > 150 && h < 270) return { ko: '차가운 색', en: 'Cool', color: '#3b82f6' };
  return { ko: '중간색', en: 'Neutral', color: '#a3a3a3' };
}
function render() {
  big.style.background = 'hsl(' + hue + ', 75%, 55%)';
  dot.style.left = (hue / 360 * 100) + '%';
  const c = classify(hue);
  lbl.textContent = c.en + ' · ' + c.ko;
  lbl.style.color = c.color;
}
function fromEvent(e) {
  const r = strip.getBoundingClientRect();
  hue = Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) * 360;
  render();
}
strip.addEventListener('pointerdown', e => { autoRotate = false; strip.setPointerCapture(e.pointerId); fromEvent(e); });
strip.addEventListener('pointermove', e => { if (e.buttons) fromEvent(e); });

(function tick() {
  if (autoRotate) hue = (hue + 0.4) % 360;
  render();
  requestAnimationFrame(tick);
})();