Chromata

Extract color palettes(can be exported in HEX, RGB, HSL or Tailwind CSS format), fonts, images directly from any website.

Snap CSS Style 🎨✨ The ultimate design system extractor for web developers and designers 🚀 Overview Snap CSS Style is a powerful Chrome extension that instantly extracts color palettes and typography from any website, transforming them into ready-to-use design tokens. With just one click, capture the visual DNA of any website and export it in multiple formats including Tailwind CSS v3 and v4, perfect for your design systems and development workflows. ✨ Key Features 🎨 Advanced Color Extraction - Smart Color Analysis: Uses area-based algorithm to identify the most prominent colors on a page - Intelligent Categorization: Automatically classifies colors into: - Primary & Secondary backgrounds - Text colors (primary, secondary, muted) - Accent colors based on saturation and usage - Multiple Color Formats: Switch between HEX, RGB, HSL, and OKLCH with one click - Color Names: Fetches human-readable color names via TheColorAPI integration - Grayscale Detection: Smart filtering to separate colored elements from grayscale 🎯 Tailwind CSS Export - Tailwind v3 Support: Export color palettes as JavaScript objects ready for tailwind.config.js // Copy directly to your tailwind.config.js colors: { primary: { 50: '#eff6ff', 100: '#dbeafe', // ... full scale } } - Tailwind v4 Support: Export as CSS variables for the new Tailwind CSS v4 /* Copy to your CSS file */ @theme { --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; /* ... full scale */ } - Smart Scale Generation: Automatically generates full color scales (50-950) from extracted colors - One-Click Export: Copy entire palettes formatted for immediate use 🔤 Typography Analysis - Complete Font Stack: Extracts font families with fallback chains - Usage Statistics: Shows frequency of font usage across the page - Font Properties: Captures size, weight, and line-height for each typography variant - Element Mapping: Identifies which HTML elements use specific font styles - CSS-Ready Output: Copy font declarations ready for your stylesheets 💡 Smart User Interface - Floating Widget: Draggable panel that stays on top of the page - Tab Navigation: Switch between Colors and Fonts views - Progress Tracking: Visual progress indicator for large websites - One-Click Copy: Copy any color or font value to clipboard instantly - Format Selector: Change color format on-the-fly without re-analyzing - Palette Generator: Create and export full color scales from base colors 🛠️ Developer-Friendly - Multiple Export Formats: - Tailwind CSS v3 (JavaScript object) - Tailwind CSS v4 (CSS variables) - Standard formats (HEX, RGB, HSL, OKLCH) - Design Tokens: Export structured data for design systems - No Page Reload: Works seamlessly without disrupting your browsing - Performance Optimized: Incremental processing for smooth experience on large websites 📋 How to Use 1. Click the extension icon on any website to open the floating widget 2. Wait for analysis to complete (progress indicator shows status) 3. Browse extracted colors organized by usage and purpose 4. Generate color palettes from any base color 5. Select export format (Tailwind v3, v4, or standard formats) 6. Click "Copy Palette" to export entire color systems 7. Switch to Fonts tab to see typography information 8. Drag the widget anywhere on screen for convenience 🎯 Perfect For - Tailwind CSS Developers building custom color schemes - Web Developers creating matching themes or cloning designs - UI/UX Designers creating mood boards and style guides - Design System Engineers documenting brand colors and typography - Frontend Developers implementing pixel-perfect designs - Anyone who wants to understand a website's visual language 🔒 Privacy & Permissions - ActiveTab: Only analyzes the current tab when you click the icon - Storage: Saves your format preferences and color name cache locally - No Data Collection: All processing happens locally in your browser 🎨 Export Format Examples Standard Formats - HEX: #3B82F6 - RGB: rgb(59, 130, 246) - HSL: hsl(217, 91%, 60%) - OKLCH: oklch(59.5% 0.21 254) Tailwind CSS v3 primary: { 50: '#eff6ff', 100: '#dbeafe', 500: '#3b82f6', 900: '#1e3a8a' } Tailwind CSS v4 @theme { --color-primary-50: #eff6ff; --color-primary-500: #3b82f6; } 🚀 Features in Detail - Automatic Scale Generation: Creates full 50-950 color scales from any base color - Smart Color Matching: Finds the closest Tailwind shade for extracted colors - Palette Building: Input any color to generate a complete design system - Export Flexibility: Choose between multiple formats based on your workflow - Live Preview: See color scales update in real-time as you switch formats 💬 Support & Feedback Love Snap CSS Style? Rate us on the Chrome Web Store! Found a bug or have a suggestion? We'd love to hear from you. --- Version: 1.0Size: Lightweight and fastRequirements: Chrome 88 or later Transform any website into a Tailwind-ready design system with Snap CSS Style!