Palette Extractor

The Palette Extractor looks at an image and lists the colors that appear most often in it, as swatches with hex values such as #F07848. Click a swatch to copy its value. It is handy when you want a quick read of a reference photo's overall tones before choosing colors for a poster, slide deck, or web page. To be clear about what it does not do: you cannot choose how many colors to extract (it returns at most 6), it does not output RGB, HSL, or CSS variables, and it does not judge which colors look good together. It simply counts how frequent each color is.

How to use it

1. Click the dashed upload area that says 'Click or drag an image here to upload' and pick an image, or drag an image file straight onto it.
2. Once the file is read, the area shows a preview and a row of swatches appears under the heading 'Extracted colors (click to copy)'. Each swatch carries its hex value.
3. Click any swatch to copy that hex value to your clipboard. The icon turns into a check mark for about one second.
4. To try another image, click the upload area again and choose a new file. The results refresh automatically.

A worked example computed with the tool's own logic

To show how the values come about, we ran the tool's counting logic on a constructed set of pixels: 4000 pixels of RGB(250,120,60), 3000 of RGB(20,30,40), 1500 of pure white, 1000 of RGB(245,125,55), and 500 semi-transparent green pixels with an alpha of 100. The real output, in order, was #F07848 (4000 pixels), #181830 (3000), #FFFFFF (1500), and #F07830 (1000). That is only four colors, because the 500 semi-transparent pixels are skipped. Three things are worth noticing. First, #F07848 is not the original RGB(250,120,60): each channel is rounded to a step of 24 before counting, so the swatch shows the grouped color, which usually differs slightly from any exact pixel. Second, RGB(245,125,55) fell into a different bucket for the blue channel and was listed as its own color, #F07830, even though it looks almost identical to the first orange. Third, when an image has fewer than 6 grouped colors you get fewer than 6 swatches. If you need the exact value of one spot, use the site's Image Color Picker and click that pixel.

Supported input and known limits

• Only files the browser reports as images (type starting with image/) are accepted. Choosing any other file type does nothing and shows no message.
• The image is scaled down to 100 by 100 pixels before counting. That keeps it fast, but very small details or tiny accent areas may be missed.
• Colors are grouped in steps of 24, so the output is an approximation, not the exact value of any pixel. Similar colors that land on opposite sides of a step boundary can show up as two near-identical swatches.
• Fully transparent and mostly transparent pixels (alpha below about half) are ignored, so a PNG with a transparent background does not count the empty area as a color.
• A large white or black background is just another color and will take a swatch. It is not excluded automatically.
• The text color on each swatch is chosen from the red channel only, so on some colors (a bright green, for example) the label may be hard to read. The hex value itself is unaffected.
• Copying relies on the browser's clipboard permission. If the browser refuses, nothing is shown; just copy the value by eye.
• The count is fixed at a maximum of 6 colors, and you cannot export the palette as a file.

FAQ: Why does my eyedropper app report a different value?

Because this tool outputs grouped, approximate colors. Each channel from 0 to 255 is rounded to the nearest multiple of 24, and anything above 255 is capped at 255 (which is why pure white comes out as #FFFFFF). The goal is to answer 'what colors is this picture mostly made of', not to reproduce one pixel. For an exact value, use a tool that samples a single pixel.

FAQ: Why do I get fewer than 6 colors, or two colors that look the same?

The number of swatches depends on how many distinct grouped colors the image has, so a simple image can produce only a few. Near-duplicates appear because grouping uses fixed steps, and two close colors on either side of a boundary count as different. Just pick one of them.

FAQ: Will a very large image make it slow?

Resolution barely matters for the counting itself because the image is shrunk to 100 by 100 first. Loading a huge file still uses browser memory, though, so if the page feels sluggish, compress the image first.

FAQ: Can I use the extracted colors commercially?

A color value is just a number, but the image it came from may be protected by copyright. Taking inspiration from a reference image is usually fine; whether you may reuse the image or a very close copy of its palette commercially depends on where it came from and how you use it, and that call is yours to make.

Privacy and processing

The image is read with the browser's built-in file reader and drawn onto an internal canvas to count colors, all inside your browser. Looking at the code, the tool makes no network request to upload the image and stores nothing. When you refresh or close the page, the image and the results are gone.