Pull dominant colors from any reference image: the image is sampled in a downscaled canvas, colors are quantized and ranked by frequency, then a diversity filter keeps swatches from clustering. Export CSS custom properties or JSON — all locally in your browser.
Quantization merges similar RGB values before counting. Larger buckets favor broader theme colors; smaller buckets retain more variation.
Click a swatch to copy its HEX.
/* Upload an image to begin */
[]
It resizes your image (long edge about 220px for sampling), reads pixels from a canvas, then buckets RGB values using the quantization step you chose. Each bucket counts how many pixels landed there. The most frequent buckets become candidates; a minimum distance filter in RGB space keeps the final swatches from sitting on top of each other.
Fine quantization (small buckets) preserves subtle differences — good for gradients and photographs. Coarse buckets merge nearby shades so you see broader “theme” colors. If two swatches still look alike, reduce the swatch count or increase bucket size.
Pixels with alpha below a small threshold are skipped so transparent PNGs and cutouts do not dominate the counts with “empty” color.
Your image is never uploaded to DroidXP — decoding and sampling happen with canvas and getImageData in your browser.
No. The file is decoded in your browser; pixel data stays on your device.
It uses frequency and simple heuristics — not a full brand-asset pipeline. For production, validate with your brand guidelines and accessibility tools.
Bucket size changes which RGB values merge before counting, so the top-ranked colors can shift.
Photos often contain noise and gradients. Try fewer swatches, coarser quantization, or crop the image to the region you care about.
Very transparent pixels are ignored so they do not skew the palette.
Copy HEX or JSON and map manually into tokens or styles — this tool does not emit framework config files.
Sampling uses a downscaled copy for speed. For detail, crop the important area first in an editor.
Browsers render in sRGB. For print, verify colors in your DTP software with the correct ICC profile.
No. Use a contrast checker when pairing text and background colors for accessibility.