About the Color Extractor
Upload a photo, logo, screenshot or design and click on it to read the exact colour of any pixel as a hex code. Collect the colours you pick into a palette and copy them for your CSS, design system or brand guide. It is the eyedropper from your design app, available in any browser, with the image processed locally on your device.
What you can do with it
- Match a brand colour from a logo or marketing image when the style guide is nowhere to be found.
- Pull a palette from a photograph to theme a website, slide deck or interior mood board.
- Check the actual rendered colour in a screenshot when debugging CSS or a design hand-off.
- Grab colours from a competitor's or reference site for analysis.
- Sample skin, sky or product colours for colour grading and retouching.
How pixel sampling works
The image is drawn onto an off-screen canvas at its native resolution. When you click, the click position is mapped from the displayed size back to the original pixel coordinates and that pixel's red, green and blue values are read with getImageData and converted to hex. Because sampling is per pixel, clicking on a photograph returns the colour of that exact point — which in noisy or gradient areas can vary from its neighbours. Zoom in and click a flat area for the most representative reading, or sample a few nearby points and average them with the Color Mixer.
Turning picks into a usable palette
- Aim for 4–6 colours: a dominant, one or two accents, and neutrals.
- Check text/background combinations with the Contrast Checker before using them in UI.
- Name the colours with the Color Name Finder for documentation.
- Generate tints and shades of each pick with the Color Harmony tool or by mixing with white/black.
- Convert to HSL with the Color Converter if you want to adjust lightness consistently across the set.
How to use the Color Extractor
- 1Upload an image. Drop a JPG, PNG, WebP or GIF onto the page. It stays on your device.
- 2Activate the eyedropper. Click the Eyedropper button, then click any point on the image.
- 3Collect colours. Each pick is added to your palette with its hex code.
- 4Copy. Copy individual codes or the whole palette.
Frequently asked questions
- Why does the colour I picked look slightly different from what I expected?
- Sampling reads a single pixel. Photos contain noise, compression artefacts and gradients, so adjacent pixels differ. Click on a flat, evenly lit area or sample several points and average them.
- Can I extract the dominant colours automatically?
- This tool is a manual eyedropper for precise picks. Use the Color Palette tool to generate a dominant-colour palette from an image automatically.
- Does it work on transparent PNGs?
- Yes. Transparent pixels report the underlying RGB values; fully transparent areas may return black.
- Is my image uploaded?
- No. The image is loaded and sampled entirely in your browser.