https://github.com/offensiveedge/colors-le
Instantly extract and analyze colors from CSS, HTML, and JavaScript with precision
https://github.com/offensiveedge/colors-le
accessibility analysis color-analysis color-extraction color-validation colors css developer-tools extension extraction format-conversion functional-programming html javascript productivity scss typescript visual-studio-code vscode vscode-extension
Last synced: 3 months ago
JSON representation
Instantly extract and analyze colors from CSS, HTML, and JavaScript with precision
- Host: GitHub
- URL: https://github.com/offensiveedge/colors-le
- Owner: OffensiveEdge
- License: mit
- Created: 2025-10-10T20:24:30.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-11-02T16:39:52.000Z (3 months ago)
- Last Synced: 2025-11-02T18:15:46.740Z (3 months ago)
- Topics: accessibility, analysis, color-analysis, color-extraction, color-validation, colors, css, developer-tools, extension, extraction, format-conversion, functional-programming, html, javascript, productivity, scss, typescript, visual-studio-code, vscode, vscode-extension
- Language: TypeScript
- Homepage:
- Size: 2.2 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Colors-LE: Zero Hassle Color Extraction
Extract 1,000+ colors in 0.02 seconds • 100x faster than manual
CSS, HTML, JavaScript, TypeScript, SCSS, LESS, Stylus, and SVG
---
---
## ⚡ See It In Action
**Before**: Manually searching through CSS files for brand colors (1 hour)
```css
.header {
background: #ff5733;
}
.button {
color: rgb(255, 87, 51);
}
/* ... 200 more colors scattered across 50 files */
```
**After**: One command extracts all 203 colors with analysis in 0.02 seconds
```
Colors: 203 total
Unique: 47 colors
Most used: #FF5733 (23 times)
Format: HEX (60%), RGB (30%), HSL (10%)
Sort by: Hue, Saturation, Lightness
```
**Time Saved**: 1 hour → 1 second ⚡
---
## ✅ Why Colors-LE?
- **1,000+ colors in 0.02 seconds** - 100x faster than manual searching
- **Zero Config** - Install → Press `Cmd+Alt+C` → Get palette instantly
- **Battle-Tested** - 219 unit tests, 89% coverage, zero critical vulnerabilities
- **Security-Hardened** - 89% error handling, path sanitization, safe error reporting
Perfect for design system audits, brand compliance, and accessibility testing.
---
## 🙏 Thank You
If Colors-LE saves you time, a quick rating helps other developers discover it:
⭐ [Open VSX](https://open-vsx.org/extension/OffensiveEdge/colors-le) • [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=nolindnaidoo.colors-le)
---
### Key Features
- **Color conversion** - Convert between HEX, RGB, HSL, OKLCH formats
- **Palette analysis** - Find most-used colors, duplicates, format distribution
- **Smart sorting** - Sort by hue, saturation, lightness, or alphabetically
- **7 file types** - CSS, SCSS, LESS, Stylus, HTML, JavaScript/TypeScript, SVG
- **Format detection** - HEX, RGB/RGBA, HSL/HSLA, named colors, CSS variables
- **13 languages** - English, Chinese, German, Spanish, French, Indonesian, Italian, Japanese, Korean, Portuguese, Russian, Ukrainian, Vietnamese
## 🚀 More from the LE Family
- **[String-LE](https://open-vsx.org/extension/OffensiveEdge/string-le)** - Extract user-visible strings for i18n and validation • [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=nolindnaidoo.string-le)
- **[Numbers-LE](https://open-vsx.org/extension/OffensiveEdge/numbers-le)** - Extract and analyze numeric data with statistics • [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=nolindnaidoo.numbers-le)
- **[EnvSync-LE](https://open-vsx.org/extension/OffensiveEdge/envsync-le)** - Keep .env files in sync with visual diffs • [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=nolindnaidoo.envsync-le)
- **[Paths-LE](https://open-vsx.org/extension/OffensiveEdge/paths-le)** - Extract file paths from imports and dependencies • [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=nolindnaidoo.paths-le)
- **[Scrape-LE](https://open-vsx.org/extension/OffensiveEdge/scrape-le)** - Validate scraper targets before debugging • [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=nolindnaidoo.scrape-le)
- **[URLs-LE](https://open-vsx.org/extension/OffensiveEdge/urls-le)** - Extract URLs from web content and APIs • [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=nolindnaidoo.urls-le)
- **[Dates-LE](https://open-vsx.org/extension/OffensiveEdge/dates-le)** - Extract temporal data from logs and APIs • [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=nolindnaidoo.dates-le)
## 💡 Use Cases
- **Design System Auditing** - Extract all colors from stylesheets for consistency validation
- **Theme Development** - Pull color palettes from CSS variables and design tokens
- **Brand Compliance** - Find all brand colors across your codebase for validation
- **Accessibility Analysis** - Extract colors for contrast ratio and accessibility testing
## 🚀 Quick Start
1. Install from [Open VSX](https://open-vsx.org/extension/OffensiveEdge/colors-le) or [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=nolindnaidoo.colors-le)
2. Open any supported file type (`Cmd/Ctrl + P` → search for "Colors-LE")
3. Run Quick Extract (`Cmd+Alt+C` / `Ctrl+Alt+C` / Status Bar)
## ⚙️ Configuration
Colors-LE has minimal configuration to keep things simple. Most settings are available in VS Code's settings UI under "Colors-LE".
Key settings include:
- Output format preferences (side-by-side, clipboard copy)
- Safety warnings and thresholds for large files
- Notification levels (silent, important, all)
- Status bar visibility
- Local telemetry logging for debugging
For the complete list of available settings, open VS Code Settings and search for "colors-le".
## 🌍 Language Support
🇺🇸 **English** • 🇩🇪 **German** • 🇪🇸 **Spanish** • 🇫🇷 **French** • 🇮🇩 **Indonesian** • 🇮🇹 **Italian** • 🇯🇵 **Japanese** • 🇰🇷 **Korean** • 🇧🇷 **Portuguese (Brazil)** • 🇷🇺 **Russian** • 🇺🇦 **Ukrainian** • 🇻🇳 **Vietnamese** • 🇨🇳 **Chinese (Simplified)**
## 🧩 System Requirements
**VS Code** 1.70.0+ • **Platform** Windows, macOS, Linux
**Memory** 200MB recommended for large files
## 🔒 Privacy
100% local processing. No data leaves your machine. Optional logging: `colors-le.telemetryEnabled`
## ⚡ Performance
Colors-LE is built for speed and efficiently processes files from 1KB to 100KB+. See [detailed benchmarks](docs/PERFORMANCE.md).
For detailed information, see [Performance Monitoring](docs/PERFORMANCE.md).
**Performance Characteristics:**
- Handles files up to 100KB efficiently
- Practical limit: 1MB (with warning), 10MB (error threshold)
- Built-in real-time performance tracking
- Optimized for design systems and large codebases
**Note**: Performance varies based on file content, format, and hardware. Files without colors process faster but extract 0 colors.
**Full Metrics**: [docs/PERFORMANCE.md](docs/PERFORMANCE.md) • Test Environment: macOS, Bun 1.2.22, Node 22.x
## 🔧 Troubleshooting
**Not detecting colors?**
Ensure file is saved with supported extension (.css, .html, .js, .ts, .scss, .less, .styl, .svg)
**Large files slow?**
Files over 1MB may take longer. Consider splitting into smaller chunks
**Need help?**
Check [Issues](https://github.com/OffensiveEdge/colors-le/issues) or enable logging: `colors-le.telemetryEnabled: true`
## ❓ FAQ
**What colors are extracted?**
HEX (#rgb, #rrggbb, #rrggbbaa), RGB/RGBA, HSL/HSLA, and named colors
**Can I convert between formats?**
Yes, use the Convert command to transform colors between HEX, RGB, HSL, and OKLCH formats
**Max file size?**
Up to 10MB. Practical limit: 1MB for optimal performance
**Perfect for design systems?**
Absolutely! Audit color palettes, validate brand consistency, and analyze theme implementations
## 📊 Testing
**219 unit tests** • **89% function coverage, 74% line coverage**
Powered by Vitest • Run with `bun test --coverage`
### Core Principle
**No broken or failed tests are allowed in commits.** All tests must pass before code can be committed or merged.
### Test Suite Highlights
- **44 error handling tests** with 89% coverage
- **Comprehensive color format support** (HEX, RGB/RGBA, HSL/HSLA, named colors)
- **CSS, SCSS, LESS, Stylus, HTML, JS/TS, SVG** extraction validation
For detailed testing guidelines, see [Testing Guidelines](docs/TESTING.md).
---
Copyright © 2025
@OffensiveEdge. All rights reserved.