Color Palette Extractor

What this tool does

Designers steal color palettes from the world all the time — a sunset, a poster, a film still, a screenshot of someone’s app. This tool automates that. Drop any image and get back its dominant colors as a set of swatches, each labeled with HEX, RGB, and HSL values you can copy with a single click. Pick 4 swatches for a tight brand-style palette, 6 for a flexible UI palette, 8 for an illustration set, or 12 to capture nuance in photographs. Beyond per-swatch copy, you can export the whole palette in three formats: CSS variables ready to drop into :root, a Tailwind config snippet for your tailwind.config.js, or JSON with HEX/RGB/HSL for any other tool. The image never leaves your browser. We downsample it to a small canvas, sample every pixel, and bucket nearby colors together — all locally. That means you can extract palettes from internal mockups, NDA’d brand assets, or personal photos without any privacy risk. There’s no upload, no tracking, no temporary copy stored on a server somewhere.

How to use it

1. Drop the image — Any common format works — PNG, JPG, WebP, GIF. Quality of palette is best with images that have clear color regions; very noisy or grainy images can produce muddy swatches.
2. Pick the count — 4 for a punchy brand-style palette. 6 is the UI sweet spot. 8–12 capture more subtle shades, useful for illustration references.
3. Copy individual swatches — Click any swatch to copy its HEX value to the clipboard. The chip flashes “Copied!” to confirm.
4. Export the whole palette — Use the bottom buttons to copy the palette as CSS variables, a Tailwind colors object, or JSON. Paste straight into your project.

How extraction works

We resize the image to a 200×200 canvas (sampling the whole image, not the corners) and read every pixel via getImageData. Each pixel’s RGB is rounded down to the nearest multiple of 32, producing 512 possible buckets (8×8×8). Buckets are tallied, sorted by count, and we walk the list picking the most frequent colors that aren’t too close to one already chosen (Euclidean distance ≥ 38 in RGB space) so the palette has visual variety. The displayed swatch is the average RGB of all pixels in that bucket, not the bucket’s rounded representative — that gives slightly more accurate colors. Fully transparent and near-transparent pixels are excluded.

Choosing the right count

4 colors works for logos and minimal brand identities — forces a strict hierarchy. 6 colors is what most design systems land on: 1–2 brand, 1 accent, neutrals. 8 colors gives you secondary accents and mid-tone neutrals. 12 colors is for illustration and photography references where you want to capture subtle gradations. Beyond 12 the palette becomes noisy and hard to use as a design constraint.

Frequently asked questions