Colors-LE

Colors-LE: Zero Hassle Color Extraction

Pull every color out of the current file in one keystroke

CSS, SCSS, LESS, Stylus, HTML, JavaScript, TypeScript, SVG, XML, JSON, YAML, TOML, Markdown, and any text

---

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.

Configuring it by hand — any host with an MCP config file

Most hosts read a JSON config. Add one entry:

{

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

-y skips the install prompt on first run. Pin a version if you would rather not track releases — colors-le-mcp@2.5.0.

Prefer not to go through npx on every launch? Install it once and point at the binary instead:

npm install -g colors-le-mcp

{

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

It speaks MCP over stdio and needs no environment variables, no API key and no configuration of its own. To check it before wiring it into anything:

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

That prints the tool list and exits — if you see extract_colors, the server works.

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)

#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 built-in list

Folders, wherever they appear:

.git, .hg, .svn, node_modules, bower_components, jspm_packages, .pnpm-store, .yarn, vendor, site-packages, Pods, Carthage, dist, build, out, target, _build, _site, dist-newstyle, zig-out, storybook-static, cdk.out, DerivedData, CMakeFiles, .next, .nuxt, .output, .svelte-kit, .angular, .astro, .docusaurus, .vuepress, .expo, .turbo, .parcel-cache, .cache, .sass-cache, .jekyll-cache, .dart_tool, .pub-cache, .gradle, .kotlin, .cxx, .externalNativeBuild, captures, ephemeral, .symlinks, .swiftpm, .build, .bundle, .stack-work, .zig-cache, .godot, elm-stuff, .vercel, .netlify, .serverless, .aws-sam, .terraform, .venv, venv, __pycache__, .tox, .nox, .mypy_cache, .pytest_cache, .ruff_cache, .ipynb_checkpoints, .eggs, coverage, htmlcov, .nyc_output, .vscode-test, .idea, .vs, xcuserdata, *.egg-info

File