Free Image Color Palette Extractor

Worked example

Press "Try a sample" under the drop zone. The file chip shows sample-image.png, and the slider reads "Number of colors (6)". The sample is a teal, sky blue and violet gradient with a row of pastel circles and the word LibraTool, so most swatches are blues. On our test run the list began #189AE3 at 38.5%, #0D9CB6 at 28.7% and #4C69EB at 26.1%, followed by three small ones of 3.1%, 2.2% and 1.4%. The first swatch reads rgb(24, 154, 227) · hsl(202, 81%, 49%) · 38.5%, and its contrast line gives 6.8:1 for black text and 3.1:1 for white. Drag the slider to 2 and you get #238DD7 at 92.9% and #ADC0CA at 7.1%. Back at 6, pick CSS under "Export as" and press "Copy code" for a :root block starting --color-1: #189ae3. "Download PNG strip" saves sample-image_palette.png. Your hex codes may differ by a few steps, because browsers draw the sample's text slightly differently.

Which settings to use, and the limits

• Add the image in whichever way is quickest. Drop a file on the zone, press "Browse files", or paste a screenshot with Ctrl+V. On touch screens the drop and paste hints are hidden and "Browse files" is the way in. It takes JPEG, PNG, WebP and GIF, and an iPhone HEIC photo is converted first, with the message "Converting your iPhone photo…". "Or paste a file URL" fetches the picture from an address, which works only if that site allows it. Pasting again while an image is open replaces it. "Try a sample" loads a 1200 × 800 test picture.
• Set "Number of colors" with the slider. The slider runs from 2 to 16 and starts at 6, and its label shows the count, as in "Number of colors (6)". Low counts give the broad palette, and higher counts pick up small accents. You can see fewer swatches than the slider says, because colours that round to the same hex are merged and empty groups are dropped. The same picture and count always give the same palette, since the search starts from a fixed seed. Each swatch shows its share of the picture, such as 38.5%, and the biggest share comes first.
• Remember that swatches are averages. The picture is shrunk to at most 200 px on its longest side, pixels that are mostly see-through (alpha under 128) are ignored, and the rest are grouped by distance in RGB for up to 20 rounds. Each swatch is the average of one group. That means it may not appear exactly anywhere in your picture, and a thin accent can be blended into a neighbouring group. When you need an exact colour, click the picture instead of relying on a swatch.
• Click the picture to pick an exact pixel. Under the picture it says "Click the image to sample a pixel color". Each click reads one pixel from the full-size image, not from the shrunk copy, even when the preview is smaller than the original or has empty margins. Picks appear as chips with the hex code. Click a chip to copy it, or press the × to remove it. A colour you already picked is not added twice, only the latest 12 are kept, and clicks on the margin do nothing. Picks are separate from the swatches and are not part of the exports.
• Use the contrast line to choose a text colour. Under each swatch the contrast line gives the ratio for black text and for white text on that colour, to one decimal. The ratios use the WCAG relative-luminance formula. The site's Color Palette Generator grades 4.5:1 as AA, so treat that as a floor for body text. In the sample, #4C69EB scores 4.5:1 with black and 4.6:1 with white, so neither is comfortable, while #DAEFFB scores 17.7:1 with black.
• Choose the export that fits your code. Pick CSS, Tailwind, SCSS or JSON under "Export as", check the preview box, then press "Copy code". CSS gives :root variables named --color-1 and up, SCSS gives $color-1 and up, and Tailwind gives palette-1 and up, all in lower-case hex. JSON gives each colour as hex in capitals, rgb numbers and the share to one decimal. "Copy entire palette" copies the hex codes with commas. "Download PNG strip" saves a 1000 × 200 image with each colour as wide as its share, named like photo_palette.png.

Common problems and how to fix them

It says "Could not load the image. The file may be corrupted or in an unsupported format."

The browser accepted the file but could not decode it as a picture. The usual causes are a damaged or half-downloaded file, or an image your browser cannot draw. Open the original in another program and save or export it again as JPEG or PNG, then add the new file. The swatch list stays empty while this message shows.

It says "report.pdf is a PDF file, which this tool can't open." (with your own file name and type).

The drop zone reads a file's first bytes, so renaming a PDF to .jpg does not help. This tool opens JPEG, PNG, WebP, GIF and iPhone HEIC photos. AVIF, BMP, TIFF and SVG files are refused. An unidentifiable file gets "File type not supported" and its name. Convert the picture to JPEG or PNG first. A link to a tool that opens the file may follow the message. A 0-byte file, often a OneDrive or iCloud placeholder, gets its own message asking you to download it first.

It says "That site doesn't allow other websites to download its files. Download the file to your device first, then drop it here."

This appears after "Or paste a file URL" and "Fetch". Your browser asks the other site for the picture, and most sites do not let another website download their files. Save the picture to your device and drop it on the zone instead. A different message, "The link returned an error (HTTP 404)" with your own status number, means the address itself failed, so check it or save the file and drop it here.

The slider says "Number of colors (12)" but fewer swatches appear.

Colours that round to the same hex are merged, and empty groups are dropped, so flat images such as logos, screenshots and simple graphics give fewer swatches than the slider asks for. Nothing is wrong. Mostly see-through pixels are ignored too, and a picture that is entirely see-through gives no swatches at all. For a plainer palette, lower the slider. For subtler shades, raise it up to 16 on a photo.

It says "Could not copy to the clipboard."

The browser refused the copy, which can happen when the page is not secure, is shown in a frame, or the browser has blocked clipboard access. The message stays until you move the slider or load another picture. Click once on the page and try again. If it still fails, select the text in the preview box under "Export as" and copy it by hand, or use "Download PNG strip" to save the palette as an image instead.

How it compares

A design app's eyedropper reads exact pixels, and this tool does that on every click. What it adds is the dominant-colour list, found by grouping the whole picture's colours. It uses the whole picture, so a large background will dominate the list, and there is no way to select an area or remove the background first. It works from a copy of at most 200 px, names no colours, and does not sort by hue. The colours stay on your device, since the picture is read in the browser. To build a palette from a single colour instead of a photo, use the Color Palette Generator.