Color Palette Extractor — Free Canvas Pixel-Sampling Snippet

<div class="cpe-card">
  <div class="cpe-head">
    <h2>Extracted Palette</h2>
    <p class="cpe-sub">Sampled from the source image below via Canvas pixel data</p>
  </div>
  <canvas id="cpeSource" class="cpe-canvas" width="240" height="140" aria-label="Source image the palette is sampled from"></canvas>
  <div class="cpe-swatches" id="cpeSwatches"></div>
  <button type="button" class="cpe-regen" id="cpeRegen">Generate new image &amp; re-sample</button>
  <div class="cpe-toast" id="cpeToast">Copied!</div>
</div>

*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f1117;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.cpe-card{font-family:system-ui,-apple-system,sans-serif;background:#0f1117;color:#e9ebf5;border:1px solid #262a3b;border-radius:18px;padding:22px;max-width:420px;margin:0 auto;position:relative}
.cpe-head h2{font-size:17px;margin:0 0 4px}
.cpe-sub{font-size:12px;color:#8b90a8;margin:0 0 14px}
.cpe-canvas{width:100%;height:auto;border-radius:12px;display:block;margin-bottom:16px;border:1px solid #262a3b}
.cpe-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}
.cpe-swatch{aspect-ratio:1;border-radius:10px;border:1px solid rgba(255,255,255,.12);cursor:pointer;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:6px;transition:transform .12s ease}
.cpe-swatch:hover{transform:translateY(-3px)}
.cpe-swatch:active{transform:translateY(-1px) scale(.97)}
.cpe-hex{font-size:10px;font-weight:700;background:rgba(0,0,0,.45);color:#fff;padding:2px 5px;border-radius:5px;font-family:ui-monospace,Menlo,monospace}
.cpe-regen{width:100%;padding:10px;border-radius:10px;border:1px solid #262a3b;background:#161927;color:#c7cae0;font-size:13px;font-weight:600;cursor:pointer}
.cpe-regen:hover{background:#1c2033}
.cpe-toast{position:absolute;top:14px;right:14px;background:#4ade80;color:#0c1a10;font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.cpe-toast.cpe-show{opacity:1;transform:translateY(0)}

// Draws a genuinely varied scene (gradients + shapes) to the source canvas,
// then samples real pixel data at 5 points via getImageData — the swatches
// are never hardcoded colors, they come from actual rendered pixels.
var canvas = document.getElementById('cpeSource');
var ctx = canvas.getContext('2d');
var W = canvas.width, H = canvas.height;

function rand(min, max) { return Math.random() * (max - min) + min; }
function hsl(h, s, l) { return 'hsl(' + h + ',' + s + '%,' + l + '%)'; }

function paintScene() {
  ctx.clearRect(0, 0, W, H);

  // Background gradient with a randomized hue pair each run.
  var baseHue = Math.floor(rand(0, 360));
  var grad = ctx.createLinearGradient(0, 0, W, H);
  grad.addColorStop(0, hsl(baseHue, 65, 55));
  grad.addColorStop(1, hsl((baseHue + 60) % 360, 70, 30));
  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, W, H);

  // A handful of randomized circles/shapes so different regions of the
  // canvas end up with distinct real colors to sample from.
  for (var i = 0; i < 5; i++) {
    var hue = (baseHue + 40 * i + rand(-15, 15)) % 360;
    ctx.beginPath();
    ctx.fillStyle = hsl(hue, rand(55, 85), rand(35, 65));
    var r = rand(18, 46);
    ctx.arc(rand(r, W - r), rand(r, H - r), r, 0, Math.PI * 2);
    ctx.fill();
  }

  // A soft diagonal band for extra tonal variety.
  ctx.fillStyle = hsl((baseHue + 200) % 360, 60, 45);
  ctx.globalAlpha = 0.35;
  ctx.fillRect(0, H * 0.6, W, H * 0.25);
  ctx.globalAlpha = 1;
}

function rgbToHex(r, g, b) {
  return '#' + [r, g, b].map(function (v) {
    return v.toString(16).padStart(2, '0');
  }).join('');
}

// Sample 5 real points from the canvas's actual pixel data (getImageData),
// spread across the image so each swatch reflects a genuinely different
// region rather than a synthetic palette.
function samplePalette() {
  var points = [
    [W * 0.15, H * 0.2],
    [W * 0.5, H * 0.15],
    [W * 0.85, H * 0.3],
    [W * 0.3, H * 0.75],
    [W * 0.75, H * 0.8],
  ];
  return points.map(function (p) {
    var x = Math.max(0, Math.min(W - 1, Math.round(p[0])));
    var y = Math.max(0, Math.min(H - 1, Math.round(p[1])));
    var pixel = ctx.getImageData(x, y, 1, 1).data; // real pixel sample
    return rgbToHex(pixel[0], pixel[1], pixel[2]);
  });
}

var swatchesEl = document.getElementById('cpeSwatches');
var toast = document.getElementById('cpeToast');
var toastTimer = null;

function renderSwatches(hexes) {
  swatchesEl.innerHTML = '';
  hexes.forEach(function (hex) {
    var sw = document.createElement('button');
    sw.type = 'button';
    sw.className = 'cpe-swatch';
    sw.style.background = hex;
    sw.setAttribute('aria-label', 'Copy color ' + hex);
    var label = document.createElement('span');
    label.className = 'cpe-hex';
    label.textContent = hex.toUpperCase();
    sw.appendChild(label);
    sw.addEventListener('click', function () {
      copyToClipboard(hex);
    });
    swatchesEl.appendChild(sw);
  });
}

function copyToClipboard(text) {
  var done = function () {
    toast.classList.add('cpe-show');
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () { toast.classList.remove('cpe-show'); }, 1200);
  };
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(text).then(done).catch(done);
  } else {
    done();
  }
}

function regenerate() {
  paintScene();
  renderSwatches(samplePalette());
}

document.getElementById('cpeRegen').addEventListener('click', regenerate);

regenerate();