Color palette extractor
Drop a photo, logo or screenshot and get its main colors, from 3 to 12 of them, each with its HEX, RGB and HSL values and how much of the picture it covers. Click a swatch to copy it, click the picture to read any single pixel, and export the palette as CSS variables, JSON or a PNG strip. The picture is read in this page and never uploaded.
Your picture
Drop a picture here
JPEG, PNG, WebP, GIF or AVIF, up to 40 MB. It is read in your browser and never uploaded.
Dominant colours
A palette is an approximation. Other tools use other methods (k-means, octrees, different sizes of sample) and give different colours for the same picture, and photos have no single right answer. This page shrinks the picture first, which blends colours along edges. Colours also look different on different screens and colour profiles; the values here are sRGB numbers as your browser decodes them.
Pick one exact colour
Click or tap the picture to read the pixel under the pointer.
Nothing picked yet.
How the palette is worked out
- •The picture is shrunk so its longest side is at most 200 pixels, and the colors of those pixels are counted. Pixels that are fully transparent are skipped.
- •All the distinct colors start in one box. The box with the widest spread is cut in two along its widest channel (red, green or blue), at the point that separates the two halves best. That repeats until there are as many boxes as colors you asked for. Each box becomes one palette color: the average of its pixels. This is a variant of the median cut method.
- •There is no random start, so the same picture always gives the same palette. If a picture has no more distinct colors than you asked for, you get those exact colors and their exact pixel counts: the sample picture has 5 flat colors, and its shares of 48.2%, 25.0%, 16.7%, 8.3% and 1.8% match the pixel counts 11,559, 6,000, 4,000, 2,000 and 441 out of 24,000.
- •Shares are rounded to one decimal place and adjusted so they add up to exactly 100.0%. The text contrast uses the WCAG 2.x formula for black and for white text; 4.5:1 is the AA level for normal text and 7:1 is AAA.
- •Click or tap the picture to read the exact pixel under the pointer from the preview (at most 640 pixels on its longest side). Where your browser supports an eyedropper, a button also appears to sample anywhere on your screen.
Questions
- Is the palette exact?
- No. It is an approximation, and photos have no single right answer. K-means, octree and other methods, or a different sample size, give different colors for the same picture. This page is repeatable (the same picture gives the same result) but it is not a reference. The shrinking step also blends colors along edges.
- Why do the colors look different from the original?
- Screens and colour profiles differ. The values here are sRGB numbers as your browser decodes the picture, and the same numbers can look different on another display.
- Is my picture uploaded?
- No. It is decoded and analyzed in your browser, and the page makes no network request with it. Closing or refreshing the page forgets it.
- Why do I get fewer colors than I asked for?
- A picture with only a few distinct colors, such as a flat logo, cannot be split further. The page tells you how many distinct colors it found.