HelperCrateColor Palette Extractor
Extract a designer-grade palette with names, contrast checks and exports.
Your files never leave your device. Everything runs in your browser.
What Color Palette Extractor does
Color Palette Extractor pulls the dominant colours out of a photo or design and turns them into a ready-to-use palette, with colour names, HEX, RGB and HSL values, and contrast checks against white and black. It is useful for building a brand palette from a mood board, matching text colours to an image, or checking whether a palette is accessible.
The extraction runs in a worker and lets you choose between 3 and 12 colours, sorted by dominance, hue or lightness. Hovering or focusing a swatch highlights the pixels it came from in the image, so you can see exactly where each colour lives.
Every colour card shows its share of the image and its WCAG contrast grade on white and black, and the palette can be exported as CSS variables, JSON, a Tailwind config, SCSS, a PNG sheet or Adobe .ASE swatches.
How to use Color Palette Extractor
- Drop the image onto the page or click the dropzone to browse.
- Set how many colours you want with the Colours slider (3 to 12) and choose a sort order: Dominance, Hue or Lightness.
- Hover or tab through the swatches to see which parts of the image each colour comes from.
- Copy individual values (HEX, RGB or HSL) from a card, or read the contrast ratio and WCAG badge for white and black text.
- Pick an export format — CSS variables, JSON, Tailwind config or SCSS — and use Copy palette or Download code. You can also export a PNG palette sheet or .ASE swatches.
- Use Start over to load a different image.
Features
- Extracts 3–12 dominant colours with a choice of sorting by dominance, hue or lightness.
- Nearest colour names alongside HEX, RGB and HSL values with one-click copying.
- Coverage bars showing what share of the image each colour represents.
- WCAG contrast checks against white and black with AA/AAA/Fail badges.
- Pixel highlighting that shows where a selected colour appears in the image.
- Exports for developers and designers: CSS variables, JSON, Tailwind config, SCSS, PNG palette and Adobe .ASE.
Tips and common mistakes
- Set the colour count low (4–6) for a usable brand palette, and raise it only when hunting for an accent colour.
- Check the contrast badges before using a palette for buttons and text — attractive colours are not always readable.
- Use the pixel highlight to confirm whether a colour is a true part of the subject or just a stray reflection or shadow.
Frequently asked questions
How are the colours chosen?
The image is analysed in a worker and reduced to the requested number of representative colours. Large, uniform areas usually dominate the result, while small accents may not appear unless you raise the colour count.
Are the colour names exact?
Names are the nearest match from a standard list, so they are descriptive rather than authoritative. Always use the HEX or RGB value when exact colour matters.
What do the contrast badges mean?
For each colour the tool calculates the contrast ratio against white and black text and grades it by the WCAG thresholds: AA for normal text (4.5:1) and AAA (7:1). Use this to pick readable text colours from the palette.
Can I open the .ASE swatches in design software?
Yes — .ASE files import into Adobe Photoshop, Illustrator and InDesign, as well as several other design apps. The PNG palette is for quick sharing, and the code exports are aimed at web projects.
Why did my very large image lose some colour detail?
Very large images are downscaled before extraction so the browser stays responsive. Tiny accent colours may be smoothed away; crop to the area of interest with the Crop Image tool and extract again for more precision.
Related image tools: Image Compressor, Image Converter, Image Resizer.
The image is analysed entirely in your browser with a local worker. Nothing is uploaded, and exported files are created on your device.