Group of a pixel
k = (⌊R ÷ 24⌋, ⌊G ÷ 24⌋, ⌊B ÷ 24⌋)
Pixels in the same group are averaged.
Image color extractor
Analyze a PNG, JPEG, or WebP image locally and retrieve its dominant colors in HEX and RGB.
- Clipboard
Image
No image loaded
Drop an image here
Add a PNG, JPEG, or WebP image. The file stays on your device and all edits run locally in your browser.
Need more editing options?
Use multiple editing tools in one workspace, with your open file and its current edits.
Open the full editorProcessing…0 %
Was this tool useful?
How does this tool work?
A photo, a poster or a logo contains a few dominant colours that give it its identity. This extractor finds them automatically, 4 to 12 of your choice, with their hex code and the share of the image they cover. Use it to carry a photo's mood into a mock-up, recover a logo's colours without the source file or build a palette that matches a cover image.
Import a PNG, JPEG or WebP image, choose the Number of colors (4, 6, 8, 10 or 12; 6 by default) and click Extract palette. To stay fast, the analysis runs on a copy reduced to 420 px on its longest side; almost transparent pixels are ignored.
Colours are grouped in steps of 24 levels on each red, green and blue channel, and each group takes the average colour of its pixels. The most populated groups are kept, then colours closer than 28 in RGB space are merged, so two nearly identical reds count as one.
The palette is shown from the most to the least present colour. Each swatch shows its hex code and the percentage of the analysed image it represents; a click copies the code. An image with few colours may return fewer colours than requested.
How to use this tool
Import the image
Drop a photo, a screenshot or a logo in PNG, JPEG or WebP.
Choose the number of colours
4 for a simple logo, 8 to 12 for a photo rich in shades.
Extract and copy
Click Extract palette, then a swatch to copy its hex code.
How the palette is calculated
Extraction combines step quantisation, merging of neighbouring colours and a share calculation.
Merging neighbouring colours
d = √((R1 − R2)² + (G1 − G2)² + (B1 − B2)²) < 28
Two colours closer than 28 are merged as a weighted average.
Share of the image
p = nc ÷ n_opaque × 100
Rounded to one decimal place.
- R, G, B
- red, green and blue channels from 0 to 255
- nc
- number of pixels assigned to the colour
- n_opaque
- number of analysed non-transparent pixels
Use cases
Carry over a photo's mood
Pick up the tones of a cover photo to style the headings and buttons of a page.
Recover a logo's colours
Get the hex codes of a logo you only have as a PNG image.
Check a visual identity
Make sure a design really uses the brand colours, in the right proportions.
Examples
Beach photo with a transparent area
The 200 transparent pixels are left out, hence 600 ÷ 1000 = 60%. Only 3 distinct colours exist, so the palette holds 3, not 4.
Input
1,200-pixel image: 600 sky blue (135, 206, 235), 300 sand (228, 197, 144), 100 dark grey and 200 transparent; 4 colours requestedResult
#87CEEB 60% · #E4C590 30% · #282828 10%Two nearly identical reds
The two reds are √(15² + 10² + 5²) ≈ 18.7 apart, below 28, so they merge into a weighted average (206, 34, 32) covering 80% of the image.
Input
500 pixels (200, 30, 30), 300 pixels (215, 40, 35) and 200 blue pixels (30, 60, 200)Result
#CE2220 80% · #1E3CC8 20%Tips and best practices
- Crop the image to the area you care about first: a large white background or sky would take first place in the palette.
- Ask for more colours than you need with a photo, then keep the ones that work together.
- Extracted colours are averages: for the exact code of one pixel, zoom into a flat area and check it with the colour converter.
- Test the palette afterwards with the colour blindness simulator if it must separate pieces of information.
Sources and references
- MDN Web Docs, Pixel manipulation with canvas (opens in a new tab)Page in English
Frequently asked questions
How does the tool pick the dominant colours?
It groups close pixels in steps of 24 levels per channel, keeps the largest groups, merges colours that are too close, then sorts the result by share of the image.
Why do I get fewer colours than requested?
Because the image does not contain enough distinct ones: after neighbouring tones are merged, fewer colours than the chosen number may remain.
What does the percentage mean?
The share of analysed pixels, transparent ones excluded, assigned to that colour. The total can be under 100% when secondary colours are not shown.
Are the codes accurate to the pixel?
They are averages of pixel groups computed on a copy reduced to 420 px. They faithfully reflect the mood, not the value of a single pixel.
Do transparent areas count?
No. Pixels with very low opacity are ignored, so a cut-out logo does not return stray black or white.
Is my image uploaded to a server?
No. Sampling and palette calculation happen in your browser.
Related tools
Keep going with these tools
Tools similar or complementary to this one.
Similar tools
Build a complementary, analogous, triadic or monochromatic palette from one color.
Images & graphicsUse this tool
Convert a color between HEX, RGB, and HSL with equivalent values.
Images & graphicsUse this tool
Preview an image as it may appear with different types of color vision deficiency.
Images & graphicsUse this tool
Read next
ReferenceConcepts and technologiesBeginner
How Is a Digital Image Built?
Understand how pixels, color channels, bit depth, and transparency come together to form an image displayed on a screen.
31 August 202615 min
GuideBest practicesBeginner
How to Create a Color Palette From an Image
Extract dominant colors from an image, assign them useful roles, and build a coherent palette without confusing frequency with visual importance.
31 August 202619 min
ReferenceConcepts and technologiesBeginner
RGB, HEX, or HSL: Which Color Notation Should You Use?
Understand how RGB, HEX, and HSL describe sRGB colors so you can choose readable CSS notation and convert values without confusion.
31 August 202613 min
GuideBest practicesBeginner
Image Metadata: Read It, Keep It, or Remove It?
Understand EXIF, GPS, XMP, IPTC, ICC profiles, rights information, and how to manage image metadata for privacy, publishing, and Web performance.
31 August 202613 min