UI ELEMENT SAMPLER

About

Color-Palette Sync extracts the complete color DNA of any website and organizes it into a meaningful hierarchy — Primary, Secondary, Accent, Surface, Neutral, and Text — so you can understand a brand's design system at a glance.

HOW IT WORKS
Right-click any webpage and select "Extract Brand DNA." A side panel slides open showing every color, intelligently sourced from CSS variables, computed styles, and element roles. No pixel-clicking required.

WHAT YOU GET
- Color hierarchy — not just a list of hex codes, but organized categories with role context
- Human-readable color names — "Midnight Blue" instead of #191970
- WCAG contrast badges — AA/AAA pass/fail shown inline for every text/surface pair
- Multi-format copy — right-click any swatch to copy as HEX, RGB, HSL, or CSS variable
- Typography snapshot — see which fonts and weights the site uses alongside colors
- UI harmony preview — a live mini-component rendered in the extracted palette
- Extraction history — the last 10 sites you scanned, restored in one click
- Pinned moodboard — star colors across multiple sites to build a personal palette
- Export formats — download as a CSS variables file, Tailwind config, or W3C Design Tokens JSON
- Copy to Figma — one-click structured JSON that maps directly to Figma Color Styles

ALL PROCESSING IS LOCAL
Color-Palette Sync reads only the styles of pages you explicitly right-click. No data ever leaves your browser. No accounts. No tracking. No ads.

BUILT FOR
Designers doing competitive research · Design system teams · Frontend developers · Brand strategists · Anyone who's ever opened DevTools just to find a hex code