ColorHelper插件可提升Sublime Text中颜色处理效率。1. 通过Package Control安装后自动启用;2. 编辑CSS等文件时实时显示颜色色块,悬停预览并支持点击操作;3. 按Ctrl+Shift+C调出内置颜色选择器,支持HSL、RGB调节与拾色;4. 可在HEX、RGB、RGBA、HSL、HSLA、命名色间一键转换;5. 支持创建自定义调色板文件供团队共享主色与辅助色;6. 默认适配多种前端语言,可在设置中调整预览方式与匹配规则。

ColorHelper 是 Sublime Text 中一个非常实用的插件,能帮助你在编辑 CSS、SCSS、LESS 或其他支持颜色值的文件时,实时预览颜色、快速选择调色板、转换颜色格式。它让处理颜色变得更直观高效。
1. 安装 ColorHelper 插件
确保你已安装 Package Control,然后:
- 按下 Ctrl+Shift+P(Mac 上是 Cmd+Shift+P)打开命令面板
- 输入 “Install Package” 并回车
- 搜索 “ColorHelper” 并安装
安装完成后无需重启,插件会自动启用。
2. 实时颜色预览
当你在代码中写颜色值(如 #ff5722、rgba(255,87,34,0.8)、red 等),ColorHelper 会在颜色旁边显示一个小色块。
- 将鼠标悬停在色块上,会弹出颜色预览浮窗
- 点击色块可打开颜色操作菜单,包括复制颜色、打开调色板、转换格式等
3. 快速调出颜色选择器
想插入或修改颜色时,可以使用内建的颜色选择器:
- 把光标放在颜色值上或空行中准备输入颜色
- 按下 Ctrl+Shift+C(Mac: Cmd+Shift+C)
- 弹出颜色选择面板,支持 HSL、RGB 滑块和拾色器
- 选好颜色后自动插入到文档中
4. 颜色格式转换
ColorHelper 支持多种颜色格式之间的快速切换:
- 悬停颜色并点击色块
- 在弹出菜单中选择 “Convert to…”
- 可转换为 HEX、RGB、RGBA、HSL、HSLA、Named Color(如有)等格式
比如把 rgb(255, 87, 34) 一键转成 #ff5722,方便统一项目规范。
5. 自定义调色板(Palette)
你可以设置常用颜色列表,在项目中快速访问:
- 创建
ColorHelper.sublime-colors文件(可通过命令面板新建) - 添加自定义颜色数组,支持 HEX、RGB 等格式
- 保存后在颜色菜单中即可看到“Palette”选项
适合团队共享设计系统中的主色、辅助色。
6. 支持的语言与配置
默认支持 CSS、SCSS、LESS、JavaScript、HTML 等。你可以在 Preferences → Package Settings → ColorHelper → Settings 中调整行为:
- 开启/关闭自动预览
- 调整色块显示位置(行尾 or 内联)
- 添加自定义颜色正则匹配规则
基本上就这些。ColorHelper 不复杂但容易忽略细节,用熟了能显著提升样式编写效率。










