How to Upload an Image and Extract Its Color Palette with HEX and Pantone Codes

Upload a JPEG, PNG, GIF, or WEBP file to Clariss (clariss.xyz), pick a scan depth, and the tool returns a palette of 9–36 dominant colors with exact HEX codes and closest Pantone (PMS) references. The extraction runs entirely in your browser, so the image is never sent to a server. This works well when you need usable color values from a photo, screenshot, or artwork for a design or branding project — and you have the rights to use the source image.

Supported formats and how to load your image

The tool accepts four file types:

• JPEG — photos and most web images
• PNG — screenshots, graphics with transparency
• GIF — including animated files (the palette is drawn from the image data)
• WEBP — modern web format

You can load a file two ways: click the select-image area to open your file picker, or drag and drop the file onto the page. Either path feeds the same local processing step.

Choosing a scan depth

Clariss offers four levels, each returning a different number of dominant colors:

The tool's own guidance is that Standard or Deep Scan gives the most useful palette for most photos and illustrations without too much repetition. Start at Standard; move up only if you're seeing important colors missing, and move down if the extra swatches look like near-duplicates of each other.

What you get back

After the scan, you receive a set of color swatches. Each swatch includes:

• The HEX code (a six-character value like #FF5733) for digital and screen work
• The closest Pantone (PMS) reference for print, textiles, and physical production

Both values are ready to copy or download, so you can drop them straight into a design file, style guide, or brand document.

How the extraction works

The tool scans the image's pixels and groups similar colors using a k-means clustering algorithm, then surfaces the most dominant clusters as your palette. This is why scan depth matters: more clusters means finer separation of similar shades, which is useful for busy images but can produce redundant swatches on simple ones.

Because everything runs in client-side JavaScript, your image stays on your machine. Closing or refreshing the page leaves no trace of it.

Using the colors in real projects

• HEX for screens: web design, UI, digital branding, social assets.
• Pantone for physical output: print, packaging, textiles, manufacturing, where a standardized reference keeps color consistent across materials and processes.

Using both together lets you carry one palette across digital and print without guessing at conversions. The generated HEX codes and Pantone references are standard color values with no usage restrictions — you can apply them freely in commercial work. The one condition: make sure you have the rights to the source image you upload.

Common snags

• Palette looks muddy or repetitive — drop to a lower scan depth, or crop the image to the region whose colors you actually care about before uploading.
• A key color is missing — raise the scan depth so the algorithm splits that region into its own cluster.
• Pantone match feels approximate — that's expected; the tool returns the closest PMS reference, not a certified match. Verify against a physical Pantone guide before committing to a print run.
• Format rejected — confirm the file is JPEG, PNG, GIF, or WEBP.