Chromata

Chromata 🎨✨
Extract color palettes and typography from any website, instantly convert to Tailwind CSS format.

🚀 Overview
Chromata is a Chrome extension that extracts colors and fonts from websites and transforms them into ready-to-use design tokens. Perfect for developers and designers who want to capture any website's visual style.

✨ Key Features

🎨 Color Extraction

Smart Analysis: Identifies prominent colors using area-based algorithm
Auto-categorization: Primary/secondary backgrounds, text colors, accents
Multiple Formats: HEX, RGB, HSL, OKLCH with one-click switching
Color Names: Human-readable names via TheColorAPI

🎯 Tailwind CSS Export

Tailwind v3: JavaScript objects for tailwind.config.js
Tailwind v4: CSS variables for the new format
Full Scales: Auto-generates 50-950 color scales
One-Click Copy: Export entire palettes instantly

🔤 Typography Analysis

Complete font stacks with fallbacks
Usage statistics and CSS-ready output
Font properties (size, weight, line-height)

🖼️ Image Assets

Asset Scanner: Automatically detects all images from any website
Bulk Download: Download multiple images with one click
Format Support: JPG, PNG, SVG, WebP, and more

💡 User Interface

Floating, draggable widget
Tab navigation (Colors/Fonts)
Progress tracking for large sites
Format selector and palette generator

📋 How to Use

Click extension icon on any website
Wait for analysis to complete
Browse colors organized by usage
Generate palettes from any color
Select export format (Tailwind v3/v4)
Copy palette or switch to Fonts tab

🎯 Perfect For

UI/UX designers creating style guides
Frontend developers implementing designs
Design system engineers

🔒 Privacy

Only analyzes current tab when clicked
All processing happens locally
No data collection

💬 Support
Love Chromata? Rate us on the Chrome Web Store!