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 做归一化,才是稳的。










