🎨 Image Color Extractor (Palette from Image)
By ToolNimba Color Team · Updated 2026-06-19
PNG, JPG, GIF, WebP or BMP. The image is read in your browser and never leaves your device.
Choose an image to extract its color palette.
This image color extractor reads an image you upload and pulls out its most common (dominant) colors as a clean palette of hex codes. Drop in a photo, logo, screenshot or piece of artwork, set how many colors you want, and click any swatch to copy its hex value. The whole process runs in your browser using the Canvas API, so your image is never uploaded to a server and nothing leaves your device.
What is the Image Color Extractor?
A digital image is just a grid of pixels, and each pixel carries a color described by three channels: red, green and blue, each from 0 to 255. A single photo can contain tens of thousands of slightly different colors, far too many to be useful as a palette. Extracting a palette means grouping all those near-identical colors together and reporting the handful that appear most often, so you end up with the few tones that actually define the look of the image.
This tool does that with a method called frequency bucketing on quantized RGB. First the image is drawn onto a small canvas (downscaled so the work stays fast), then every sampled pixel has its red, green and blue values rounded down into coarser bands. Rounding to 32 levels per channel, for example, merges colors that are visually almost the same into one bucket. The tool counts how many pixels fall into each bucket, averages the true colors inside the most-populated buckets, and shows those averages as your palette, ordered by how much of the image they cover.
Because the result is frequency based, the colors you see reflect area, not attention. A large plain background will dominate the palette even if a small bright logo is the part you care about. That is expected behaviour for this kind of extractor and is usually what you want for things like matching a theme to a photo. If a tiny accent color matters more to you than a big neutral one, increase the number of colors so the smaller regions still make the list, or crop the image to the region you care about before uploading.
When to use it
- Building a website or brand color scheme that matches a hero photo or product shot.
- Pulling the exact hex codes out of a logo or screenshot when you do not have the source file.
- Creating a design palette from a piece of artwork, a moodboard image or a landscape photo.
- Checking which colors dominate a marketing image before choosing accent or text colors.
How to use the Image Color Extractor
- Click "Choose an image" and select a PNG, JPG, GIF, WebP or BMP file.
- Set how many colors you want in the palette (2 to 16).
- Pick a sampling quality: high reads every pixel, fast reads fewer for speed.
- Read off the dominant colors with their hex codes and the percentage of the image each covers.
- Click any swatch to copy its hex code to the clipboard.
Formula & method
Worked examples
An image is mostly sky blue with a small patch of grass green.
- The canvas is sampled and each pixel is quantized to 32 levels per channel.
- Most pixels land in a blue bucket, far fewer land in a green bucket.
- Buckets are sorted by pixel count: blue first, green second.
- The true RGB values in the blue bucket are averaged to, say, (110, 170, 230) = #6EAAE6.
- Coverage: if 8,000 of 10,000 sampled pixels are blue, that swatch shows 80.0%.
Result: Palette led by #6EAAE6 at 80.0% coverage, with the green tone listed below it.
Converting a single pixel value of RGB (200, 100, 50) into a bucket key.
- qr = floor(200 ÷ 8) = 25
- qg = floor(100 ÷ 8) = 12
- qb = floor(50 ÷ 8) = 6
- key = (25 x 1024) + (12 x 32) + 6 = 25600 + 384 + 6 = 25990
- Any pixel within the same 8-wide band on each channel maps to this same key.
Result: The pixel joins bucket 25990, where it is grouped with visually identical neighbors.
What the sampling quality setting does
| Setting | Pixels read | Best for |
|---|---|---|
| High | Every sampled pixel | Small images or maximum accuracy |
| Medium | 1 in every 2 | A good balance of speed and accuracy (default) |
| Fast | 1 in every 4 | Large images where speed matters most |
Common color formats you can build from an extracted hex code
| Format | Example | Notes |
|---|---|---|
| HEX | #6EAAE6 | Six hex digits, the format this tool copies |
| RGB | rgb(110, 170, 230) | Each channel as a 0 to 255 value |
| HSL | hsl(210, 71%, 67%) | Hue, saturation, lightness |
Common mistakes to avoid
- Expecting the brightest color to top the palette. The palette is ranked by how much area a color covers, not how eye-catching it is. A big muted background will outrank a small vivid accent. Raise the color count or crop to the area you care about.
- Treating an averaged swatch as an exact pixel. Each swatch is the average of many similar pixels, not a single sampled point. It represents a region of the image, so it may differ slightly from any one pixel you eyedrop manually.
- Uploading a huge image and expecting per-pixel reading. The image is downscaled to about 200 pixels on its long side before sampling, which keeps it fast and barely changes the dominant colors. Fine detail in a very large image will not each get its own swatch.
- Forgetting that transparent areas are skipped. Mostly transparent pixels (like the empty corners of a PNG logo) are ignored so they do not pollute the palette with the page background. Only opaque pixels are counted.
Glossary
- Hex code
- A color written as a hash followed by six hexadecimal digits, two each for red, green and blue, for example #6EAAE6.
- RGB
- The red, green and blue channels that make up a screen color, each ranging from 0 to 255.
- Dominant color
- A color that covers a large share of an image, found by counting how many pixels fall near it.
- Quantization
- Rounding precise color values into a smaller set of bands so near-identical colors are treated as one.
- Bucket
- A group that collects all pixels sharing the same quantized color, used here to count frequency.
- Canvas
- The browser drawing surface this tool uses to read an image’s pixels without sending it anywhere.
Frequently asked questions
How does the image color extractor find the dominant colors?
It draws your image onto a small canvas, samples the pixels, and rounds each pixel’s red, green and blue values into coarse bands so near-identical colors group together. It counts how many pixels fall into each group and shows the most common ones as your palette, ranked by how much of the image they cover.
Is my image uploaded to a server?
No. The image is read and analysed entirely in your browser using the FileReader and Canvas APIs. Nothing is sent over the network, so the tool works offline and your photo never leaves your device.
How many colors should I extract?
Start with the default of 8. Use fewer (4 to 6) for a tight, brand-style palette, or more (10 to 16) when an image has many distinct regions and you want smaller accent colors to appear as well.
Why is a color I can clearly see missing from the palette?
The palette is ranked by area, so a small but vivid color can be pushed out by larger, plainer regions. Increase the number of colors, or crop the image down to the part you care about, and the missing tone should appear.
What image formats can I use?
Any common raster format your browser can decode, including PNG, JPG, GIF, WebP and BMP. Animated GIFs are read as their first frame. Some SVG files may be blocked from pixel reading by the browser for security reasons.
Can I copy the colors in RGB or HSL instead of hex?
The tool copies hex codes, which are the most widely supported format. You can convert any copied hex into RGB or HSL with a color converter, since hex, RGB and HSL all describe the same color in different notations.