Runs 100% in your browser — your image is never uploaded
Color Palette Pro from Image
Drop in a photo, screenshot, logo or illustration and pull out its dominant colors — with HEX, RGB and HSL codes, dominance percentages, tints, shades, harmonies and one-click export to CSS, SCSS, Tailwind or JSON.
How to extract a color palette from an image
Three steps, about a minute.
1
Add your image
Drag a file onto the drop zone, click to browse, or paste from the clipboard with Ctrl+V. Large photos are scaled down for analysis, so even a 40 megapixel shot returns a palette in a moment.
2
Tune the palette
Slide between 3 and 20 colors and watch the palette recompute. Sort by dominance to find the backgrounds, or by hue to see the palette as a color wheel. Switch the display between HEX, RGB and HSL.
3
Copy or export
Click a swatch to copy it, open one for tints, shades, harmonies and contrast checks, or export the whole palette as CSS, SCSS, Tailwind, JSON, SVG or a PNG strip you can drop into a mood board.
What you get
Everything needed to take a color from a photograph into a design system.
Perceptual accuracy
Clustering happens in CIELAB, not raw RGB, so a palette of eight colors gives you eight colors a designer would actually distinguish.
Dominance data
Each color reports the share of the image it covers, so you know which one is the background, which is the subject and which is a small accent.
Pixel-exact eyedropper
Cluster averages are great for palettes but wrong for brand colors. Click any pixel to read its true value instead.
Contrast checks
Every color shows its WCAG contrast ratio against black and white, with AA and AAA verdicts for normal and large text.
Tints, shades, harmonies
Open a color for a nine-step tint and shade ramp plus complementary, analogous and triadic partners — a whole scale from one photo.
Nothing is uploaded
No server, no queue, no account. The file is read locally and analyzed in a Web Worker, so unreleased artwork stays on your machine.
Export formats
Pick the shape that matches your stack — each one is generated from the live palette.
Getting better palettes
A few things that change the result more than anything else.
Crop before you extract
A large sky or a white studio background will dominate the palette. Crop to the subject first and the accent colors move up the list where you can see them.
Start at 5–6 colors
Most brand and UI palettes need one dominant, one or two supporting and a couple of accents. Push to 12–20 only when you want illustration reference.
Sort by hue to spot gaps
Dominance order tells you what is common; hue order tells you what the image is missing, which is usually where your accent color should go.
Use the eyedropper for logos
A cluster average blends anti-aliased edges. For an exact brand hex, sample a pixel in the middle of a flat area instead.
Check contrast early
A beautiful mid-tone often fails at 4.5:1 for body text. Open the color, read the ratio, and take a darker shade from the ramp if it fails.
Transparent PNGs work
Fully and mostly transparent pixels are ignored, so a logo exported on a transparent background returns the logo colors and nothing else.
Frequently asked questions
How the extraction works, and what happens to your files.
Are my images uploaded to a server?
No. The image is read with the browser FileReader API, drawn to a canvas and analyzed by a Web Worker on your own device. Nothing is sent to a server, so client artwork, unreleased designs and personal photos stay private. The page keeps working offline once it has loaded.
How does the color extraction work?
Pixels are sampled from the image, converted from sRGB into CIELAB, and grouped with k-means++ clustering. CIELAB is used because equal numeric distances in that space look like equal visual differences, so the palette contains colors a person would actually call different. Each cluster returns the average color of its pixels and the share of the image it covers.
How many colors can I extract from one image?
Between 3 and 20. Five to eight works well for a brand or UI palette, while twelve or more is useful for illustration reference and for finding subtle accents. If an image has fewer distinct colors than you ask for, the tool returns only the colors that genuinely exist rather than padding the list with duplicates.
What image formats are supported?
Anything your browser can decode, which in practice means JPG, PNG, WebP, GIF, AVIF, BMP and SVG. Transparent pixels in PNG, WebP and SVG files are ignored, so a logo on a transparent background returns only the logo colors.
Why do the results change slightly if I re-run the extraction?
They do not. The clustering uses a pseudo-random generator seeded from the pixel data itself, so the same image at the same palette size always produces the same colors. Changing the number of colors does change the result, because the clusters are recomputed from scratch for the new count — the six-color palette is not simply the eight-color one with two removed.
Can I pick an exact color from one spot in the image?
Yes. Turn on the eyedropper and click or tap anywhere on the preview to read that exact pixel, then copy it. This is useful when you need the true value of a logo or a brand color rather than a cluster average, which blends in anti-aliased edge pixels.
What does the percentage under each color mean?
It is the share of the analyzed pixels that belong to that color cluster — roughly how much of the image the color covers. Use the highest percentages for backgrounds and large surfaces, and the low ones as accents. The percentages are computed on the sampled pixels, so on very large images they are a close estimate rather than an exact pixel count.
How do I use the palette in CSS or Tailwind?
Open the export panel and choose a format. CSS gives you custom properties on :root, SCSS gives a variable list and a $palette map, Tailwind gives a colors block ready for theme.extend in tailwind.config.js, and JSON gives hex, rgb, hsl and dominance for every color so you can feed it into your own tooling.
Is the palette accessible for text?
Open any color to see its WCAG contrast ratio against black and white, with the AA and AAA pass or fail for normal and large text. A ratio of at least 4.5:1 is needed for normal body text and 3:1 for large text at AA; AAA asks for 7:1 and 4.5:1. If a color fails, take a darker step from its shade ramp.
Does it work on phones and tablets?
Yes. The layout is fully responsive, the drop zone opens the camera roll on mobile, and you can tap a swatch to copy it or tap the image with the eyedropper on to sample a pixel. Extraction runs in a Web Worker, so the interface stays responsive while it works.
Is this color palette generator free?
Yes. It is completely free, needs no sign-up, and there is no limit on image size or on how many palettes you generate. It is part of the free developer and designer toolset at SeeB4Coding.
