clariss.xyz

Icons8 is a library of icons, illustrations, and 3D assets drawn by its own designers so that styles stay consistent across formats, available for download in SVG and PNG, with an MCP server for AI agents and coding tools. It fits designers who need a matching set fast — a UI, a deck, or a landing page — and who want vector files they can still edit. It is less suited to work that requires a fully custom visual language, since ready-made assets carry the house style of whichever set you pick.

Start by matching the asset style to the project

The fastest way to waste time is to pick assets one at a time by look. Decide the style first, then filter everything to that style.

The consistency claim in Icons8's own description — icons and illustrations "drawn by our own designers so every style matches" — is the practical reason to filter by one style across all three asset types rather than mixing a 3D illustration with an outline icon set.

Pick the file format by what happens next

• SVG — editable vector. Use it when the asset will be recolored, resized without loss, animated, or handed to a developer. This is the default for UI work.
• PNG — raster. Use it for quick mockups, slides, and anywhere you cannot paste or render vector files.

If you are unsure, download SVG. You can always export a PNG from it later; you cannot cleanly go the other way.

Keep a set consistent

1. Choose one style (for example, a single outline weight) before searching.
2. Filter icons, illustrations, and 3D to that same style so a page does not mix visual languages.
3. Reuse the same icon for the same meaning across screens — a second "settings" icon in a different style is a common slip.
4. Check the set covers your edge cases (empty states, errors, onboarding) before committing, not after you have built ten screens.

Check licensing and pricing before client work

Icons8 lists a pricing page, which is the place to confirm what a given use requires. Before shipping assets in client or commercial work, verify the license terms for the specific asset and plan rather than assuming downloads are unrestricted. Pricing and plan details are not covered here — check the site directly, since terms and prices change.

Getting assets into your workflow

• Figma and design tools — SVG imports as editable vector layers, so you can recolor and resize inside the file.
• Web — SVG inline or as a file keeps icons sharp at any size and lets CSS control color.
• Presentations — PNG avoids font and vector rendering issues in slide software.

Icons8 also offers an MCP server for AI agents and coding tools, which is relevant if you are wiring asset lookup into an automated or agent-driven workflow rather than browsing manually.

Customize or download ready-made?

Download ready-made when the asset is generic — a search icon, a folder, a chart — and speed matters more than uniqueness. Customize (recolor, adjust stroke, simplify) when the asset sits in a branded context or appears at large size where its original style would clash. Build fully custom only when the visual language itself is the product, since that is where a shared library stops helping.

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.

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.

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

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.

You can pull a usable palette out of almost any image by uploading it to a browser-based color extractor: Clariss accepts JPEG, PNG, GIF, and WEBP files, scans the pixels with a k-means clustering algorithm, and returns swatches with exact HEX codes plus the closest Pantone (PMS) references. The whole scan runs in your browser, so the image itself is never sent to or stored on a server. This works well when you need screen-ready HEX values for web or UI work and print-oriented Pantone references for physical materials — but you should pick a scan depth that matches how much color variety the image actually contains, or you'll end up with near-duplicate swatches.

What you need before you start

• An image file in JPEG, PNG, GIF, or WEBP format.
• Rights to use that image — the extracted color values are free to use commercially, but the source image still needs to be yours or properly licensed.
• A rough sense of whether the image is color-rich (a photo, a detailed illustration) or color-poor (a logo, a flat graphic). This decides your scan depth.

Step-by-step: extract the palette

1. Open the tool and load your image. Click the image selector, or drag and drop the file onto the page. Accepted formats are jpeg, png, gif, and webp.

2. Choose a scan depth. The tool offers four levels, and the number of colors returned scales with each one:

   Scan level	Colors returned	Best for
   Quick Scan	9	Simple graphics, logos, low-variety images
   Standard Scan	18	Most photos and illustrations
   Deep Scan	27	Detailed images with many distinct hues
   Extended Scan	36	Highly varied images where you want maximum coverage

3. Run the scan. The tool reads the image's pixels and clusters them into dominant colors. Because the processing happens in JavaScript in your browser, there's no upload wait and no server round-trip.

4. Read the results. You get a set of color swatches, each showing its exact HEX code and the nearest Pantone (PMS) reference. These are ready to copy or download.

5. Copy or download the swatches into your design file, brand document, or print spec.

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 — so start there unless your image is unusually simple or unusually complex.

HEX vs Pantone: which value do you actually use?

The two codes serve different production contexts, and the tool gives you both so you don't have to convert manually.

• HEX is a six-character value like #FF5733. Use it for digital design, web development, and anything screen-based.
• Pantone (PMS) is a standardized reference number used in physical print, textiles, and manufacturing, where it keeps color consistent across different materials and production processes.

If your project is a website or app, the HEX codes are what you'll paste into CSS or a design tool. If you're specifying a printed brochure, packaging, or fabric, the Pantone reference is the one your printer or manufacturer will recognize.

Fixing common extraction problems

• Too many near-identical swatches. Drop to a lower scan depth. If Deep or Extended returns several shades that look the same, Quick or Standard will give you a cleaner, more usable set.
• Colors look off from the original. Check the source file's format and quality first — a heavily compressed JPEG or a low-resolution image can shift the extracted values. Re-exporting a cleaner version of the image usually resolves it.
• You need a specific brand color matched. Extract the palette, then compare the returned HEX or Pantone value against your brand standard rather than assuming an exact match; clustering returns the dominant colors, not a guarantee of a specific target value.

What happens to your image

All extraction happens directly in your browser using JavaScript. Your image is never sent to or stored on any server, and once you close or refresh the page, no trace of it remains. That makes the tool practical for client work or any image you'd rather not upload elsewhere.