Image Palette Extractor

Algorithm in detail: **Step 1: Load and scale the image.** The selected file is loaded via FileReader and drawn onto an offscreen canvas at the display size (capped at max 900px width, preserving aspect ratio). The canvas dimensions become the pixel sample space. **Step 2: Pixel sampling.** A nested loop iterates over the canvas pixels with a stride of 6 in both directions, calling `getImageData(x, y, 1, 1).data` at each sampled position. Each call returns `[R, G, B, A]`. Transparent or near-transparent pixels (alpha < 128) are skipped to avoid counting empty background areas. **Step 3: Build the 3D histogram.** For each sampled pixel, compute `binR = R >> 4` (i.e., `Math.floor(R / 16)`), and similarly for G and B. The bin index is `(binR << 8) | (binG << 4) | binB`, which packs three 4-bit values into a single 12-bit integer (0–4095). A `Map` or plain object accumulates two things per bin: the count of pixels in that bin, and two sums (totalR, totalG, totalB) for later average computation. For efficiency with 4096 possible bins, a plain object keyed by the index integer is used. **Step 4: Extract top N bins.** The histogram object is converted to an array of `{ index, count, totalR, totalG, totalB }` entries, sorted in descending order by count, and the first N entries are taken (N from the slider). **Step 5: Compute average colour per bin.** For each top bin entry, the average colour is `Math.round(totalR / count)`, etc. The result is converted to a hex string via `.toString(16).padStart(2, '0')`. The percentage coverage is `(count / totalSampledPixels) * 100`, rounded to one decimal place. **Display:** Each extracted colour is shown as a row containing a colour swatch (a small filled square), the hex code, a horizontal percentage bar (proportional to coverage), and the numeric percentage. The swatch acts as a button — clicking it copies the hex code via `navigator.clipboard.writeText()`. A Copy button next to each swatch also copies the hex. **Slider:** An `<input type="range" min="3" max="12" x-model="numColors">` slider with a numeric display. When the slider changes, steps 4-5 are re-run (the histogram need not be rebuilt). Debouncing is not required because sorting 4096 entries and rendering a handful of swatches is extremely fast. **Edge cases:** - Solid-colour image: the histogram has exactly one non-zero bin. The top N will include that bin plus N-1 zero-count bins. The tool displays only bins with count > 0, so it gracefully shows fewer swatches than N. - Very small images (e.g., 50×50 icons): the stride of 6 would sample too few pixels. The tool adapts: if either dimension is below 100px, the stride is reduced to 2 or 1 to ensure adequate sampling. - Animated GIFs: the browser renders only the first frame onto the canvas, so the palette is based on frame 1 only. **Performance:** For a 900×600 display canvas, the stride-6 sampling examines approximately (900/6)×(600/6) = 150×100 = 15,000 pixels. Each `getImageData` call reads 1 pixel. Modern engines handle this in under 20ms. The histogram binning and sorting are O(sampled_pixels + bins_log_bins) where bins is at most 4096, so also negligible. **Limitations:** - The binning approach with 4-bit channels groups similar but not identical colours. Very subtle gradients may spread across multiple bins, causing a few near-identical swatches to appear in the top N. This is inherent to the simplicity of the approach — a full median-cut or k-means algorithm would be more accurate but far more complex and slower in JavaScript. - The percentage bar reflects sampled pixel count, not perceptual area. A bright, saturated accent colour on a small object may have high visual prominence but low pixel count.