Color Extractor: Dominant Colors of an Image

About the Color Extractor

The Color Extractor lists the dominant colors of a picture. Choose, drop or paste one image and the tool shows the main colors it contains, each with a swatch, a hex code, an rgb() value, an hsl() value, a bar and the share of the picture it covers, to one decimal place. You decide how many colors to list, how to sort them and which near-white or near-black pixels to leave out.

It reads PNG, JPEG, GIF, BMP, WebP and AVIF files up to 50 MB. Your image never leaves your device. Nothing is uploaded, there is no account, and the pixels are read and counted by your own browser.

How to use it

If the picture is fully transparent, or every pixel was filtered out, the page says "No colours found. The picture is transparent or every pixel was filtered out." Turn off the ignore options or pick another image.

How the share is worked out

Each listed color covers a group of similar pixels. Its share is that group's size as a percentage of the pixels that were counted:

$\text{share} = 100 \times \frac{\text{pixels in the group}}{\text{counted pixels}}$

Pixels with an alpha value below 25 (almost fully transparent) never count, and neither do pixels removed by the ignore options. So shares are shares of what was counted, not of the whole canvas.

Take a 10 by 10 image, which has 100 pixels. Four columns are blue, three are red, two are white and one is fully transparent. The transparent column is not counted, so $100 - 10 = 90$ pixels remain:

• Blue: $100 \times 40 / 90 = 44.4$ percent.
• Red: $100 \times 30 / 90 = 33.3$ percent.
• White: $100 \times 20 / 90 = 22.2$ percent.

Now turn on Ignore near-white. The 20 white pixels are left out, so 70 pixels are counted. Blue becomes $100 \times 40 / 70 = 57.1$ percent and red becomes $100 \times 30 / 70 = 42.9$ percent. The shares are rounded to one decimal place, so a list can add up to 99.9 or 100.1 percent.

How the colors are found

For speed, the image is read at up to 1,000,000 pixels, so a larger photo is scaled down first. Every counted pixel is then placed in a histogram that keeps 5 bits of each channel. A channel value $v$ from 0 to 255 lands in bin

$\text{bin} = \left\lfloor \frac{v}{8} \right\rfloor$

which gives 32 levels per channel and $32^3 = 32768$ bins in all. For rgb(59, 130, 246) the bins are $\lfloor 59/8 \rfloor = 7$, $\lfloor 130/8 \rfloor = 16$ and $\lfloor 246/8 \rfloor = 30$. Every shade within 8 levels of each other on each channel, such as red values 56 to 63, falls in the same bin, which is how JPEG noise and gentle gradients are merged.

The tool then runs median cut. It starts with one box holding all the bins. While there are fewer boxes than the number you asked for, it takes the box with the most pixels, finds the channel (red, green or blue) with the widest range of values, sorts the box's bins along that channel and cuts it at the weighted median, so each half holds about the same number of pixels. Each final box is reported as the mean color of the pixels in it, weighted by pixel count, and its share is the box's pixel count over the counted total.

How it differs from the average color

The average color blends every pixel into one value. A picture that is half pure red, rgb(255, 0, 0), and half pure blue, rgb(0, 0, 255), averages to $\left(\frac{255 + 0}{2}, 0, \frac{0 + 255}{2}\right) = (127.5, 0, 127.5)$, which is about rgb(128, 0, 128), a purple that appears nowhere in the picture. With 2 colors, the Color Extractor reports red at 50.0 percent and blue at 50.0 percent, both colors that are really there. Use the Average Color Finder when you want one blended tone for a region, and the Color Extractor when you want the colors the picture is made of.

Choosing the options

• Number of colours. A small count such as 3 or 4 gives broad groups, good for a theme color. A larger count such as 12 or 16 splits those groups into finer shades. Because each box is a mean, the same shade can be reported slightly differently at different counts.
• Sort by Share puts the biggest areas first. Sort by Hue orders colors around the color wheel from red onward and puts greys last, dark to light, which suits a palette strip.
• Ignore near-white drops pixels whose red, green and blue are all at least 240. Use it for product photos on a white background, otherwise white takes most of the share.
• Ignore near-black drops pixels whose three channels are all at most 15. Use it for dark vignettes, letterbox bars and black borders.

Using the result

• Copy CSS produces custom properties, --color-1 and so on, ready to paste into a stylesheet.
• Copy JSON gives a list with the hex, rgb, hsl and share of each color.
• Download SVG and Download PNG save a color strip. The PNG is named image-colors.png, and each segment is as wide as its share.

To read one exact pixel instead of a group, use the Image Color Picker. To build matching colors around a result, open the Color Palette Generator. To process many pictures at once, use the Bulk Color Extractor.

Limits worth knowing

The tool reports colors as numbers. It does not name them, remove backgrounds or read embedded color profiles, so values are what your browser shows in sRGB. A color is a mean of similar pixels, so it can differ by a few levels from any single pixel in the file. JPEG compression adds that kind of variation, which is another reason a PNG gives steadier results.

Frequently asked questions