Image Color Extractor

Drop in a photo, screenshot, logo, or illustration and get its dominant colors in a moment: a palette of 2 to 12 colors, a bar showing how much of the image each one covers, and every color in HEX, RGB, and HSL with one-click copy. The image never leaves your device — it is decoded and analysed by your browser, so you can use unreleased designs and private photos freely.

To get the exact color of a single detail — a button in a screenshot, a logo's accent, a sweater in a photo — hover over the image. A magnifying loupe shows the pixels under the cursor and the hex value of the one in the middle; click to add it to your picked colors. It works from the keyboard too: focus the image, move with the arrow keys (hold Shift to move 10 pixels), and press Enter to pick.

How the palette is found

Large images are scaled to 1,600 pixels on their longest side and up to 200,000 pixels are sampled evenly. Similar pixels are grouped into a 32,768-bucket color histogram, and the buckets are clustered with k-means in the CIELAB color space, where distance follows how different colors look to the eye rather than how different their RGB numbers are. The clustering starts from the most common color and repeatedly adds whichever color is most different from those chosen so far, weighted by how much of the image it covers — so the result is the same every time for the same image, and a small but distinctive accent isn't swamped by large areas of near-identical background. Transparent pixels are ignored.

Export formats

• HEX, RGB, or HSL lists — one color per line
• CSS variables — a :root block with --palette-1, --palette-2, …
• SCSS variables
• Tailwind v4 — an @theme block, so the colors become utilities like bg-palette-1
• Tailwind v3 — a tailwind.config.js theme.extend.colors entry
• JSON array — for scripts and design-token pipelines

Rename the tokens in Options (for example "brand" gives --brand-1), choose whether picked colors are included, and sort the palette by share, lightness, or hue.

Common uses

• Build a website or slide palette from a brand photo or mood-board image
• Grab exact colors from a screenshot of an app or a competitor's site
• Match the colors of a logo when only a PNG is available
• Turn a palette straight into CSS variables or a Tailwind theme

Example

8×6 PNG: an orange field with a blue quadrant

#ff6600 — 75%
#0033cc — 25%

When an image has fewer distinct colors than you ask for, the palette is shorter rather than padded with near-duplicates.

Limitations

• Photos are compressed, so the extracted colors are averages of slightly different pixels. Use the loupe for an exact single-pixel value.
• Colors are read as sRGB. Images tagged with a wide-gamut profile (Display P3 photos from recent phones) are converted by the browser, so the most saturated colors may come out slightly duller.
• HEIC photos only open in browsers that support them (Safari); convert them to JPEG first elsewhere.

How do I get a color palette from an image?

Drop the image onto the tool (or click to choose it, or paste it with Ctrl/⌘+V). The dominant colors appear immediately with their share of the image. Adjust the number of colors with the slider, then copy any color or export the whole palette as HEX, CSS variables, or a Tailwind config.

How do I find the exact hex code of a color in an image?

Hover over the image: the loupe magnifies the pixels under the cursor and shows the hex code of the center pixel. Click to add that color to your picked colors, where you can copy it as HEX, RGB, or HSL. From the keyboard, focus the image, move with the arrow keys, and press Enter.

Are my images uploaded anywhere?

No. The image is decoded and analysed entirely in your browser with the Canvas API. Nothing is sent to a server, so it's safe for unreleased designs, client work, and personal photos.

Why are the extracted colors slightly different from what I see in the image?

Each palette color is the average of a group of similar pixels, and photos contain gradients, shading, and compression noise, so the average rarely equals any single pixel. Wide-gamut photos are also converted to sRGB. For a precise value, pick a pixel with the loupe instead.

How many colors should I extract?

Five or six is a good start for a usable palette: a couple of dominant background colors plus accents. Raise the count to pull out smaller accents; lower it to get only the overall mood. Colors covering under 1% of the image are usually small details.

How do I use the palette in Tailwind CSS?

Choose Tailwind v4 to get an @theme block — paste it into your main CSS file and use classes like bg-palette-1 and text-palette-3. For Tailwind v3, choose the config format and merge the colors entry into theme.extend in tailwind.config.js. Rename the tokens in Options to something like brand first.

What algorithm does the color extractor use?

Weighted k-means clustering in the CIELAB color space over a color histogram of the sampled pixels, seeded deterministically from the most common color outward. It's the same family of method used by design tools' palette extraction, and it returns the same palette every time for the same image.