How to Extract a Color Palette and HEX Codes from an Image in Your Browser

You can pull a usable color palette out of almost any image without installing software: upload a JPEG, PNG, GIF, or WEBP file to a browser-based color analysis tool, choose a scan depth, and read off the HEX codes and closest Pantone references it returns. On Clariss (clariss.xyz), the whole scan runs in your browser — the image is never sent to or stored on a server, so nothing remains after you close or refresh the page. This works best when you already have a source image you have the rights to use and you need color values you can paste straight into a design file.

What you need before starting

• An image file in JPEG, PNG, GIF, or WEBP format.
• A modern browser with JavaScript enabled (the extraction is done client-side).
• A rough idea of how many colors you actually want — this determines which scan depth to pick.

Step-by-step: from image to HEX codes

1. Load the image

Open the tool and either click to select an image or drag and drop the file onto the page. The accepted formats are JPEG, PNG, GIF, and WEBP.

2. Choose a scan depth

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

For most photos and illustrations, Standard or Deep gives the most useful palette without excessive repetition.

3. Let the tool scan the pixels

The extractor scans the image's pixels and pulls the most dominant colors using a k-means clustering algorithm. The result is a set of color swatches.

4. Read and copy the values

Each swatch comes with its exact HEX code and the closest Pantone (PMS) reference. You can copy the values directly or download the palette.

HEX vs. Pantone: which value to use where

• HEX (e.g. #FF5733) is a six-character value for digital work — web design, UI, screen-based projects.
• Pantone (PMS) is a standardized reference number for physical print, textiles, and manufacturing, used to keep color consistent across materials and production processes.

The tool provides both so the same palette can move between screen and print. The generated HEX codes and Pantone references are standard color values with no restrictions on use — you can apply them in branding, print, and web design. The one condition: make sure the source image is one you have the rights to use.

Common snags and how to fix them

• Too many near-identical swatches. Lower the scan depth (try Standard instead of Extended) or crop the image to the region whose colors you actually care about.
• A key color seems missing. Raise the scan depth so the clustering has more slots to work with, or replace the source image with one where that color covers more pixels.
• Colors look off from what you see. Compression, gradients, and shadows can shift dominant colors; a flatter source image usually yields a cleaner palette.

FAQ

Is my image uploaded anywhere? No. All extraction happens in your browser via JavaScript, and the image is not sent to or stored on a server. Closing or refreshing the page leaves no trace.

How many colors can I get? Between 9 and 36, depending on the scan level: Quick 9, Standard 18, Deep 27, Extended 36.

Can I use the results commercially? Yes — the HEX codes and Pantone references are unrestricted standard color values. Just confirm you have the rights to the source image.