Input

Drop image

PNG, JPG or WEBP up to 10 MB.

Click to browse

Colors 8

No image selected

Canvas processing. No upload.

Palette

Palette heatmap

Waiting for image

0 Colors

-- Top color

-- Sample

Palette will appear here.

Tool guide

Image Color Palette Extractor Online — Free

Feed it any raster image the browser can open — JPG, PNG, WebP or a pasted screenshot — and get back swatches with ready HEX and RGB codes, ordered by how much of the picture each shade covers. Everything is decoded on a canvas inside your own tab, so the file never leaves the device. It solves the everyday case where a client sends one flattened JPEG of a logo and no brand guide, and you still have to name the exact colors for CSS variables, or where a mood board has to become a working palette. See also: fine-tune a sampled shade by hand, test palette pairs for readability, write the sampled RGB values as HEX.

How to use it

Press «Change image» and pick a file — the input accepts any image type, screenshots and photos included.
Drag the «Colors» slider: it starts at 8, goes down to 3 for a tight brand palette and up to 777 for a detailed gradient breakdown.
Hit «Analyze» and wait for the swatches to appear in the «Palette» section.
Read the order: the first shades cover the largest area of the image, the tail is compression noise and midtones.
Copy the HEX or RGB value you need into CSS variables, Figma or a brand document.
If the swatches look nearly identical, lower the count to 4–6 and analyze again.

FAQ

How do I get the HEX code of a color in a picture without Photoshop?

Load the file with «Change image» and press «Analyze». The tool paints the image onto a hidden canvas, reads the pixels and clusters them. Every swatch in the «Palette» block carries a HEX and an RGB value you can paste straight into CSS. No desktop editor and no browser extension involved.

What number should the «Colors» slider be set to?

Three to six is right for a brand palette: you end up with a background, a primary and an accent. The default of 8 suits UI references, where you also want border and shadow midtones. The upper range towards 777 only pays off on photographs with smooth gradients, otherwise you get a long list of nearly identical shades.

Is my image uploaded anywhere during analysis?

No. The file is read through FileReader and decoded on a canvas in the tab itself, and no network request carries the picture. That makes it safe for NDA mockups and internal screenshots. The trade-off is that very large photos are limited by your own device's memory and CPU.

Is there a maximum file size?

Nothing is hard-coded; the tab's memory is the real limit. Phone photos of 12–24 megapixels are fine, while 100-megapixel panoramas or scans can freeze the page for a few seconds on a modest laptop. If analysis drags on, resize the image to around 1500–2000 pixels wide first.

Why don't the swatches match the original exactly?

Two reasons. JPEG is lossy, so pixels that look like one color are numerically different. And the algorithm merges nearby shades into a cluster and reports an averaged value. When you need one exact pixel rather than an area average, use an eyedropper tool instead.

Does it handle transparent PNG files?

Yes, PNGs with an alpha channel open fine, but transparent regions are still pixels and may enter the sample as black or white. If an unexpected dark swatch shows up, crop the transparent margins or place the logo on the background you actually intend to use.

Can I extract a palette on a phone?

Yes — the page runs in mobile Safari and Chrome, and «Change image» opens the camera-or-gallery chooser. Keep in mind that a camera shot is much heavier than a mockup, so a 777-color analysis takes noticeably longer on a phone than on a desktop.

Examples

Client logo with no brand guide

Before: logo-final-v3.jpg, 1200×1200, raster only

After: #FA551E, #101014, #F5F2EC — three swatches with the slider at 3

Reference shot for a landing page

Before: Screenshot of a UI with a gradient background

After: 8 shades from #0B1E3A to #6FC3DF: background, cards, button accent

Rate this tool

Your rating and feedback help decide what to improve next.

— No votes yet