Theme & Font Inspector

Instantly extract the complete theme — colors, fonts, weights, sizes — from any website. One-click copy.

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.