ColorHelper是sublime Text中推荐的颜色预览插件，因ColorPicker已停止维护、不支持ST4及现代颜色语法；ColorHelper支持20+颜色格式、多语言识别、实时预览与同步高亮。
sublime text 本身不内置颜色预览功能，但通过插件可以实现——ColorHelper 是目前最稳定、兼容性最好、支持最全的方案；ColorPicker 则早已停止维护，且在 Sublime Text 4 下基本不可用。
为什么 ColorPicker 不推荐用了
ColorPicker 依赖系统原生调色板，只支持 #RRGGBB 和 rgb() 等极少数格式，无法识别 hsl()、rgba()、css 变量（var(--color)）、Tailwind 的 bg-blue-500 等现代写法。它最后一次更新是 2018 年，Sublime Text 4 启动时会报 ImportError: No module named 'winreg'（windows）或直接崩溃（macos/linux）。
ColorHelper 安装与基础启用
确保已安装 Package Control，然后按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 Package Control: Install Package，再搜索并安装 ColorHelper。
安装后无需额外配置，默认即生效：只要光标停在任意合法颜色代码上（如 #3b82f6、hsl(210, 75%, 50%)、oklch(65% 0.21 250)），右侧边缘就会自动出现小色块预览；按 Alt+Shift+C（Windows/Linux）或 Opt+Shift+C（macOS）可呼出完整调色面板。
- 支持 20+ 种颜色语法：HEX、RGB(A)、HSL(A)、HWB、LAB、OKLCH、CMYK、命名色（
rebeccapurple）等 - 能识别 CSS、SCSS、less、JS(X)、TS(X)、html、vue、Svelte 文件中的颜色声明
- 按住
Ctrl（Windows/Linux）或Cmd（macOS）再悬停，可临时禁用预览
常见颜色不显示预览？检查这几点
不是所有带“#”或“rgb”的字符串都会被识别为颜色——ColorHelper 依赖语法高亮作用域（scope）判断上下文。如果预览失效，优先排查：
- 当前文件是否被正确识别为对应语言？检查右下角状态栏是否显示
CSS、javaScript等，而非Plain text；若不对，右键 →Set Syntax→ 选择正确语法 - 颜色写法是否超出支持范围？例如
color: var(--primary);默认不解析变量值，需在Preferences → Package Settings → ColorHelper → Settings中启用"enable_color_variables": true - 是否在字符串字面量内部？比如
console.log("#ff0000")—— 默认不激活，可在设置中开启"scan_strings": true（但会轻微影响性能） - 自定义配色主题是否覆盖了预览样式？尝试切换回默认主题
Adaptive测试
快速修改颜色值的实操技巧
比起打开调色器再复制粘贴，ColorHelper 提供更高效的编辑流：
1. 光标置于颜色值上（如 #6366f1） 2. 按 Alt+Shift+C 呼出面板 3. 直接拖动 HSL 滑块 / 输入新 HEX / 点击色盘取色 4. 按 Enter 确认，原位置自动替换，且所有同色实例（如其他 #6366f1）同步高亮（需开启 "color_highlighting"）注意：批量替换依赖 "color_highlighting" 设置，默认开启；若关闭了，需手动开启，否则改完一个，别处不会高亮提示。
真正麻烦的从来不是装插件，而是搞不清哪些颜色能被识别、哪些上下文被忽略、哪些设置项实际影响体验——ColorHelper 的配置项虽多，但绝大多数保持默认即可，只需盯住 enable_color_variables 和 scan_strings 这两个开关，就能覆盖 95% 的真实开发场景。