Theme & Font Inspector

About

Ever wondered what exact colors and fonts a beautifully designed website uses? Theme & Font Inspector reveals it all in one click.

🎨 COLOR ANALYSIS

Full color palette extracted from the page, sorted by usage frequency
Separate breakdown: background colors, text colors, and border colors
Visual swatches with usage count — click any swatch to copy
WCAG contrast ratio checker — see which text/background pairs pass AA/AAA
🔤 TYPOGRAPHY BREAKDOWN

All font families with live preview (Light, Regular, Semi Bold, Bold)
Complete type scale — every font size in use, visually rendered
Font weight inventory (Thin → Black) with usage counts
Line heights and letter spacings tracked
✨ EXTRAS (Gradients, Shadows & More)

Gradient detection with live preview swatches
Box shadow extraction with visual demos
Border radius catalog
Full CSS custom properties / design tokens from :root
📦 EXPORT IN 4 FORMATS

JSON — structured theme object, ready for any JS framework
CSS Variables — paste-ready :root {} block
SCSS — $variable declarations for Sass projects
Tailwind — drop-in tailwind.config.js theme extend block
Syntax-highlighted preview + one-click Copy button
📊 QUICK STATS

At-a-glance dashboard: total colors, fonts, sizes, and CSS variables
Refresh button to re-analyze after page changes
⚡ LIGHTWEIGHT & PRIVATE

Runs only when you click — no background processes
Zero data collection — everything stays in your browser
Minimal permissions (activeTab + scripting only)
No analytics, no tracking, no external requests
Perfect for designers, developers, and anyone who wants to understand or replicate a website's visual design system.