Color Catcher

About this plugin

# 🎨 Color Catcher - Professional Color Utility for FigmaInstantly extract color values from any layer with smart color naming. Get HEX, RGB, HSL, CSS, and OKLCH formats + intelligent color names from 1,566 predefined colors. One-click copy, beautiful UI, lightning fast.### ✨ Key Features**🏷️ Smart Color Naming (NEW!)**- Automatically identifies color names from a database of 1,566 predefined colors- Intelligent matching using advanced color distance algorithms- Shows exact matches directly, approximate matches with "≈" prefix- Click-to-copy color names just like color values**🎯 Instant Color Extraction**- Select any layer with solid fill and get complete color information- Supports HEX, RGB, HSL, CSS, and OKLCH color formats- Real-time updates as you select different layers- Works with shapes, text, components, and any layer with solid fills**↕️ Customizable Format Order (NEW!)**- Drag and drop to reorder the format list exactly the way you prefer- Your order persists across sessions (saved automatically)- A small reset control appears when you customize the order**📋 One-Click Copy**- Click any color format to copy instantly to clipboard- Copy color names with a single click- Visual feedback confirms successful copies- Clean, formatted output ready for development**🌟 Beautiful User Experience**- Modern, shadcn-inspired interface design- Smooth animations and micro-interactions- Large color swatch preview with hover effects- Responsive design optimized for different Figma window sizes- Smart onboarding for first-time users**🚀 Lightning Performance**- Built with vanilla JavaScript for maximum speed- Real-time color detection as you select layers- Optimized color matching algorithms- No lag, no loading times### 🎨 How It Works1. **Select a Layer**: Click any shape, text, or component with a solid fill2. **Instant Results**: See color values appear immediately3. **Smart Naming**: Get intelligent color names like "Navy Blue" or "Coral Red"4. **Copy Any Format**: Click HEX, RGB, HSL, CSS, or the color name to copy5. **Stay in Flow**: Continue designing without leaving Figma### 🌈 OKLCH (Modern Color Space)OKLCH is a perceptually uniform color space that makes color relationships more consistent than HSL. If you're building design systems or working with advanced color workflows, OKLCH is a future-ready format that pairs well with modern CSS.### 🛠️ Technical Excellence**Advanced Color Matching**- Weighted Euclidean distance algorithm in RGB+HSL color space- 1,566 named colors from the NTC (Name That Color) database- Distinguishes between exact and approximate matches- Optimized for performance and accuracy**Professional Development**- Built with TypeScript for type safety- Clean, maintainable code architecture- No external dependencies for maximum reliability- Regular updates and improvements### 🎯 Perfect For**Design Handoffs**- Export color values for developers- Provide consistent color naming across teams- Create comprehensive style guides**Design System Work**- Document color palettes with proper names- Ensure color consistency across projects- Quick color reference during design work**Personal Projects**- Explore and understand color relationships- Learn color names and properties- Speed up your design workflow### 📦 What's New in v1.2+- 🌈 **OKLCH Support**: Adds `oklch(L C H)` output- ↕️ **Drag to Reorder Formats**: Customize the format list by dragging- � **Persistent Preferences**: Format order is saved across sessions- ↩️ **Reset Order**: Small reset control appears after customization- ✨ **Smart Color Naming**: 1,566 intelligent color names### 💬 Feedback & SupportBuilt with love for the design community. Send feedback directly through the plugin or report issues on GitHub. We're constantly improving based on your suggestions!---**🚀 Try Color Catcher today and transform how you work with colors in Figma!***Plugin ID: 1605725747312426245*