Colors-LE

Colors-LE：轻松提取颜色

按下一个快捷键，即可提取当前文件中的所有颜色
CSS、SCSS、LESS、Stylus、HTML、JavaScript、TypeScript 和 SVG

觉得有用？ 点赞或评分能帮助其他开发者发现它 — ★ GitHub · ★ Open VSX · ★ Marketplace

功能介绍

打开文件，运行 Colors-LE: Extract Colors，文档中的所有颜色就会出现在新的编辑器中，你可以在其中对颜色进行去重、排序、转换、筛选、分析或验证。适用于 VS Code 及基于 VS Code 的编辑器，例如 Cursor 和 VSCodium（可从 Open VSX 安装）。

• 调色板审查 — 提取样式表、标记和代码中的所有十六进制颜色、rgb()/rgba()、hsl()/hsla()、hwb()、lab()/lch()、oklab()/oklch()、color() 和命名颜色
• 设计系统审查 — 分析颜色分布、聚类相似颜色、查找近似重复项
• 无障碍检查 — 通过 Validate 命令，根据 WCAG AA/AAA 检查对比度

安装

在 AI Agent 中使用

相同的引擎也以 MCP 服务的形式运行，因此 Agent 可以直接调用它，而无需你运行命令。

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

它会返回每种颜色及其表示法和从 1 开始计数的行号与列号，默认上限为 500，并通过 meta.truncated 标记结果是否截断，避免大型样式表淹没 Agent 的上下文窗口。

该服务接收内容并返回数据——它不会读取文件，也不会自行发起网络请求。它以 colors-le-mcp 的名称发布在 npm 上，并以 io.github.nolindnaidoo/colors-le 的名称发布在 MCP 注册表中。

