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.
Extraction runs in your browser; transparent pixels are ignored so they do not skew the palette.
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.
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
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.
All Image Tools
Tap any tool to jump straight in — no signup, works on mobile.