๐จ Image Color Extractor
Drag and drop an image, or click to select one
Upload an image and this tool automatically extracts its dominant colors as a palette of HEX color codes. Click any color to copy its HEX code. Handy for finding color inspiration from a photo, or building a palette for a logo or banner.
How to use
- Drag and drop an image, or click to select a file.
- The dominant colors in the image are extracted automatically and shown as a palette.
- Click a color card to copy its HEX code to your clipboard.
How the calculation works
Pull out the most-used colours in an image, up to eight, as a palette of HEX colour codes (like #1a3a5c). Click a colour to copy its code. How it works 1. Shrink the image so its longer side is 200 pixels (for speed) 2. Sort each pixel into a โbucketโ in steps of 24 for each of red, green and blue 3. Rank the buckets by pixel count and use each bucketโs average colour Similar colours are counted together, so the result reflects the overall palette rather than tiny variations. Pixels that are more than half transparent are skipped.
Worked example
A photo of blue sky and a beach โ sky blue, cloud white, sand beige and deep sea blue near the top Using colours taken from a photo for backgrounds and buttons makes a site or banner design sit well with the image.
Things to be aware of
- Colours covering larger areas rank higher, so small but eye-catching accent colours may not appear.
- Because the image is shrunk first, the colours of thin lines and small text are easy to miss.
- Processing happens in your browser; the image is never uploaded.
FAQ
How many colors does this extract?
It extracts and displays the top 8 most frequently used colors in the image.
How are transparent areas handled?
Pixels with high transparency are excluded from the color extraction.
Is my uploaded image sent to a server?
No, all processing happens entirely in your browser.