How to Extract Color Palettes and HEX Codes from an Image

Upload a JPEG, PNG, GIF, or WEBP file to Clariss, pick a scan depth, and the tool returns a palette of 9–36 dominant colors with HEX codes and closest Pantone (PMS) references. Everything runs in your browser, so the image is never sent to a server. This works for designers, developers, or anyone who needs the exact colors from a photo, screenshot, or illustration — as long as you have the rights to use the source image.

Step-by-step: from image to palette

1. Select or drop your image. Click the upload area or drag and drop a file. Accepted formats are JPEG, PNG, GIF, and WEBP.
2. Choose a scan depth. The tool offers four levels, each returning a different number of colors:

3. Run the scan. The tool reads the image's pixels and extracts the most dominant colors.
4. Read the results. You get a set of color swatches, each with its exact HEX code and closest Pantone reference, ready to copy or download.

Expected result: a palette you can paste directly into a design file, CSS, or print spec. If the palette looks repetitive or misses a color you know is in the image, move up a scan level — more colors means finer separation of similar shades.

How the extraction actually works

Clariss scans the image's pixels and groups them using a k-means clustering algorithm. Instead of listing every unique pixel color (which could be thousands), it finds the clusters that best represent the image's overall color composition and reports one representative color per cluster.

That's why scan depth matters: each level sets how many clusters the algorithm looks for. Quick Scan forces the pixels into 9 groups, so similar shades merge into one swatch. Extended Scan allows 36 groups, so near-identical colors can appear as separate entries. For most photos and illustrations, Standard or Deep Scan gives the most useful palette without too much repetition.

HEX vs. Pantone: which code do you need?

The tool gives you both, because they serve different purposes:

• HEX — a six-character value like #FF5733. Use it for digital work: web design, UI, screen-based graphics, CSS.
• Pantone (PMS) — a standardized reference number for physical production. Use it for print, textiles, and manufacturing, where you need the same color to come out consistently across materials and processes.

If your project spans both screen and print, extract the palette once and use the HEX for digital assets and the Pantone reference for the print spec.

Privacy and reuse

All color extraction happens in your browser using JavaScript. Your image is never uploaded to or stored on a server, and once you close or refresh the page, no trace of it remains. The HEX codes and Pantone references the tool generates are standard color values with no restrictions — you can use them freely in branding, print, web design, and commercial work. The one condition: make sure the source image itself is one you have the rights to use.

Common snags

• Palette looks muddy or merged. The image has more color variety than your scan level can separate. Try Deep or Extended Scan.
• Too many near-identical swatches. You're over-splitting. Drop to Standard or Quick Scan.
• A specific color is missing. Dominant-color extraction favors colors that cover the most pixels. A small but important accent color may not surface — sample it separately if you need it exactly.
• File won't load. Confirm it's JPEG, PNG, GIF, or WEBP. Other formats aren't listed as supported.