Color Catcher
by izaias
color, picker, utility, design system, developer handoff
Installs
12
Likes
0
Users
101
Views
57
Preview
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, OKLCH, and CMYK 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, OKLCH, and CMYK 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 and print workflows**π 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, OKLCH, CMYK, or the color name to copy5. **Stay in Flow**: Continue designing without leaving Figma### π Modern + Print-Ready Color Formats**OKLCH** is a perceptually uniform color space that makes color relationships more consistent than HSL. Perfect for modern design systems and advanced CSS workflows.**CMYK** gives you print-ready color percentages for packaging, branding, marketing materials, and other production workflows.### π οΈ 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**Print & Branding Work*** Quickly access CMYK percentages for production* Maintain consistency between digital and print assets* Speed up packaging and marketing workflows**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.3+* π¨οΈ **CMYK Support**: Adds print-ready `CMYK(C M Y K)` output* π **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*