Description from extension meta
Extract color palettes(can be exported in HEX, RGB, HSL or Tailwind CSS format), fonts, images directly from any website.
Image from store
Description from store
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!