ColorHelper 是 Sublime Text 4 唯一稳定适配的颜色插件,支持全格式解析、实时预览和跨语言高亮;需正确设置语法作用域与快捷键,否则预览不显示或快捷键失效。

ColorPicker 在 Sublime Text 4 上根本不能用
别折腾了——ColorPicker 插件早在 2018 年就停止维护,不支持 Sublime Text 4 的 Python 3.8+ 运行环境。你在 ST4 里装上它,大概率会遇到:ImportError: No module named 'winreg'(Windows)或启动直接崩溃(macOS/Linux)。它连 hsl()、rgba()、var(--color)、bg-blue-500 都识别不了,只认老式 #RRGGBB 和 rgb(),现代前端项目基本失效。
该换 ColorHelper:ST4 唯一靠谱的颜色插件
现在唯一稳定、持续更新、真正适配 ST4 的颜色工具是 ColorHelper。它不是“另一个拾色器”,而是带实时预览 + 全格式解析 + 跨语言高亮的完整方案。
- 安装:按
Ctrl+Shift+P(Win/Linux)或Cmd+Shift+P(macOS),输入Package Control: Install Package→ 搜ColorHelper→ 回车 - 开箱即用:光标停在
#3b82f6、oklch(65% 0.21 250)、rebeccapurple上,右侧自动出小色块 - 呼出调色面板:按
Alt+Shift+C(Win/Linux)或Opt+Shift+C(macOS) - 想让
var(--primary)也预览?进Preferences → Package Settings → ColorHelper → Settings,把"enable_color_variables": true打开
快捷键冲突?先查 User keymap 再动手
很多人装完 ColorHelper 按 Alt+Shift+C 没反应,不是插件坏了,是快捷键被你自己的配置劫持了。ST 的用户快捷键文件路径是:C:\Users\XXX\AppData\Roaming\Sublime Text\Packages\User\Default (Windows).sublime-keymap(Win)或 ~/Library/Application Support/Sublime Text/Packages/User/Default (OSX).sublime-keymap(macOS)。
- 打开这个文件,搜
alt+shift+c或ctrl+shift+c,看有没有其他命令占着 - 如果有,删掉那条,或改成比如
alt+ctrl+shift+c - 改完保存,不用重启,立刻生效
- 顺手装个
FindKeyConflicts插件,以后一键扫冲突
预览不显示?90% 是语法识别错了
ColorHelper 不是靠正则硬匹配颜色字符串,而是依赖 Sublime 的语法作用域(scope)。如果右下角状态栏显示的是 Plain text 而不是 CSS、SCSS、Vue 等,它压根不会启动颜色分析。
- 右键 →
Set Syntax → CSS(或对应语言) - Vue 单文件组件中
<style>块要确保用了source.css.postcss或source.css.scss语法(不是source.css) - JSX/TSX 里写
color: '#3b82f6',得确认当前文件被识别为JavaScript React或TypeScriptReact - 悬停时按住
Ctrl(Win/Linux)或Cmd(macOS)可临时禁用预览——这是调试是否被误触发的好办法
ColorPicker 只会浪费时间;而 ColorHelper 的配置项和作用域依赖,恰恰是它强大但容易被忽略的复杂点——别跳过语法设置和 keymap 检查,这两步卡住的人最多。










