Extract Colors From Image
Pull HEX codes out of any image — perfect for matching brand colors from screenshots and photos.
Picked color
Click anywhere on the image to pick a color.
Dominant colors
Upload an image to extract its dominant palette.
Pulling colors out of an image is one of the most common starting points in real design work. You see a competitor's landing page and want to match the exact CTA color before pitching a redesign. You have a brand asset in PNG but no documented hex codes. You want to build a palette around a stock photo for a client project. In all of these cases, the question is the same: what is the actual hex value of that pixel?
The tool answers this in two modes. Drop an image and the extractor returns the six dominant colors with their hex, RGB and HSL values, ranked by visual importance. Click on any point of the image and the picker returns the exact pixel color — useful when you need a specific brand red rather than "something close to red". Both modes work with JPG, PNG, GIF, WebP and AVIF, and both run entirely in your browser so confidential mockups never leave your machine.
One caveat worth knowing: colors extracted from a JPG screenshot of a website will be slightly off compared to the original CSS values, because JPG compression introduces color shift. If pixel-perfect accuracy matters (for example, recreating an exact brand red from a screenshot), prefer a PNG screenshot, which is lossless. Even then, subpixel rendering and the user's monitor color profile can introduce a few points of difference, so always cross-check with the source if you can find it.
Frequently asked questions
Do extracted colors include transparent pixels?+
No — fully or mostly transparent pixels (alpha below ~5%) are skipped during extraction. This is important for logos and graphics with transparent backgrounds, where the "void" would otherwise dominate the result. Semi-transparent pixels are treated based on their compositing color.
Are the extracted colors exact pixel values?+
The six dominant colors are quantized — they represent clusters of similar pixels rather than exact pixel values. To get an exact pixel value, use the picker mode (click on the image) which reads the precise color at the click location.
Why are screenshot colors slightly different from the source?+
JPG compression shifts color values by a few points, especially in flat areas. If the original page used #4F46E5, a JPG screenshot might extract #4D45E2. PNG screenshots are lossless and preserve the original values. If you can find the source CSS, use that as ground truth.
Can I extract colors from website screenshots for competitor research?+
Yes — that is one of the most common use cases. Take a PNG screenshot of the page, drop it in, and the dominant colors come out instantly. For a fuller picture, take screenshots of the homepage, a product page, and the footer, since brands often use different palette weighting on different page types.
Does this work with transparent PNGs and SVGs?+
Transparent PNGs work — the transparent areas are skipped automatically. SVGs work if your browser can render them as raster (most can, via canvas). For perfect results with vector logos, export the SVG as a high-resolution PNG first.