UI ELEMENT SAMPLER

Extract any website's brand color system into a Figma-ready palette.

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