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 · ★ Open VSX · ★ Marketplace

What it does

Open a file, run Colors-LE: Extract Colors, 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(), hwb(), lab()/lch(), oklab()/oklch(), color(), 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

Install

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

No document is refused. A language with no reader of its own is read as raw text, and metadata.fileType says which of the two answered.

Recognized syntax: #rgb, #rgba, #rrggbb, #rrggbbaa, comma-form rgb()/rgba()/hsl()/hsla(), CSS Color 4 modern syntax — space-separated rgb()/hsl() with / alpha, hwb(), lab(), lch(), oklab(), oklch() and color() in the nine predefined spaces, with angles in deg, rad, grad or turn and none (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): relative colours (rgb(from red r g b)), calc() and var() inside a colour call are not read; a colour outside sRGB is clipped when converted; a hex inside any JS string matches, including URL fragments; Stylus values without : or = only yield hex/functional literals, not named colors; in the raw-text scan a value segment runs to the end of the line, so two tokens on one line cost the named one.

Across a folder or a workspace

Extract reads the document you have open. A scan reads many files from disk and gives one report: the project's palette.

• The whole workspace: run Colors-LE: Extract Colors from Workspace from the command palette.
• One folder: right-click it in the Explorer and choose Extract Colors from Folder, or run Colors-LE: Extract Colors from Folder and pick one.

Each color is listed once however it is spelled, the most widely used first, with the spellings, how often it is written and where:

# Colors-LE workspace report

`my-project` · 3 file(s) read · 3 distinct color(s), 7 occurrence(s) in 3 file(s)

| Color | Written as | Occurrences | Files |
|---|---|---|---|
| `#ff0000` | `#FF0000`, `#f00`, `red`, `rgb(255, 0, 0)` | 4 | 2 |
| `#00ff00` | `#00ff00` | 2 | 2 |
| `#0000ff` | `#0000ff` | 1 | 1 |

## `#ff0000` (4)

- `styles/a.css` · **1:12**, **1:30**, **2:12**
- `styles/b.css` · **1:12**

## `#00ff00` (2)

- `styles/a.css` · **2:31**
- `styles/b.css` · **1:43**

## `#0000ff` (1)

- `theme.json` · **2:14**

The same color is one row. #f00, #FF0000, red and rgb(255, 0, 0) are one color written four ways, and the table says so. Alpha keeps colors apart: a half-transparent red is another color. A value that is not a color in sRGB on its own, such as a var(), is compared as written.

That is with colors-le.showPositions on. It is off by default, and then each line is the file and how many times the color is in it: styles/a.css (3). The copy on the clipboard follows colors-le.clipboardIncludesPositions, as it does for Extract.

What a scan reads. Files come from disk, so an unsaved edit is not seen. A file over the safety size, or one that is not UTF-8 text, is left unread. It stops at 5,000 files or 10,000 listed occurrences. The report ends with a line for each thing it left out, so a short report is never mistaken for a clean project.

What it skips, and how to change that. Three switches are on by default, and each can be turned off on its own in Settings:

Two lists adjust the result without turning a switch off. To skip more, add a pattern to scanExcludes. To read something a switch would skip, add it to scanAlwaysInclude:

{
	// Also skip the test fixtures.
	"colors-le.workspace.scanExcludes": ["**/fixtures/**"],
	// Read the vendored code, though the built-in list skips it.
	"colors-le.workspace.scanAlwaysInclude": ["**/vendor/**"]
}

Colors-LE: Open Settings opens all of these in the Settings editor.

The settings that shape a scan are under Settings.

The CLI

The same extraction from a terminal or a CI step, installed from npm with npm install -g colors-le (or run with npx colors-le) or from crates.io with cargo install colors-le. Both install the same command, documented in crate/, and are held to the same output byte for byte. Convert, analyze and validate are interactive and stay in the editor.

colors-le .                              # every colour in the tree; JSON on stdout when piped
colors-le --palette brand.txt .          # what is not in the palette
colors-le --values --dedupe . | sort -u  # write the palette in the first place
colors-le mcp                            # the same extraction over MCP on stdio

Install it from npm (colors-le) or from crates.io (colors-le). Both install the same colors-le command.

npm install -g colors-le   # or run it once: npx colors-le
cargo install colors-le

Exit codes: 0 clean, 1 none found or a colour outside the palette, 2 the question was malformed.

Matched by colour, not by spelling. A palette written in hex still catches a violation written in rgb(), because #FFF, #ffffff and rgb(255, 255, 255) are one entry. Alpha is part of the identity, and a named colour is only equal to itself — white and #ffffff are the same pixel and not the same decision.

Commands

No command is bound to a key by default. Give any of them one under Keyboard Shortcuts in the editor.

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.
• One rating prompt, at most twice. On the 3rd successful use the extension asks once whether you would rate it, and once more on the 20th if you chose Later or dismissed it. Don't Ask Again ends it. Setting notificationsLevel to important or silent yourself turns it off. The counts are kept in VS Code's extension storage and nothing is sent anywhere; Rate opens the listing you installed from — the VS Code Marketplace or Open VSX — in your browser.

Documentation

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

501 test cases across 36 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 a real run — coverage/coverage-summary.json and coverage/test-results.json — by scripts/coverage-readme.js; CI fails if this section drifts. Reproduce with bun run test:coverage, and the case count is the one vitest prints.

More from the LE family

Sixteen single-purpose tools for the work in front of every model. Each ships a Rust CLI and an MCP server. One page: letools.dev

Get it out

• String-LE — Extract every string in a codebase, so a person can read them
• Numbers-LE — Extract every hardcoded number in a codebase, so a person can check them
• Units-LE — Extract every quantity with its unit, normalized, and refuse the ambiguous ones by name
• Dates-LE — Extract every date and timestamp, and the exact instant each one resolves to
• IDs-LE — Extract every UUID, ULID, NanoID, ObjectId and Snowflake, and decode the time inside
• IPs-LE — Extract every IP address, CIDR block and MAC, normalized and classified by scope
• URLs-LE — Extract every URL in a codebase, with its protocol and exact position
• Paths-LE — Extract every file path in a codebase, and say whether it still points at anything
• Colors-LE — Extract every color in a codebase, and say which ones are not in your palette

Check it

• Regex-LE — Find every regex in a codebase, and report which can be driven into catastrophic backtracking
• Versions-LE — Find where one dependency is constrained differently across a repository's manifests
• i18n-LE — Identify the i18n library a project uses, then audit its catalogs by that library's rules
• Scrape-LE — Check whether a page is scrapeable before the scraper is written, and say when it cannot tell

Guard it

• Secrets-LE — Find hardcoded credentials in a codebase, and never print one into the report
• EnvSync-LE — Compare the dotenv files in a tree, and say which keys are missing from which
• Unicode-LE — Find the Unicode that hides meaning — bidi controls, invisibles, homoglyphs, mixed scripts

Each stands on its own: no shared crate, no published core. Where two of them agree, it is because the same answer was right twice.

Contact — nolindnaidoo.com · GitHub · LinkedIn

Also by nolindnaidoo

Rust — pixelcoords and pixelactions are one loop: pixelcoords answers where, pixelactions acts there. Their own tools, their own voice — not part of the LE family.

• 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

License

MIT © nolindnaidoo