ColorSync is an intelligent color analysis and optimization tool for frontend developers. It automatically recognizes colors in your code, provides detailed analysis, and suggests optimizations for better accessibility and consistency.
Features
1. Color Analysis on Hover
Hover over any color code (HEX, RGB, HSL) to see a detailed analysis panel:
Color Preview: Visual representation of the color.
Formats: HEX, RGB, HSL values.
Brightness & Saturation: Automatic calculation.
Contrast Analysis: Checks contrast against black and white backgrounds (WCAG AA/AAA standards).
2. Optimization Suggestions
Get intelligent suggestions for your colors:
Contrast Improvement: Suggests darker/lighter variants if contrast is too low.
Display-P3 Support: Automatically generates color(display-p3 ...) code for wide-gamut displays.
3. Color Consistency Check (Scanner)
Scan your entire file for similar colors that should be unified.
Command: ColorSync: Analyze Colors
Output: A report listing all colors and identifying groups of similar colors (e.g., #2F6BFF and #2E6AFF).
Supported Languages
CSS, SCSS, Less
Vue, HTML
JavaScript, TypeScript, React (JSX/TSX)
Installation
Open VS Code.
Search for "ColorSync" in the Extensions view (Ctrl+Shift+X).
Click Install.
Usage
Hover Analysis
Simply hover your mouse over any color code in a supported file.
Analyze Document
Open a file.
Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
Run ColorSync: Analyze Colors.
Check the "ColorSync Analysis" output channel for the report.
Development
Clone the repository.
Run npm install to install dependencies.
Press F5 to start debugging. This will open a new VS Code window with the extension loaded.
