Image Palette Extractor

Extract the dominant colors from any image — with HEX, RGB, and percentage shares — and export as CSS variables or Tailwind theme colors. Runs entirely in your browser.

How to extract a palette from an image

Drop a JPG, PNG, WebP, or GIF. ToolChop downsamples the image to a working canvas, buckets every visible pixel into a quantized RGB space, and returns the most-occurring colors with their HEX values and pixel percentages. Use the slider to ask for between 3 and 16 dominant colors. Toggle the ignore-black / ignore-white filters to exclude background or dark-UI pixels that would otherwise dominate the result.

Why a local palette extractor matters

Designers extract palettes from material they should not casually share — confidential brand mockups, competitor product screenshots, partner brand assets, customer-supplied photos, pre-launch UI explorations. ToolChop runs the extractor entirely in your browser so the source image never leaves your device. There is no upload, no log, no signup.

Two ready-to-paste exports

Once the palette is extracted, ToolChop generates two snippets for direct use in code: a CSS :root block with --color-N custom properties, and a Tailwind theme.extend.colors block with palette-N keys. Copy either with one click and paste into your stylesheet or tailwind.config.js.

What you can do

Extract 3–16 dominant colors from any image
See HEX, RGB, and percentage of pixels per swatch
Filter out near-black and near-white pixels (great for screenshots)
Export as CSS custom properties or Tailwind theme colors
Copy any individual color with one click

Frequently asked questions

How do I extract a color palette from an image online for free?

Drop your image onto the upload area. ToolChop downsamples it to a working canvas, buckets pixels into a quantized color space, and returns the most-occurring colors with their HEX/RGB values and percentage of pixels. Adjust the slider for 3–16 colors. Export as CSS variables or Tailwind colors with one click. No account, no upload, no daily limit.

Does ToolChop upload my image?

No. The image is decoded into a canvas in your browser, and ToolChop reads pixel values locally using getImageData. The file never leaves your device — important when you are extracting brand colors from a confidential mockup, a competitor screenshot, or a customer-supplied asset.

Why is the privacy story for a palette extractor important?

Designers commonly extract palettes from confidential mockups, competitor product screenshots, partner brand assets, or customer-supplied content. Uploading any of those to a third-party tool is a needless data leak. ToolChop runs the extractor entirely in your browser so the source image never crosses the network.

What algorithm does ToolChop use?

Pixel-counting in a quantized RGB space. Each pixel is mapped to a 5-bit-per-channel bucket (32 levels per channel = 32,768 buckets), counts are summed, and the top buckets become palette swatches. The reported HEX value is the average of the pixels in that bucket — close to the true color of that bucket without being literally one bucket-midpoint pixel.

How does this compare to k-means or median-cut palette extraction?

k-means and median-cut produce slightly nicer palettes for photographic images by clustering colors based on similarity rather than literal bucket counts. ToolChop's bucket approach is faster (runs in milliseconds even on 4K images), deterministic (the same image always produces the same palette), and produces nearly identical results for the typical use case: extracting brand colors from a screenshot or UI mockup.

Why are 'Ignore near-black' and 'Ignore near-white' options useful?

Two extremely common cases dominate palettes if you do not filter them. Near-white pixels make up most of a typical app screenshot (background). Near-black pixels dominate images with letterboxing or dark UIs. Toggling these on excludes those buckets, surfacing the brand colors that are actually interesting.

What is the 'percentage' next to each color?

The share of sampled pixels that fell into that color's bucket. So a palette where the top color is 35% means a bit over a third of the pixels were a near-version of that color. Useful for understanding which colors dominate the image visually vs which are accents.

Can I export the palette to use in CSS or Tailwind?

Yes. Below the palette there are two pre-formatted code blocks: a CSS :root with --color-1, --color-2, … custom properties, and a Tailwind theme.extend.colors block with palette-1, palette-2, … keys. Each has a Copy button. Paste straight into your stylesheet or tailwind.config.js.

How many pixels does ToolChop look at?

Up to ~100,000 sampled pixels per image — the image is downsampled to a working canvas and sampled at a step that scales with size. That is enough to get an accurate dominant-color estimate without making the extraction feel slow. The result updates instantly when you change settings.

Why are two of my swatches almost the same color?

Bucket-based extraction can occasionally split a single visually-distinct color across two adjacent buckets (e.g. #3A7BD5 and #3B7BD6 fall into different 5-bit buckets). For most use cases you can treat them as one color; for a stricter palette, lower the requested color count.

Will it work on transparent PNGs?

Yes. Fully transparent and near-transparent pixels (alpha < 200) are excluded from the count. Visible pixels are sampled as-is and contribute to the palette. Useful when extracting brand colors from a logo with a transparent background.

Why use ToolChop instead of an online palette extractor that uploads my image?

Privacy. Brand mockups, competitor screenshots, customer-supplied photos — these are often material you should not casually share with a third party. ToolChop runs the extractor entirely in your browser so the image never leaves your device, and the result updates instantly with no network roundtrip.