How does it know what is a background vs text?

The analyzer makes educated guesses based on common UI patterns. Backgrounds are usually the most frequent colors. Text colors typically have high contrast against those backgrounds. Accents are often highly saturated but used sparingly.

Is this semantic detection perfectly accurate?

No, these are inferred values. While the algorithm is smart, it doesn't actually understand the UI components (like knowing something is a 'button'). It uses mathematical heuristics to guess the roles of colors.

Is my screenshot uploaded for analysis?

No! Just like all our image tools, the screenshot analysis happens entirely locally in your web browser. No data is sent to our servers.

Why doesn't it find my subtle gradients?

The analyzer currently focuses on solid, exact-match colors which are common in flat UI design. It's not optimized to group gradient pixels into a single conceptual token.

Tool

Screenshot Analyzer

Deconstruct UI screenshots into logical design tokens. Automatically detect backgrounds, text, and accents entirely in your browser.

Analyze Screenshot

Upload a UI screenshot to automatically detect background colors, text colors, and potential design tokens.

Browse Files

Deconstruct User Interfaces

The Screenshot Analyzer goes beyond simple color picking. It mathematically analyzes the pixels in a UI screenshot to infer the underlying design system. It looks at frequency, saturation, and contrast relationships to categorize colors into logical tokens like Background, Text, and Accent.

Smart Heuristics

By analyzing contrast ratios against dominant backgrounds, the tool can accurately guess which colors are used for text and which are used for accents.

Color Distribution

View a histogram of the most frequently used exact colors in the design to understand the visual hierarchy and weighting.

Screenshot Analyzer

Analyze Screenshot

Deconstruct User Interfaces

Smart Heuristics

Color Distribution

Frequently Asked Questions

Related Tools