Color Palette Extractor — Get HEX Codes from Any Image
Upload any image to extract its dominant colors as a palette. Click any swatch to copy its HEX code, or copy all as CSS variables. Processing runs entirely in your browser — no image data is ever sent to a server.
About this tool
This tool analyzes an uploaded image and extracts its dominant colors using a median-cut algorithm refined with k-means clustering. The colors are sorted by how much of the image they represent. You can choose between 3 and 10 colors. Processing runs entirely in your browser using the Canvas API — no image data is ever sent to a server.
How to use
- Upload or drag an image (JPEG, PNG, WebP, GIF, or any format your browser supports).
- Use the slider to choose how many colors to extract (3 to 10).
- Click any color swatch to copy its HEX code, or click "Copy all (CSS)" to copy all colors as CSS variables.
When to use this tool
- Identifying the color palette of a brand logo or product photo for design work.
- Pulling accent colors from a reference image to use in a UI, presentation, or illustration.
- Quickly grabbing HEX codes from a photo without opening a design application.
- Building a CSS theme based on the colors in a hero image or background.
Frequently asked questions
How many colors can I extract?
Between 3 and 10 dominant colors using the slider. Colors are sorted by dominance — the most prominent appears first.
Which image formats are supported?
Any format your browser can display: JPEG, PNG, WebP, GIF, BMP, AVIF, and HEIC.
Is my image sent to a server?
No. The image is analyzed entirely in your browser. Your image never leaves your device.
How do I copy a color?
Click any swatch to copy its HEX code. Click "Copy all (CSS)" to copy all colors as CSS custom properties.
Why are some colors slightly different from what I see?
The palette uses clustering, so subtle gradients are averaged into a representative color. The result captures the visual character of the image.
Does this work offline?
Yes. Once the page has loaded, all extraction runs locally with no internet connection required.
What is "Copy all (CSS)" for?
It copies all colors as a CSS :root block with custom properties ready to paste into a stylesheet.
Is this tool free?
Yes, completely free with no sign-up required and no usage limits.
The image is analyzed entirely in your browser — it is never sent to a server.