Color Extractly 🎨 | Extract Colors from Any Text or Code

About this plugin

Your go-to sorcery for pulling colors out of any text or code!

Simply paste any code or text—from a snippet to full website code—and watch as our plugin effortlessly extracts vibrant color values. No perfection needed, just paste and let the magic unfold! 🪄✨

+ Generates and aligns Design Systems in seconds!

✨ Key Features

1. ✅ Instant Color Extraction: Directly pull color values from text and code.
2. 🔖 Auto-Organize, Group & Name: Streamline your workflow with automatic color sorting and naming for better management.
3. 📝 Text-to-Color Variables & Styles: Easily create and manage color variables & styles from textual input, ready for Figma.
4. 🚀 Effortless Integration: Seamlessly import colors into Figma, allowing immediate application to your designs.
5. 🔄 Clean & Tidy UI: Maintain a clutter-free color palette by eliminating redundant colors automatically.
6. ✏️ Distill Typo to Text Styles
7. 🔤 Add Matching Text Style(s) to Element(s)
8. 🔢 Distill Number Attributes to Variables
9. 🔄 Replace Number Attributes with Variables
10. 🌈 Replace Color(s) with Variables/Styles
11. ---
12. 💥 Destroy all variables and styles

🎨 Color Management

1. Extract colors from code snippets, text, and CSS
2. Extract colors from Figma selection (fills, strokes, text)
3. Replace colors with matching local or library styles
4. Auto-detect and preserve variable names from CSS/SCSS/LESS
5. Smart color matching with configurable threshold
6. Preserve opacity and color relationships
7. Smart naming from layer structure and code
8. User-controlled naming through layer organization
9. Preserves design system hierarchies
10. Automatic semantic color naming

🔄 Variable & Style Management

1. Convert text layers to reusable text styles
2. ↳ Use -- prefix in layer names for custom style naming
3. ↳ Supports nested style groups via layer names
4. ↳ Example: --headline-mobile-h2 → "Headline/mobile/h2"
5. Create variables from numeric properties (spacing, sizes)
6. Replace numbers with matching local or library variables
7. Smart matching for similar values and properties
8. Bulk apply styles across selected elements
9. Naming based on layer and frame structure
10. Smart detection of design patterns
11. Preserves component naming hierarchies
12. Context-aware variable naming

🧩 Component Tools

1. Convert selections to components or component sets
2. Replace elements with matching components
3. Smart component organization and property detection
4. Cross-library component replacement support

🔄 Instance Management

1. Selectively reset instance overrides
2. Reset colors, typography, effects, or layout
3. Preserve specific overrides while resetting others
4. Batch process multiple instances

🧹 Cleanup & Organization

1. Remove redundant colors automatically
2. Group similar colors and properties
3. Auto-generate meaningful variable names
4. Maintain clean, organized style libraries

💣 Cleanup & Reset Tools

1. Remove styles and variables from selected elements
2. Detach instances while preserving appearance
3. Clean up unused styles and properties
4. Remove hidden layers automatically
5. Smart component restoration capabilities
6. Batch processing for multiple elements

💡 Smart Features

1. Automatic color format detection (HEX, RGB, HSL)
2. Smart variable naming based on context
3. Configurable matching thresholds
4. Cross-library style and variable support
5. Bulk processing capabilities

🛠️ User Experience

1. Clean, intuitive interface
2. Quick filters and search functionality
3. Real-time preview of changes
4. Undo/redo support
5. Detailed tooltips and documentation