Practical guide

How to use Color Spectrum

Color Spectrum analyzes an image to surface dominant colors, related families, and individual pixel values. Designers and developers can use the result to build palettes, inspect references, and export reusable color data.

Step by step

Choose an image from the device.
Inspect extracted colors, families, and pixels in the interactive view.
Copy or export the palette in the format needed by the next design or development task.

Example

InputA landscape image with blue sky and green vegetation

ResultA ranked palette with HEX, RGB, and related color-family information

How it works

The browser samples decoded image pixels, groups nearby colors, and ranks representative values. Results depend on sampling, image resolution, transparency, and the color space decoded by the browser.

Important limitations

Extracted colors are representative rather than a complete inventory of every pixel value.
Browser color management and image profiles can influence displayed values.

Brand exploration

Extract dominant colors from an approved image to create a starting palette for a presentation, campaign, or interface concept.

Asset QA

Inspect individual pixels and color proportions when an exported graphic looks different from the expected background or accent colors.

Creative handoff

Export a compact palette reference so designers and developers can discuss exact hexadecimal values instead of subjective color names.

Review the result

What to check before using the output

Dominant-color extraction is a summary, not a color-management system. Gradients, transparency, color profiles, compression artifacts, and very small accents can change the palette or be underrepresented.

Preview the full image first.
Sample small accents manually.
Check colors on the target display space.
Run contrast tests before using text colors.

Choose the right method

When another tool is better

Use a calibrated design or photo application when print production, ICC profiles, wide-gamut color, spot colors, or pixel-perfect professional sampling is required.

Privacy and browser behavior

The selected image is decoded locally. The resulting palette usually reveals little, but screenshots and exported previews can still disclose the source image or project context.

Frequently asked questions

Is my source image uploaded?

The analyzer processes the selected image in the browser and does not send it to a 77 Toolkit image service.

Why is a small accent color missing?

Dominant-color ranking favors colors that occupy more sampled pixels; inspect the image directly for small accents.