GutterColor插件可在Sublime Text的行号区以小色块形式实时显示颜色代码对应的实际颜色，支持十六进制、RGB/RGBA、HSL/HSLA及常见颜色名称，通过Package Control安装后立即生效，无需重启，显著提升前端开发中对颜色的识别效率。
在使用 Sublime Text 编辑代码时，经常会遇到颜色值，比如 #FF5733、rgb(255, 0, 128) 或 rgba(0, 255, 0, 0.5)。每次想确认这个颜色到底长什么样，都要切换到设计工具或浏览器，非常麻烦。其实，通过一个轻量又高效的插件——GutterColor，你可以在 Sublime 中直接预览颜色代码对应的实际颜色，提升编码效率。
什么是 GutterColor 插件？
GutterColor 是一款专为 Sublime Text 设计的插件，它能在编辑器的行号区（即“gutter”区域）中，以小色块的形式显示当前行中存在的颜色代码。只要代码里包含合法的颜色值，左侧就会自动出现对应的彩色圆点，一目了然。
支持的颜色格式包括：
- 十六进制：#FFF、#FFFFFF、#fff、#ffffff
- RGB/RGBA：rgb(255, 0, 0)、rgba(255, 255, 0, 0.3)
- HSL/HSLA：hsl(120, 100%, 50%)、hsla(0, 100%, 50%, 0.6)
- 常见颜色名称：red、blue、green 等（部分支持）
如何安装 GutterColor
安装过程非常简单，前提是你的 Sublime 已安装 Package Control（大多数用户都已安装）。
- 按下 Ctrl+Shift+P（Mac 上是 Cmd+Shift+P）打开命令面板
- 输入 “Install Package”，选择 “Package Control: Install Package”
- 等待列表加载完成后，搜索 “GutterColor”
- 点击安装即可
安装完成后无需重启，插件会立即生效。
实际使用效果与技巧
安装后，当你在 CSS、SCSS、JavaScript、HTML 等文件中写入颜色值时，左侧 gutter 区域就会出现一个小色块。例如：
.header {
background-color: #3498db; /* 左侧会出现蓝色小点 */
color: rgba(255, 99, 71, 0.8); /* 出现番茄红半透明点 */
}你可以快速判断颜色是否正确，避免混淆相似色值。如果某行没有显示色块，可能是颜色格式不被识别，或语法高亮类型不支持（可尝试切换文件类型为 CSS/SCSS）。
自定义设置（可选）
如果你希望调整色块大小、位置或启用更多颜色格式，可以进入设置：
- 菜单栏选择 Preferences → Package Settings → GutterColor → Settings
- 在用户配置中添加自定义选项，比如开启 hsl 支持或修改图标样式
默认设置已经足够日常使用，一般不需要额外配置。
基本上就这些。GutterColor 虽小，但极大提升了前端开发中对颜色的感知效率，让写样式变得更直观。不复杂，但容易忽略。装上之后，你会发现再也离不开它了。
