Source Image
Drop an image here, or browse files
PNG, JPG, WebP — processed locally. No uploads.
Palette
Upload an image to extract colors
Drop an image here, or browse files
PNG, JPG, WebP — processed locally. No uploads.
Upload an image to extract colors
How pixel data becomes a color palette.
const imageData = ctx.getImageData(
0,
0,
canvas.width,
canvas.height
);
const pixels = imageData.data;
// Each pixel has 4 values: R, G, B, A
// Total values = width × height × 4
for (let i = 0; i < pixels.length; i += 4) {
const [r, g, b, a] = [
pixels[i], // Red 0-255
pixels[i+1], // Green 0-255
pixels[i+2], // Blue 0-255
pixels[i+3] // Alpha 0-255
];
}Images are converted into a flat Uint8ClampedArray containing thousands of RGBA values. Each pixel occupies 4 consecutive array entries — red, green, blue, and alpha channels.
Millions of possible colors are reduced to a curated palette using median cut: the color space is recursively split at the median of the widest channel until the target number of color groups is reached.
After clustering, each group's representative color is computed as the weighted average of its member pixels, giving more influence to colors that appear more frequently in the image.