{
  "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

不会拒绝任何文档。 没有专用读取器的语言会作为原始文本读取，metadata.fileType 会说明由哪种读取器处理。

可识别的语法：#rgb、#rgba、#rrggbb、#rrggbbaa、逗号形式的 rgb()／rgba()／hsl()／hsla()、CSS Color 4 现代语法——以空格分隔并使用 / 表示 alpha 的 rgb()／hsl()、hwb()、lab()、lch()、oklab()、oklch()，以及九种预定义色彩空间中的 color()；角度单位支持 deg、rad、grad 或 turn，也支持 none（调用可以跨多行）；还包括 CSS 命名颜色，如 rebeccapurple 和 transparent。位置是每个字面量真实的、从 1 开始计数的行／列号。注释不会产生颜色，字符串中的注释标记也不会开始注释。

已知限制（有文档说明，并非缺陷）：不读取相对颜色（rgb(from red r g b)）、颜色调用中的 calc() 和 var()；转换时，超出 sRGB 范围的颜色会被裁切；任何 JS 字符串中的十六进制值都会匹配，包括 URL 片段；没有 : 或 = 的 Stylus 值只会识别十六进制／函数式字面量，不会识别命名颜色；原始文本扫描中，值片段会延伸到行尾，因此同一行上的两个令牌会导致命名颜色被计入代价。

扫描文件夹或工作区

Extract 会读取当前打开的文档。扫描会从磁盘读取多个文件，并生成一份报告：项目的调色板。

• 整个工作区：在命令面板中运行 Colors-LE: Extract Colors from Workspace。
• 单个文件夹：在资源管理器中右键单击该文件夹，然后选择 Extract Colors from Folder；或者运行 Colors-LE: Extract Colors from Folder 并选择一个文件夹。

每种颜色无论写法如何都只列出一次，按使用频率从高到低排序，并显示其写法、出现次数和所在位置：

# 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**

相同的颜色只占一行。 #f00、#FF0000、red 和 rgb(255, 0, 0) 是同一种颜色的四种写法，表格会将其标明。Alpha 值会让颜色彼此区分：半透明红色是另一种颜色。对于本身不是 sRGB 颜色的值（例如 var()），则按其原样进行比较。

以上效果需要开启 colors-le.showPositions。此选项默认关闭，关闭时每行会显示文件及颜色在其中出现的次数：styles/a.css (3)。剪贴板中的内容遵循 colors-le.clipboardIncludesPositions 设置，与 Extract 一样。

扫描会读取什么。 文件从磁盘读取，因此不会看到尚未保存的编辑内容。超过安全大小的文件，或非 UTF-8 文本文件，不会被读取。扫描最多处理 5,000 个文件或 10,000 个列出的匹配项。报告末尾会逐项列出所有被跳过的内容，避免将简短报告误认为项目没有问题。

会跳过什么，以及如何更改。 默认开启三个开关，可在设置中分别关闭：

还可以通过两个列表调整扫描结果，而不必关闭开关。要跳过更多内容，请将模式添加到 scanExcludes。要读取开关原本会跳过的内容，请将其添加到 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 会在设置编辑器中打开上述所有设置。

影响扫描的设置位于设置下。

CLI

在终端或 CI 步骤中执行相同的提取操作，可通过 npm 安装 （使用 npm install -g colors-le，或运行 npx colors-le），也可通过 crates.io 安装（使用 cargo install colors-le）。两种方式安装的都是同一个命令， 相关文档见 crate/，两者的输出逐字节一致。 转换、分析和验证都是交互式的，并且会在编辑器中进行。

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

从 npm (colors-le) 或从 crates.io 安装 (colors-le)。两种方式安装的都是同一个 colors-le 命令。

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

退出代码：0 表示无问题；1 表示未找到颜色或颜色不在调色板中；2 表示问题格式错误。

按颜色匹配，而非按拼写匹配。 即使调色板使用十六进制表示，也能捕获以 rgb() 表示的违规项，因为 #FFF、#ffffff 和 rgb(255, 255, 255) 属于同一项。Alpha 值是颜色标识的一部分，而命名颜色只与自身相等——white 和 #ffffff 是同一个 像素，却不是同一个判断。

命令

默认情况下，没有命令绑定快捷键。可在编辑器的 键盘快捷方式 中为任意命令设置快捷键。

设置

语言

除英语外，还支持十二种语言：

德语 · 西班牙语 · 法语 · 印度尼西亚语 · 意大利语 · 日语 · 韩语 · 葡萄牙语（巴西） · 俄语 · 乌克兰语 · 越南语 · 简体中文

两部分内容均已覆盖——清单（命令标题、设置名称和描述），以及扩展运行时显示的所有内容（通知、状态栏、快速选择项和提示词）。扩展会遵循 VS Code 的显示语言，因此会与编辑器当前设置的语言一致；无需单独设置。

隐私与安全

• 不访问网络。 扩展绝不会向任何地方发送数据。telemetryEnabled 设置只会将事件写入本地输出通道，供你查看（Colors-LE Telemetry）。
• MCP 服务同样遵循这一原则。 它将内容作为参数接收并返回数据：不访问文件系统、不进行网络调用，也不收集遥测数据。你的 Agent 已有文件读取工具，因此在服务中重复实现这些功能只会增加路径遍历攻击面，却不提供额外能力。如果服务导入了任何可能访问这两者的内容，check:mcp-bundle 就会导致构建失败。
• 错误通知会对主目录路径和类似凭据的片段进行脱敏。
• 评分提示最多出现两次。 第 3 次成功使用时，扩展会询问一次你是否愿意评分；如果你选择了 稍后 或关闭提示，第 20 次使用时还会再询问一次。选择 不再询问 后就不会再出现。将 notificationsLevel 设置为 important 或 silent 可关闭此提示。次数记录在 VS Code 的扩展存储中，不会向任何地方发送数据；选择 评分 会在浏览器中打开你安装扩展的平台页面——VS Code Marketplace 或 Open VSX。

文档

性能

在 Apple M5 Pro、24 GB RAM、Node 24.3.0 上预热后运行 7 次所得的中位数。输入由 scripts/benchmark.ts 生成，而非签入仓库，因此上方所列大小与实际测量值 完全一致。运行 bun run benchmark 可复现。

这些数据因机器而异，且不会在 CI 中断言——以基准测试结果作为构建门槛， 只能说明运行器当时有多忙。

测试

36 个文件中共有 501 个测试用例，另有一个在真实 VS Code 扩展宿主中运行的 集成测试套件，以及一个将构建出的 .vsix 安装到干净配置文件中的端到端测试。

这些数据由真实运行生成的 coverage/coverage-summary.json 和 coverage/test-results.json 经 scripts/coverage-readme.js 生成；如果此部分 与实际情况不符，CI 将失败。运行 bun run test:coverage 可复现，测试用例 数量以 vitest 输出为准。

LE 系列的更多工具

为每个模型眼前的工作打造的 16 款单一用途工具。每款都附带一个 Rust CLI 和一个 MCP 服务。一页尽览：letools.dev

提取

• String-LE — 提取代码库中的所有字符串，方便人工阅读
• Numbers-LE — 提取代码库中所有硬编码数字，方便人工检查
• Units-LE — 提取所有带单位的数量并统一格式，遇到含义不明确的数量时会按名称拒绝处理
• Dates-LE — 提取所有日期和时间戳，并给出每个日期和时间戳解析出的确切时刻
• IDs-LE — 提取所有 UUID、ULID、NanoID、ObjectId 和 Snowflake，并解码其中的时间
• IPs-LE — 提取所有 IP 地址、CIDR 网段和 MAC 地址，统一格式并按范围分类
• URLs-LE — 提取代码库中的所有 URL，并给出协议和确切位置
• Paths-LE — 提取代码库中的所有文件路径，并说明它们是否仍指向实际内容
• Colors-LE — 提取代码库中的所有颜色，并指出哪些颜色不在你的调色板中

检查

• Regex-LE — 查找代码库中的所有正则表达式，并报告哪些可能导致灾难性回溯
• Versions-LE — 查找某个依赖项在仓库的各个清单文件中受到不同约束的位置
• i18n-LE — 识别项目使用的 i18n 库，然后依据该库的规则审查其目录
• Scrape-LE — 在编写抓取器之前检查网页能否抓取，并说明何时无法判断

防护

• Secrets-LE — 查找代码库中的硬编码凭据，绝不在报告中打印凭据
• EnvSync-LE — 比较目录树中的 dotenv 文件，并指出哪些文件缺少哪些键
• Unicode-LE — 查找那些隐藏含义的 Unicode 字符——双向控制字符、不可见字符、同形异义字符、混合文字系统

每款工具都独立运行：没有共享的 crate，也没有发布的核心库。若有两款工具得出相同结论，那是因为这个答案经得起两次验证。

联系 — nolindnaidoo.com · GitHub · LinkedIn

nolindnaidoo 的其他项目

Rust — pixelcoords 和 pixelactions 构成一个工作循环：pixelcoords 回答 位置，pixelactions 在那里执行操作。它们有各自的工具、各自的风格——不属于 LE 系列。

• pixelcoords — 冻结屏幕，标记区域，获取像素级精确的坐标和裁剪图像 pixelcoords.dev · crates.io · docs.rs
• pixelactions — 使用经过人工验证的坐标执行交互，并确认操作已生效 pixelactions.dev · crates.io · docs.rs

许可证

MIT © nolindnaidoo