색온도

<div class="wrap">
  <div class="swatch" id="sw"></div>
  <div class="readout"><b id="kval">3200K</b><span id="klabel">Tungsten</span></div>
  <div class="strip" id="strip"><i id="dot"></i></div>
</div>

.wrap{width:min(480px,92%);display:grid;gap:clamp(8px,2.2vmin,14px)}
.swatch{height:clamp(48px,15vmin,70px);border-radius:14px;border:1px solid var(--line)}
.readout{display:flex;justify-content:space-between;align-items:baseline}
.readout b{font:800 clamp(14px,3.6vmin,18px)/1 ui-monospace,monospace;color:var(--fg)}
.readout span{font:700 clamp(9px,2.4vmin,11px)/1 system-ui;color:var(--muted)}
.strip{position:relative;height:clamp(12px,3.2vmin,16px);border-radius:8px;border:1px solid var(--line);cursor:pointer;touch-action:none}
.strip i{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;border:2px solid var(--fg);pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.35)}

function kelvinToRgb(k) {
  var temp = k / 100, r, g, b;
  if (temp <= 66) { r = 255; } else { r = 329.698727446 * Math.pow(temp - 60, -0.1332047592); }
  if (temp <= 66) { g = 99.4708025861 * Math.log(temp) - 161.1195681661; } else { g = 288.1221695283 * Math.pow(temp - 60, -0.0755148492); }
  if (temp >= 66) { b = 255; } else if (temp <= 19) { b = 0; } else { b = 138.5177312231 * Math.log(temp - 10) - 305.0447927307; }
  var clampV = function (v) { return Math.max(0, Math.min(255, Math.round(v))); };
  return [clampV(r), clampV(g), clampV(b)];
}
function label(k) {
  if (k < 2200) return 'Candle';
  if (k < 3200) return 'Tungsten';
  if (k < 4500) return 'Fluorescent';
  if (k < 6000) return 'Daylight';
  if (k < 8000) return 'Overcast';
  return 'Blue sky';
}
var MIN = 1500, MAX = 12000;
var k = 3200, autoPlay = true;
var sw = document.getElementById('sw'), kval = document.getElementById('kval'), klabel = document.getElementById('klabel');
var strip = document.getElementById('strip'), dot = document.getElementById('dot');
function buildGradient() {
  var stops = [];
  for (var i = 0; i <= 10; i++) {
    var kk = MIN + (MAX - MIN) * (i / 10);
    var rgb = kelvinToRgb(kk);
    stops.push('rgb(' + rgb.join(',') + ') ' + (i * 10) + '%');
  }
  strip.style.background = 'linear-gradient(90deg,' + stops.join(',') + ')';
}
function render() {
  var rgb = kelvinToRgb(k);
  sw.style.background = 'rgb(' + rgb.join(',') + ')';
  kval.textContent = Math.round(k) + 'K';
  klabel.textContent = label(k);
  dot.style.left = ((k - MIN) / (MAX - MIN) * 100) + '%';
}
buildGradient();
render();
function fromEvent(e) {
  var r = strip.getBoundingClientRect();
  var p = Math.min(1, Math.max(0, (e.clientX - r.left) / r.width));
  k = MIN + p * (MAX - MIN);
  render();
}
strip.addEventListener('pointerdown', function (e) { autoPlay = false; strip.setPointerCapture(e.pointerId); fromEvent(e); });
strip.addEventListener('pointermove', function (e) { if (e.buttons) fromEvent(e); });
(function tick() {
  if (autoPlay) { k += 40; if (k > MAX) k = MIN; }
  render();
  requestAnimationFrame(tick);
})();