HueLab — Color Engineering for Your Codebase

Find, fix, refactor, and govern every color in your project.

HueLab is an advanced workspace extension that transforms your codebase from scattered hex codes into a highly governed, accessible, and automated design system.

It scans your repository for hardcoded colors, accessibility problems, duplicate values, inconsistent tokens, and theme issues — then lets you safely fix them directly inside VS Code.

The Project Color Doctor

The hero of HueLab. Instantly score your project's color architecture out of 100.

• Scan is 100% Free: Run a complete project analysis at any time.
• Discover hidden accessibility contrast failures.
• Find duplicates and hardcoded colors across CSS, React, Vue, and TypeScript.
• View real metrics, not guesses.

"Explain This Color"

HueLab understands your code's context. Hover over any color to see its formats, Project Role, Usage count, and Accessibility. If a color is hardcoded, HueLab suggests a semantic token name directly in the hover.

Find, Fix, and Refactor (HueLab Pro)

Don't just detect problems. Automate the fixes.

• Design Tokens: Automatically generate a tokens.css design system from hundreds of hardcoded variables.
• Color Migration Assistant: Refactoring a brand color? huelab.migrateColor scans the workspace, calculates the Color Impact, and previews exactly what will change across all components before applying a safe WorkspaceEdit.
• Modernize CSS Colors: A real-time linter spots legacy rgb() or #hex values and provides Quick Fixes to automatically convert them to wide-gamut oklch().

Enterprise Pipeline & CI/CD

Bring color engineering to your GitHub Actions.

• Git-Aware Color Guard: Get warned in VS Code before you commit a hardcoded color or accessibility violation.
• CI/CD Guard: Use the @huelab/cli in your deployment pipeline to catch color-contrast accessibility regressions before production.

Free vs. Pro

HueLab's core detection tools are completely free forever. Upgrading to HueLab Pro unlocks automated fixes, project-wide refactoring, and AI-driven tokenization.

FREE: ✓ Complete Project Scan ✓ Project Health Score ✓ Detected Issue breakdowns ✓ Basic color intelligence on Hover ✓ Basic CLI execution

HUELAB PRO: ✓ Automatic Workspace Fixes ✓ Generate tokens.css Design Systems ✓ Workspace-wide Color Migration ✓ Advanced Contextual Hover Intelligence ✓ Color Impact Analysis ✓ CSS Color Modernization (OKLCH)

To unlock Pro, run HueLab: Enter API Key or click Upgrade to Pro inside the Color Doctor panel.

Commands

• HueLab: Project Color Doctor
• HueLab: Generate Tokens from Hardcoded Colors
• HueLab: Migrate Color (Replace Across Workspace)
• HueLab: Garbage Collect Colors

Privacy & Security

HueLab runs entirely inside your VS Code instance. Your source code is analyzed locally via AST and regex. We do not upload your repository to external servers for color detection.