Colors-LE: Zero Hassle Color Extraction

Pull every color out of the current file in one keystroke
CSS, SCSS, LESS, Stylus, HTML, JavaScript, TypeScript, and SVG

Useful? A star or rating is how other developers find it — ★ GitHub · ★ Marketplace · ★ Open VSX

What it does

Open a file, press Ctrl+Alt+C (Cmd+Alt+C on Mac), and every color in the document lands in a new editor — deduplicate, sort, convert, filter, analyze, or validate it from there. Works in VS Code and in VS Code–based editors like Cursor and VSCodium (installable from Open VSX).

• Palette auditing — every hex, rgb()/rgba(), hsl()/hsla(), and named color in stylesheets, markup, and code
• Design-system review — analyze distribution, cluster similar colors, spot near-duplicates
• Accessibility checks — contrast ratios against WCAG AA/AAA via the Validate command

Use it from an AI agent

The same engine runs as an MCP server, so an agent can call it directly instead of you running a command.

extract_colors(content, format?, filename?, dedupe?, maxResults?)

Returns every color with its notation and 1-based line and column, capped at 500 by default with meta.truncated so a large stylesheet cannot flood the agent's context window.

The server takes content and returns data — it reads no files and makes no network requests of its own. Published as colors-le-mcp on npm and as io.github.nolindnaidoo/colors-le in the MCP registry.

{
  "mcpServers": {
    "colors-le": {
      "command": "npx",
      "args": ["-y", "colors-le-mcp"]
    }
  }
}

npm install -g colors-le-mcp

{
  "mcpServers": {
    "colors-le": { "command": "colors-le-mcp" }
  }
}

echo '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | npx -y colors-le-mcp

Supported formats

Recognized syntax: #rgb, #rgba, #rrggbb, #rrggbbaa, comma-form rgb()/rgba()/hsl()/hsla() (calls may span multiple lines), and the CSS named colors including rebeccapurple and transparent. Positions are real 1-based line/column of each literal. Comments never produce colors, and comment markers inside strings don't start comments.

Known limitations (documented, not bugs): modern space-separated syntax (rgb(255 0 0 / 50%)) and lab()/lch()/oklch()/color() are not extracted; a hex inside any JS string matches, including URL fragments; Stylus values without : or = only yield hex/functional literals, not named colors.

Commands

Settings

Languages

Twelve languages besides English:

German · Spanish · French · Indonesian · Italian · Japanese · Korean · Portuguese (Brazil) · Russian · Ukrainian · Vietnamese · Chinese (Simplified)

Both halves are covered — the manifest (command titles, setting names and descriptions) and everything shown while the extension runs (notifications, the status bar, quick-picks and prompts). The extension follows VS Code's display language, so it matches whatever the editor is already set to; no setting of its own.

Privacy & security

• No network access. The extension never sends data anywhere. The telemetryEnabled setting only writes events to a local Output Channel you can inspect (Colors-LE Telemetry).
• The MCP server holds the same line. It takes content as an argument and returns data: no filesystem access, no network calls, no telemetry. Your agent already has file-read tools, so duplicating them inside the server would add a path-traversal surface for no capability. check:mcp-bundle fails the build if the server ever imports something that could reach either.
• Error notifications redact home directories and credential-shaped fragments.

Development

bun install
bun run build            # esbuild bundle -> dist/extension.js
bun run typecheck        # tsc --noEmit (includes tests)
bun run test             # vitest unit suite
bun run test:integration # real VS Code extension host
bun run lint             # biome
bun run package          # VSIX into release/

Architecture and conventions live in AGENTS.md. Changes are tracked in CHANGELOG.md.

Performance

Median of 7 runs after warmup, on Apple M5 Pro, 24 GB RAM, Node 24.3.0. Inputs are generated by scripts/benchmark.ts rather than checked in, so the sizes above are exactly what was measured. Reproduce with bun run benchmark.

These are machine-specific and are not asserted in CI — a benchmark that gates a build only tells you how busy the runner was.

Testing

322 test cases across 22 files, plus an integration suite that runs in a real VS Code extension host and an end-to-end test that installs the built .vsix into a clean profile.

Generated from coverage/coverage-summary.json by scripts/coverage-readme.js; CI fails if this section drifts from a fresh run. Reproduce with bun run test:coverage.

More from the LE Family

Every tool in the family, one page: letools.dev

All ten also ship as MCP servers — npx <name>-mcp gives any agent the same engine.

• String-LE - Extract string values for i18n from JSON, YAML, CSV, TOML, INI, and .env
• Paths-LE - Extract file paths from JS/TS imports, JSON, HTML, CSS, TOML, CSV, and .env
• Numbers-LE - Extract numeric values from JSON, YAML, CSV, TOML, INI, and .env
• EnvSync-LE - Spot missing keys across your .env files, with a markdown report
• Regex-LE - Find, test, and validate regular expressions with ReDoS screening
• Secrets-LE - Detect and sanitize credentials locally, before you commit
• Scrape-LE - Check whether a page is scrapeable before you write the scraper
• URLs-LE - Extract URLs from documentation, configs, and code
• Dates-LE - Extract and analyze dates from logs, configs, and code

Also by nolindnaidoo

Rust

• pixelcoords — Freeze your screen, mark regions, get pixel-exact coordinates and crops pixelcoords.dev · crates.io · docs.rs
• pixelactions — Consume human-verified coordinates, perform the interaction, confirm it landed pixelactions.dev · crates.io · docs.rs

Contact Developer — GitHub · LinkedIn

License

MIT © nolindnaidoo