Palette Extractor
Drop a photo, logo or screenshot and get its dominant colors as a palette — with HEX codes, proportions and export to CSS or Tailwind.
- Any image
- 2–12 colors
- CSS export
- No upload
Drop an image here
or
JPG, PNG, WebP, GIF, AVIF, SVG or BMP
You can also paste an image with Ctrl + V
Your image is analyzed on your device and is never uploaded.
Your image
Click anywhere on the image to add that exact color to the palette.
Export
How to extract colors from an image
The palette appears as soon as the image opens.
- 1
Add an image
Drop it on the page, choose a file or paste it from the clipboard. JPG, PNG, WebP, GIF, AVIF and SVG work.
- 2
Tune the palette
Set the number of colors, the order, and whether a white or black background should be ignored. Click the image to add a specific color.
- 3
Copy or export
Click a code to copy it, or export the whole palette as CSS variables, Tailwind config, JSON or an image.
The colors people actually see
Clustered in a perceptual color space.
Perceptual clustering
Pixels are grouped in OKLab, where distances match human vision, so small but striking accents are not drowned out by large dull areas.
Proportions
Each color shows how much of the image it covers, and the stripes can be drawn to scale.
Add exact colors
Missing a detail color? Click it in the image and it joins the palette.
Background ignored
Leave out pure white or black — useful for logos and product photos on a plain background.
Three orders
Most dominant first, around the color wheel, or from light to dark.
Design-ready export
CSS custom properties, SCSS, Tailwind, JSON, CSV, GIMP palette, SVG or PNG.
Private by design
Everything runs in your browser. What you type or open is not sent to a server.
Free, no sign-up
No account, no limits, no watermark — on a phone, tablet or computer.
Getting a good palette out of a picture
A photo contains tens of thousands of slightly different colors. Extraction means grouping similar pixels and returning one representative per group. This tool first splits the color range into boxes (median cut) and then refines the groups with k-means clustering — in the OKLab color space, so that “similar” means similar to the eye rather than similar in RGB numbers.
The number of colors changes the character of the result. Three or four colors give the overall mood — good for a brand or a slide theme. Six to eight add the accents. Above ten you start to get near-duplicates. If an important small detail, such as a red flower in a green field, does not make it into the palette, add it yourself by clicking it in the image.
Extracted colors are a starting point, not a finished design. Photos rarely contain a pure white or a text-ready dark tone, so add neutrals, and check the contrast before using two extracted colors as text and background. For the same reason the most dominant color of a picture — often sky, wall or shadow — is usually a better background than accent.
How many colors to extract
| Colors | Result | Good for |
|---|---|---|
| 2–3 | The overall mood | Duotone effects, simple brand colors |
| 4–6 | Main colors plus an accent | Website and presentation themes |
| 7–9 | Fine nuances | Illustration, interior and fashion palettes |
| 10–12 | Almost every visible tone | Analysis, pixel art, reference sheets |
Tips
- Read the exact color of a single pixel with the Pixel Picker.
- Refine and extend the extracted colors in the Palette Generator.
- Test text and background pairs with the Contrast Checker.
- Shrink a very large photo first with the Image Compressor — the palette stays the same.
Frequently asked questions
Can’t find your answer? Contact us — we reply quickly.
Are my images uploaded?
No. The image is opened and analyzed by your browser on your own device. It is never sent to a server.
Which image formats are supported?
Everything your browser can display: JPG, PNG, WebP, GIF, AVIF, BMP and SVG. HEIC photos from an iPhone need to be converted to JPG first in most browsers.
How are the dominant colors found?
The image is sampled, similar pixels are clustered in the perceptual OKLab color space, and the average of each cluster becomes one palette color. The percentage is the share of pixels in that cluster.
Why is a color I can see missing from the palette?
Small areas can be absorbed by a larger, similar group. Increase the number of colors, or click that spot in the image to add its exact color.
Can I get the colors of a logo without the white background?
Yes. Switch on “Ignore white” (or “Ignore black”); transparent pixels are always ignored.
Are the results the same every time?
Yes. The method is deterministic: the same image and settings always give the same palette.
More free developer tools
Encode, format, test, convert and generate — small tools that run in your browser and keep your data on your device.