Color Mixer — Blend Two Colors into a Swatch Scale

<div class="cm-card">
  <div class="cm-ends">
    <label class="cm-end"><span>From</span>
      <div class="cm-swatch"><input type="color" id="cmA" value="#6366f1"><input type="text" id="cmAHex" value="#6366F1" maxlength="7" spellcheck="false"></div>
    </label>
    <label class="cm-end"><span>To</span>
      <div class="cm-swatch"><input type="color" id="cmB" value="#22d3ee"><input type="text" id="cmBHex" value="#22D3EE" maxlength="7" spellcheck="false"></div>
    </label>
  </div>

  <label class="cm-steps">Steps <strong id="cmStepsVal">7</strong>
    <input type="range" id="cmSteps" min="3" max="11" step="1" value="7">
  </label>

  <div class="cm-scale" id="cmScale"></div>
  <code class="cm-css" id="cmCss"></code>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0;display:flex;justify-content:center;padding:36px 18px}

.cm-card{background:#1e293b;border:1px solid #334155;border-radius:18px;padding:18px;width:100%;max-width:400px}
.cm-ends{display:flex;gap:12px;margin-bottom:14px}
.cm-end{flex:1;display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8}
.cm-swatch{display:flex;align-items:center;gap:8px;background:#0f172a;border:1px solid #334155;border-radius:10px;padding:6px 8px}
.cm-swatch input[type=color]{width:28px;height:28px;border:none;background:none;padding:0;cursor:pointer}
.cm-swatch input[type=text]{border:none;outline:none;background:none;font-size:13px;font-family:ui-monospace,monospace;width:100%;text-transform:uppercase;color:#e2e8f0}

.cm-steps{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:#94a3b8;margin-bottom:14px}
.cm-steps strong{color:#e2e8f0;min-width:18px}
.cm-steps input{flex:1;accent-color:#6366f1}

.cm-scale{display:flex;border-radius:10px;overflow:hidden;height:64px;border:1px solid #334155}
.cm-cell{flex:1;position:relative;cursor:pointer;transition:flex .12s}
.cm-cell:hover{flex:1.4}
.cm-cell span{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:9px;font-weight:700;font-family:ui-monospace,monospace;opacity:0;transition:opacity .12s}
.cm-cell:hover span{opacity:1}
.cm-copied{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;background:rgba(0,0,0,.45)}

.cm-css{display:block;margin-top:12px;background:#0f172a;border:1px solid #334155;border-radius:8px;padding:9px 12px;font-family:ui-monospace,monospace;font-size:11px;color:#7dd3fc;cursor:pointer;word-break:break-all;line-height:1.5}

function toRgb(hex) { return [parseInt(hex.slice(1,3),16), parseInt(hex.slice(3,5),16), parseInt(hex.slice(5,7),16)]; }
function toHex(rgb) { return '#' + rgb.map(function (c) { return Math.round(c).toString(16).padStart(2,'0'); }).join('').toUpperCase(); }
function clampHex(v) { v = v.trim(); if (v[0] !== '#') v = '#' + v; if (/^#[0-9a-fA-F]{3}$/.test(v)) v = '#' + v[1]+v[1]+v[2]+v[2]+v[3]+v[3]; return /^#[0-9a-fA-F]{6}$/.test(v) ? v : null; }
function lum(rgb) { return 0.2126*rgb[0] + 0.7152*rgb[1] + 0.0722*rgb[2]; }

var a = document.getElementById('cmA'), aHex = document.getElementById('cmAHex');
var b = document.getElementById('cmB'), bHex = document.getElementById('cmBHex');
var steps = document.getElementById('cmSteps'), stepsVal = document.getElementById('cmStepsVal');
var scale = document.getElementById('cmScale'), cssEl = document.getElementById('cmCss');

function mix(c1, c2, t) { return [c1[0]+(c2[0]-c1[0])*t, c1[1]+(c2[1]-c1[1])*t, c1[2]+(c2[2]-c1[2])*t]; }

function render() {
  var ca = toRgb(a.value), cb = toRgb(b.value);
  var n = parseInt(steps.value, 10);
  stepsVal.textContent = n;
  scale.innerHTML = '';
  var hexes = [];
  for (var i = 0; i < n; i++) {
    var t = n === 1 ? 0 : i / (n - 1);
    var rgb = mix(ca, cb, t);
    var hex = toHex(rgb);
    hexes.push(hex);
    var cell = document.createElement('div');
    cell.className = 'cm-cell';
    cell.style.background = hex;
    var label = document.createElement('span');
    label.textContent = hex;
    label.style.color = lum(rgb) > 140 ? '#0f172a' : '#fff';
    cell.appendChild(label);
    cell.addEventListener('click', function (hx, cl) {
      return function () {
        navigator.clipboard && navigator.clipboard.writeText(hx);
        var tag = document.createElement('div'); tag.className = 'cm-copied'; tag.textContent = 'Copied'; cl.appendChild(tag);
        setTimeout(function () { tag.remove(); }, 700);
      };
    }(hex, cell));
    scale.appendChild(cell);
  }
  cssEl.textContent = 'linear-gradient(90deg, ' + hexes.join(', ') + ')';
}

[a, b].forEach(function (inp) { inp.addEventListener('input', function () { (inp === a ? aHex : bHex).value = inp.value.toUpperCase(); render(); }); });
[aHex, bHex].forEach(function (inp) { inp.addEventListener('input', function () { var c = clampHex(inp.value); if (c) { (inp === aHex ? a : b).value = c; render(); } }); });
steps.addEventListener('input', render);
cssEl.addEventListener('click', function () { navigator.clipboard && navigator.clipboard.writeText(cssEl.textContent); });

render();