What Are Color Codes? HEX vs Pantone and How to Get Them From an Image

Updated

A color code is a standardized value that identifies one exact color so it can be reproduced consistently across screens, print, and materials. The two you'll meet most often are HEX (digital, screen-based) and Pantone/PMS (physical, print-based). You can get both from any image by uploading it to a browser-based extractor like Clariss, which scans the pixels and returns swatches with their HEX codes and closest Pantone references — no server upload required.

HEX vs Pantone: what each code is for

HEX Pantone (PMS)
Format Six-character value, e.g. #FF5733 Standardized reference number
Used for Web, UI, digital design, screen work Print, textiles, manufacturing
Consistency across Screens and browsers Materials and production processes
Best when The color will be displayed digitally The color must match on a physical product

The practical rule: pick HEX when the output lives on a screen, pick Pantone when the output is printed or manufactured. Because the same visual color can shift between the two systems, tools that return both let you carry one palette into either context.

How to extract color codes from an image

  1. Choose your image. Accepted formats are JPEG, PNG, GIF, and WEBP.
  2. Upload it. Click to select the file or drag and drop it into the tool.
  3. Pick a scan depth (see the next section). The tool runs a k-means clustering algorithm over the image's pixels to find the most dominant colors.
  4. Read the results. You get a set of color swatches, each with its exact HEX code and closest Pantone (PMS) reference, ready to copy or download.

The whole process runs in your browser via JavaScript. The image is never sent to or stored on a server, and once you close or refresh the page no trace of it remains — useful if you're working with client material you'd rather not upload elsewhere.

Choosing a scan depth

The tool offers four levels, returning between 9 and 36 colors:

  • Quick Scan — 9 colors. Good for simple graphics, logos, or flat illustrations with few distinct colors.
  • Standard Scan — 18 colors. A solid default for most photos and illustrations.
  • Deep Scan — 27 colors. Use when an image has more color variety and Standard feels like it's missing tones.
  • Extended Scan — 36 colors. Maximum coverage for rich, gradient-heavy or highly detailed images.

For most photos and illustrations, Standard or Deep gives the most useful palette without too much repetition. Going higher than the image's actual color variety mostly adds near-duplicate swatches.

Using the codes in real work

Once you have the swatches, copy the HEX values straight into CSS, a design tool, or a brand file, and use the Pantone references when the same palette needs to go to print. The HEX codes and Pantone references the tool generates are standard color values with no restrictions on use, so they're fine for branding, print, web design, and commercial projects — the only thing to check is that you have the rights to the source image you uploaded.

If you need to move between systems, the same tool includes a HEX ⇄ Pantone converter, which is handy when a client hands you one format and expects the other back.