🎨 StyleSnatcher

Extract the style DNA of any website - A simple, beautiful, client-side web design detective tool.

✨ Features

• 🎨 Color Palette Extraction - Automatically identifies unique, dominant colors
• 📝 Typography Detection - Discovers primary and secondary font families
• 👁️ Live Preview - Visual swatches and font samples
• 📋 One-Click Copy - Copy individual colors or complete CSS variables
• 🚀 No Backend Required - Runs entirely in your browser
• 🔄 Multiple Proxy Fallbacks - Reliable fetching with 3 CORS proxy services
• 🎯 Smart Deduplication - Removes similar colors for unique palettes
• 📱 Fully Responsive - Perfect on phones, tablets, and desktops

🛠️ Technical Stack

• HTML5 - Semantic structure
• CSS3 - Modern, clean aesthetic with CSS Grid and Flexbox
• Vanilla JavaScript (ES6+) - No frameworks, pure client-side magic
• Multiple CORS Proxies - Fallback system with 3 proxy services:
  • allorigins.win
  • corsproxy.io
  • codetabs.com

🎯 How It Works

1. Fetch - Uses multiple CORS proxies with automatic fallback for reliability
2. Parse - Extracts CSS from <style> tags, inline styles, and CSS variables
3. Analyze - Uses regex patterns to find colors (hex, rgb, hsl) and fonts
4. Deduplicate - Removes similar colors (within 30 RGB difference) for unique palettes
5. Filter - Sorts by frequency and filters out common colors (white, black, etc.)
6. Display - Renders beautiful swatches and font samples
7. Copy - Generates CSS variables ready for your next project

🎨 Design Philosophy

• Minimalist - Clean, uncluttered interface
• Modern - Contemporary design with gradient accents
• Intuitive - Self-explanatory UI with clear visual feedback
• Accessible - Proper contrast, readable fonts, keyboard navigation
• Responsive - Works perfectly on all screen sizes

💡 Use Cases

• Rapid Prototyping - Quickly grab a site's color scheme for your project
• Design Inspiration - Study color palettes from your favorite websites
• Competitive Analysis - Understand competitors' design choices
• Learning - See how professional sites structure their styles
• Client Work - Match existing brand colors from client websites

⚠️ Limitations

• Uses multiple CORS proxies with automatic fallback (rate limits may still apply)
• Can only analyze publicly accessible websites
• Focuses primarily on inline styles and CSS variables for maximum reliability
• External stylesheets may not load due to CORS restrictions (but tool still works!)
• Some dynamic styles loaded via JavaScript may not be captured

📜 License

MIT License - Feel free to use, modify, and distribute!

💙 Built With Love

Created by Darkmintis ✨

---

Enjoy snatching styles! 🎨🔍