How to extract color palette & hex codes for email campaigns
- Step 1Upload your image — Drop your logo, photo, mood board, screenshot, or any image you want to sample colour values from.
- Step 2Choose palette size — Set the number of colours to extract (default: 8). The k-means algorithm clusters pixels into that many distinct groups.
- Step 3Copy and export — Click any colour swatch to copy the HEX code. Download the full palette as JSON for use in design tokens or CSS custom properties.
Frequently asked questions
How accurate is the colour extraction?+
K-means clustering is very accurate for identifying perceptually distinct colours. For logos and flat design, it identifies exact brand colours reliably. For photographs, it identifies the dominant colour regions. If a colour you can clearly see is missing, increase the cluster count.
Can I extract a brand's exact Pantone colours from an image?+
The extractor gives you the closest digital (RGB/HEX) representation of what is in the image file. For precise brand colours, images need to come from a colour-calibrated source. A JPEG screenshot may have shifted from the original Pantone spec due to compression and screen profile differences.
What format should I export the palette in?+
The JSON export contains HEX, RGB, and HSL for all extracted colours, suitable for design tokens, CSS custom properties, and Tailwind config files. For Figma, copy each HEX directly via the swatch click. For Sketch, use the JSON to define shared colour presets.
Privacy first
All image processing runs locally in your browser using WebAssembly and the Canvas API. No file is ever uploaded — only metadata counters are saved for signed-in dashboard stats.