Free image color extractor
Color Palette Extractor
Color Palette Extractor pulls the exact colors out of an image and returns them as a color palette with HEX, RGB, HSL, OKLCH and CMYK codes. Every color shows its share of the image, and the image never leaves your browser.
- Free, no signup
- Images never leave your device
- Exact pixel colors
Drop images here
or paste with Ctrl+V. JPG, PNG, WebP, GIF, AVIF, SVG. Up to 20 images.
How does the color palette extractor work?
The color palette extractor reads the pixels of your image in your browser, groups similar colors, and returns the colors that describe the image best.
Add an image
Drop, paste or choose up to 20 images in JPG, PNG, WebP, GIF, AVIF or SVG format. A pasted screenshot works too.
Colors are grouped
The extractor clusters the pixels in OKLab, a color space built to match human color perception, and merges colors that look the same.
Shape the palette
Set 2 to 20 colors, choose a mode, and click the image to add any exact pixel. Drag a pin to re-pick its color.
Copy or export
Copy HEX codes, check contrast, or export the palette to CSS, Tailwind, Adobe, Procreate, GIMP and more.
What does the extractor return for each color?
Each extracted color returns seven color codes, a nearest color name, its share of the image, its contrast against white and black, and a 50 to 950 tint and shade scale.
| Code | Example | Used for |
|---|---|---|
| HEX | #2A9D8F | Web design, CSS and most design apps |
| RGB | rgb(42 157 143) | Screens, CSS and image editors |
| HSL | hsl(173 58% 39%) | Adjusting lightness and saturation in CSS |
| HSB | hsb(173, 73%, 62%) | Color pickers in Photoshop, Figma and Procreate |
| OKLCH | oklch(63% 0.101 183) | Perceptual color editing in modern CSS |
| CIE Lab | lab(58.4 -35.2 -2.3) | Color difference measurement and print workflows |
| CMYK | 73, 0, 9, 38 | Print estimates without a printer profile |
Which extraction mode fits your image?
The extraction mode decides which colors enter the palette when an image holds more colors than the palette size.
| Mode | What it selects | Best for |
|---|---|---|
| Balanced (default) | Large color areas plus distinct accents, scored by pixel share and by distance from the colors already picked | Photos, illustrations and brand imagery |
| Dominant | The colors that cover the most pixels | Measuring which colors fill an image |
| Vibrant | The Balanced score weighted by chroma, so saturated accents rank higher | Moodboards, product photos and artwork |
The Exact pixel setting returns a color that exists in the image. The Average setting returns the mean color of each group. The Merge similar slider sets how close two colors must be to count as one, measured as ΔE_OK distance (0.03 by default).
How accurate are the extracted colors?
Extracted colors are exact pixel values: the extractor samples real pixels without blending them, so every HEX code in an Exact pixel palette appears in your image.
- Perceptual grouping. Colors are compared in OKLab, where equal distances look like equal differences. RGB distance overstates some color differences and understates others.
- Stable results. The clustering uses a fixed seed, so the same image and settings always return the same palette.
- True proportions. Every pixel is assigned to its nearest palette color, so the shares add up to 100%.
- Transparency respected. Pixels under 50% opacity do not count, so a transparent PNG shows only its visible colors.
The guide How color extraction works compares this method with median cut, octree quantization and plain k-means.
Which sources can you extract colors from?
Color Palette Extractor reads four kinds of source, each with its own tool and settings.
Images
Photos, illustrations, screenshots and artwork. Several images produce one merged palette in which every image counts equally.
Logos
The Logo Color Extractor returns exact logo colors, removes the background and ignores the blended pixels along edges.
Websites
The Website Color Extractor reads a site's CSS and returns its brand, text, background and border colors from a URL.
Single pixels
The Image Color Picker returns the exact HEX code of any pixel you click, with a magnifier for precision.
Which export formats can you download?
The extractor exports a palette in 11 formats, all generated in your browser.
| Format | File | Opens in |
|---|---|---|
| CSS variables | .css | Any website stylesheet |
| Tailwind v4 and v3 | @theme block, tailwind.config.js | Tailwind CSS projects |
| SCSS | .scss | Sass projects |
| Design tokens | .tokens.json | W3C Design Tokens tools and Figma plugins |
| Adobe Swatch Exchange | .ase | Photoshop, Illustrator and InDesign |
| Procreate | .swatches | Procreate on iPad |
| GIMP palette | .gpl | GIMP, Inkscape and Krita |
| SVG | .svg | Figma, Sketch and Illustrator |
| PNG palette card | .png | Presentations, moodboards and social posts |
| HEX list | .txt | Any app |
The code formats can include a 50 to 950 tint and shade scale for every color, built in OKLCH around the extracted value.
Who uses a color palette extractor?
Designers
Pull a palette from a moodboard photo or a reference image and send it to Figma, Adobe apps or Procreate as swatches.
Developers
Turn a design screenshot into CSS variables or a Tailwind theme with a full tint and shade scale.
Business owners
Find the exact HEX codes of a logo or product photo to keep a website, online store and social posts consistent.
Artists and illustrators
Study the color proportions of a painting or photo before starting a new piece.
Print buyers
Collect exact screen values and CMYK estimates to brief a printer before a proof.
Accessibility reviewers
Check every color pair of a palette against WCAG 2 thresholds. The guide WCAG contrast in a palette explains the rules.
Are your images uploaded?
No. Images are decoded and analyzed inside your browser, and the files never reach a server. The site stores no images and no palettes.
Two features contact the server: loading an image from a web address and reading a website's code. Both fetch the public file for you and keep no copy. The privacy policy lists every piece of data the site handles.
Color palette extractor FAQ
Is the color palette extractor free?
Yes. Every feature and every export format is free, with no account, watermark or usage limit.
How many colors can a palette have?
A palette holds 2 to 20 colors, set with the Colors slider. The default palette has 6 colors.
Why does another tool give me different colors?
Tools differ in color space, clustering algorithm, sampling and swatch value. This extractor groups colors in OKLab and returns real pixel values by default, while many tools average colors in RGB.
Can I extract one palette from several images?
Yes. Add up to 20 images and the extractor builds one merged palette in which each image carries equal weight, plus a small palette for each image.
Does the extractor work on phones?
Yes. The extractor runs in mobile browsers, accepts photos from the camera roll, and picks colors with a tap.
Which image formats are supported?
JPG, PNG, WebP, GIF, AVIF, BMP and SVG files work in all current browsers. HEIC photos open only in Safari, so other browsers need a JPG or PNG copy.