Palette from Image
Extract a dominant-color palette from any image using median-cut quantization — runs locally.
How to Use
- Drop or pick an image.
- Choose how many colors to extract.
- Click any swatch to copy its hex (Shift-click to open it in the Universal Color Converter).
- Use Copy CSS / JSON / hex list to export the whole palette at once.
- Fewer colors → dominant tones; more → finer detail.
- Drag the count to re-extract instantly.
- Click a swatch to copy; Shift-click to open in the Converter.
- Export the whole set as CSS, JSON, or a hex list below.
- Works on photos, art, screenshots & logos.
How it works
About the Palette from Image
Meet the Palette from Image: a free, no-fuss tool for colour and design work with nothing to install and no sign-up. Extract a dominant-color palette from any image using median-cut quantization — runs locally.
How it works
Type in what you have, and the answer shows up right away. Change anything and it updates by itself. Everything runs in your browser, so it is fast and nothing you type is sent away.
Want the deeper story? The Knowledge Base explains the ideas behind the tools in more detail.
Frequently Asked Questions
Does the image upload?
No — everything runs in your browser via canvas. The image is decoded locally and the palette is computed on your device; nothing is sent to a server.
What can I do with the extracted palette?
Click any swatch to copy its hex, or use the export buttons to copy the whole palette at once — as CSS custom properties (--color-1, --color-2…), a JSON array, or a plain hex list. Paste straight into your stylesheet, design file, or code.
How many colors should I extract?
Fewer colors (4–6) give you the dominant tones — good for a brand or theme palette. More colors (10–16) capture finer detail and gradients. Drag the count to re-extract instantly without re-uploading.
Why median cut?
Median-cut quantization partitions the color cube by repeatedly splitting the bucket with the widest color range along its longest axis. It is fast, runs entirely client-side, and reliably covers the full range of colors in the image rather than just the single most common one.
What images work best?
Anything — photos, artwork, screenshots, logos, posters. Images with clear distinct colors give the cleanest palettes; very noisy or low-contrast images produce muddier averages.
How do I use the Palette from Image?
Just type your numbers. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Do I need to install or sign up for anything?
Not at all — it runs in the browser with nothing to install and no account. After it loads once, it even works without an internet connection.
Is my information private?
Yes. Everything happens in your browser. Nothing you type is sent to a server or saved anywhere.
Common Use Cases
Brand & theme palettes
Pull a cohesive palette from a hero photo or reference and export it straight to CSS.
Moodboards & design
Capture the color story of a reference image for a moodboard or style guide.
Match a photo in a design
Extract real colors from a product shot so your UI or layout matches it exactly.
Last updated: