Image Color Extractor
Extract the dominant colours from any image as a ready-to-use palette (HEX, RGB and CSS array). Everything runs in your browser.
What is the Image Color Extractor?
The Image Color Extractor analyses a photo or artwork and returns its dominant colours as a palette of exact HEX / RGB / HSL values. Pixels are clustered by similarity and ranked by frequency, so you get the true key colours — not eyeballed approximations.
Choosing a smaller palette reveals the broad visual theme, while a larger one exposes secondary accents and shades. The same colours are supplied in formats suited to web styles, design references and programmatic use, avoiding manual sampling across many parts of an image.
Extraction runs in your browser; transparent pixels are ignored so they do not skew the palette. The complete result can be copied as individual values or exported as CSS variables, JSON or a swatch image for reuse.
How to use the Image Color Extractor
- 1Upload the image to analyse.
- 2Pick how many colours you want (typically 5–10).
- 3Copy any HEX, RGB or HSL value with one click.
- 4Export the whole palette as CSS variables, JSON or a swatch image.
When to use the Image Color Extractor
- Build a website colour scheme from a client's logo or hero photograph.
- Identify dominant and accent colours in product packaging for a matching advertisement.
- Extract repeatable HEX values from reference artwork for a design handoff.
- Export CSS variables or JSON for developers implementing an approved visual palette.
Key features
- Configurable palette size
- HEX, RGB and HSL output with one-click copy
- CSS variables and JSON export
- Handles JPG, PNG, WebP and SVG
Important notes
- Dominant colours are statistical clusters, so a small but visually important accent may require selecting a larger palette.
- Results can vary with gradients, shadows, compression artefacts and the requested number of colours.
- Transparent pixels are ignored, and analysis remains local to your browser.
Frequently asked questions
How is the palette calculated?
The image is downsampled and similar pixels are clustered with a colour-quantisation algorithm; the top clusters by frequency become the palette.
Can I use the palette in Figma?
Yes — copy the HEX codes or download the JSON and import via Figma's variables panel.
Why is a small accent colour missing?
Colours are ranked by pixel frequency, so a rare accent can fall below larger background clusters. Increase the requested palette size to expose more secondary colours.
Are transparent areas treated as a colour?
No. Transparent pixels are excluded so they do not create a misleading background swatch.
All Image Tools
Tap any tool to jump straight in — no signup, works on mobile.