ColorPaletteExtractor 🎨

A modern Chrome extension that extracts and displays the complete color palette from any webpage. Perfect for designers, developers, and anyone who wants to analyze website color schemes.

✨ Features

🎯 Core Functionality

• Automatic Color Extraction: Scans all DOM elements for colors using computed styles
• Comprehensive Detection: Finds colors in text, backgrounds, borders, outlines, and gradients
• Real-time Updates: Automatically detects dynamically added styles using MutationObserver
• CSS Variables Support: Extracts colors from CSS custom properties

🎨 Modern UI

• Dual View Modes: Grid and list views for different preferences
• Smart Sorting: Sort by frequency, hue, brightness, or contrast ratio
• Color Details Modal: Click any color for detailed information
• Loading States: Smooth loading and empty state handling
• Responsive Design: Works perfectly on different screen sizes

📊 Color Information

• Multiple Formats: HEX, RGB, HSL, and HSV values
• Contrast Analysis: WCAG-compliant contrast ratios against white/black
• Visual Previews: Large color swatches with transparency indicators
• Frequency Tracking: Shows how often each color is used

📤 Export Options

• JSON: Simple array of hex values
• SCSS Variables: Ready-to-use SCSS color variables
• CSS Variables: Modern CSS custom properties
• CSV: Spreadsheet-friendly format with multiple color formats

🔒 Privacy First

• Local Processing: All color extraction happens locally
• No Tracking: Zero analytics or data collection
• No Server: Everything stays on your device
• Minimal Permissions: Only requests necessary access

🚀 Installation

For Development

1. Clone or download this repository
2. Open Chrome and go to chrome://extensions/
3. Enable "Developer mode" in the top right
4. Click "Load unpacked" and select the extension folder
5. The extension icon should appear in your toolbar

For Publishing

1. Create a icons/ folder with icon files:
   • icon16.png (16x16)
   • icon32.png (32x32)
   • icon48.png (48x48)
   • icon128.png (128x128)
2. Zip the entire folder
3. Submit to Chrome Web Store

📖 Usage

Basic Usage

1. Navigate to any webpage
2. Click the ColorPaletteExtractor icon in your toolbar
3. The extension will automatically extract all colors
4. Browse the color palette in grid or list view

Advanced Features

• Switch Views: Toggle between grid and list layouts
• Sort Colors: Use the dropdown to sort by different criteria
• Color Details: Click any color swatch for detailed information
• Export Palette: Choose your preferred format and download
• Refresh: Click the refresh button to re-extract colors

Color Details Modal

When you click a color, you'll see:

• Large color preview
• All color format values (HEX, RGB, HSL, HSV)
• Contrast ratio tests against white and black backgrounds
• WCAG compliance indicators

🛠️ Technical Details

Architecture

• Manifest V3: Latest Chrome extension standard
• Modular Design: Clean separation of concerns
• ES6+: Modern JavaScript with modules
• CSS Variables: Consistent theming system

Color Detection

• Computed Styles: Uses getComputedStyle() for accurate color values
• Gradient Parsing: Extracts individual colors from CSS gradients
• CSS Variables: Detects colors in custom properties
• Frequency Tracking: Counts color usage across the page

Performance

• Debounced Updates: Prevents excessive processing on dynamic pages
• Efficient DOM Traversal: Optimized element selection
• Memory Management: Proper cleanup and resource handling

📁 File Structure

ColorPaletteExtractor/
├── manifest.json          # Extension configuration
├── popup.html            # Main UI
├── popup.js              # UI logic and interactions
├── content.js            # Color extraction script
├── background.js         # Service worker
├── utils/
│   └── colors.js         # Color utilities and conversions
├── styles/
│   └── popup.css         # Modern UI styling
└── icons/                # Extension icons (add your own)
    ├── icon16.png
    ├── icon32.png
    ├── icon48.png
    └── icon128.png

🎨 Color Formats Supported

• HEX: #ff0000, #f00, #ff0000ff
• RGB: rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
• HSL: hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5)
• Gradients: linear-gradient(), radial-gradient()
• CSS Variables: var(--color-primary)

🔧 Development

Prerequisites

• Chrome browser
• Basic knowledge of HTML, CSS, JavaScript

Local Development

1. Make changes to the code
2. Go to chrome://extensions/
3. Click the refresh icon on the extension
4. Test your changes

Building for Production

1. Add your icon files to the icons/ folder
2. Test thoroughly on various websites
3. Update version in manifest.json
4. Create a zip file for distribution

🤝 Contributing

Contributions are welcome! Here are some areas for improvement:

• Icon Design: Create beautiful extension icons
• Additional Export Formats: Add more export options
• Color Analysis: Enhanced color theory features
• Performance: Optimize for very large pages
• Accessibility: Improve screen reader support

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Chrome Extensions API documentation
• WCAG contrast ratio guidelines
• Modern CSS and JavaScript best practices
• The design and development community

---

Made with ❤️ for designers and developers who love beautiful color palettes!