Image Color Extractor - Extract Palette from Image Online

// Extract dominant colors from an image using Canvas API + Median Cut
function extractColorsFromImage(imageSource, colorCount = 8) {
  return new Promise((resolve, reject) => {
    const img = new Image();

    img.onload = () => {
      const maxPixels = 10000;
      const scale = Math.min(1, Math.sqrt(maxPixels / (img.width * img.height)));
      const width = Math.max(1, Math.floor(img.width * scale));
      const height = Math.max(1, Math.floor(img.height * scale));

      const canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;

      const ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, width, height);

      const imageData = ctx.getImageData(0, 0, width, height);
      const pixels = [];

      for (let i = 0; i < imageData.data.length; i += 4) {
        if (imageData.data[i + 3] < 128) continue;
        pixels.push({
          r: imageData.data[i],
          g: imageData.data[i + 1],
          b: imageData.data[i + 2],
        });
      }

      const colors = medianCut(pixels, colorCount);
      resolve(colors);
    };

    img.onerror = () => reject(new Error("Failed to load image"));

    if (imageSource instanceof File) {
      img.src = URL.createObjectURL(imageSource);
    } else {
      img.src = imageSource;
    }
  });
}

function medianCut(pixels, targetCount) {
  if (pixels.length === 0) return [];
  let buckets = [pixels];

  while (buckets.length < targetCount) {
    let maxRange = -1, maxIndex = 0, splitChannel = "r";

    for (let i = 0; i < buckets.length; i++) {
      if (buckets[i].length < 2) continue;
      for (const ch of ["r", "g", "b"]) {
        const values = buckets[i].map((p) => p[ch]);
        const range = Math.max(...values) - Math.min(...values);
        if (range > maxRange) {
          maxRange = range;
          maxIndex = i;
          splitChannel = ch;
        }
      }
    }

    if (maxRange <= 0) break;

    const toSplit = buckets[maxIndex];
    toSplit.sort((a, b) => a[splitChannel] - b[splitChannel]);
    const mid = Math.floor(toSplit.length / 2);
    buckets.splice(maxIndex, 1, toSplit.slice(0, mid), toSplit.slice(mid));
  }

  const totalPixels = pixels.length;
  return buckets.map((bucket) => {
    const r = Math.round(bucket.reduce((s, p) => s + p.r, 0) / bucket.length);
    const g = Math.round(bucket.reduce((s, p) => s + p.g, 0) / bucket.length);
    const b = Math.round(bucket.reduce((s, p) => s + p.b, 0) / bucket.length);
    const hex = "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("").toUpperCase();
    return { hex, rgb: { r, g, b }, percentage: ((bucket.length / totalPixels) * 100).toFixed(1) };
  });
}

// Usage
const input = document.querySelector('input[type="file"]');
input.addEventListener("change", async (e) => {
  const file = e.target.files[0];
  const colors = await extractColorsFromImage(file, 8);
  colors.forEach((c) => console.log(`${c.hex} - ${c.percentage}%`));
});