sublime怎么实现自动提取颜色值_sublime安装ColorHighlight插件【技巧】

Sublime Text 4 内置颜色高亮功能已替代废弃的 ColorHighlighter 插件，启用需满足版本≥4126、语法支持及主题正常加载；颜色值自动渲染为色块并悬停显示；提取颜色推荐正则查找+批量复制，转换需借助外部工具。

ColorHighlighter 插件不维护了，别装它

Sublime Text 4 内置的 Color Highlighter 功能已替代旧版第三方插件，强行安装废弃的 ColorHighlight（如 GitHub 上那个 2016 年停更的）会导致颜色不渲染、CSS 语法高亮错乱，甚至触发 AttributeError: 'NoneType' object has no attribute 'scope_name' 报错。

启用 Sublime 自带的颜色高亮（ST4+）

无需额外插件，只要确保：

• Sublime Text 版本 ≥ 4126（推荐用最新稳定版）
• 当前文件使用了支持颜色解析的语法（如 CSS、SCSS、LESS、PostCSS、HTML、JSX、Vue 等）
• Preferences → Settings 中未禁用 "color_scheme": "..."（即主题正常加载）

颜色值（如 #ff0、rgb(255,0,0)、hsl(0,100%,50%)、var(--primary)）会自动渲染为小色块，并悬停显示 HEX/RGB 值。

提取颜色值？靠正则 + 快速查找更可靠

Sublime 没有“一键提取所有颜色到剪贴板”的内置命令，但可高效手动提取：

• 按 Ctrl+F（Win/Linux）或 Cmd+F（macOS），输入正则：

  \b(?:#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})|rgb\([^)]+\)|rgba\([^)]+\)|hsl\([^)]+\)|hsla\([^)]+\)|var\([^)]+\))\b

• 勾选 .*（正则模式）、A（全字匹配可选）
• 点击 Find All，所有匹配项被选中 → Ctrl+Shift+P 输入 Copy Selected Text 即可批量复制
• 若需去重，复制后粘贴到新标签页，用 Ctrl+H 替换 \r?\n 为空格，再用 Ctrl+Shift+P 运行 Sort Lines (Unique)

想自动转 HEX / RGB？得靠外部工具链

Sublime 不处理颜色计算，但可配合外部命令快速转换：

• 安装 jq + node 后，用 Tools → Build System → New Build System 写个简单脚本，把选中的 rgb(255,0,0) 传给 Node.js 脚本转成 #ff0000
• 更轻量的做法：用浏览器控制台执行 new DOMParser().parseFromString('', 'text/html').body.firstChild.style.color，结果是标准化后的 rgb(255, 0, 0) 或 #ff0000
• 注意：CSS 变量（var(--color-primary)）无法被静态解析，必须运行时环境才能取值

颜色提取不是编辑器该干的活，别指望插件包打天下 —— 正则筛出候选，浏览器或 CLI 做归一化，才是稳的。