Color Highlight插件可在vscode中为css、scss、less等文件中的颜色值实时渲染小色块。需通过扩展市场安装，支持十六进制、RGB、HSL等格式，默认启用；可自定义语言支持、调整色块尺寸、禁用特定语言高亮。
如果您在VSCode中编辑CSS、SCSS、Less或内联样式时，希望直接看到颜色值对应的实际色块效果，则Color Highlight插件可将十六进制、RGB、HSL等颜色字符串实时渲染为小色块。以下是启用与配置该插件的具体操作：
本文运行环境：macBook air，macOS Sequoia。
一、安装Color Highlight插件
该插件需通过VSCode扩展市场获取并启用，安装后即可自动识别支持的颜色语法格式，无需额外激活命令。
1、打开VSCode，点击左侧活动栏最下方的扩展图标（四个方块组成的图标）。
2、在扩展搜索框中输入Color Highlight，确认作者为sergeche。
3、点击“安装”按钮，等待状态变为“已启用”。
二、验证颜色高亮是否生效
插件默认启用全部颜色格式识别，安装完成后立即对当前打开的CSS/html/SCSS文件生效，无需重启编辑器。
1、新建一个.css文件，输入内容：.box { background: #ff6b6b; color: rgb(100, 150, 200); }。
2、观察#ff6b6b与rgb(100, 150, 200)右侧是否出现对应颜色的小矩形标识。
3、若未显示，检查右下角状态栏是否显示“Color Highlight: Disabled”，若是，点击该提示并选择“Enable for this workspace”。
三、自定义支持的颜色格式
插件允许用户手动添加正则表达式以识别非标准颜色写法，例如自定义函数调用或设计系统变量。
1、按下Cmd+,打开设置界面，切换至“Extensions” → “Color Highlight”。
2、找到colorHighlight.languages设置项，点击“Edit in settings.json”。
3、在settings.json中添加如下配置：“colorHighlight.languages”: [“css“, “scss”, “html“, “javascript“]。
四、调整色块显示位置与尺寸
插件默认在颜色文本右侧显示16×16像素色块，可通过配置修改其大小、透明度及对齐方式。
1、在设置搜索栏中输入colorHighlight.colorPreviewWidth。
2、将数值改为24，使色块更清晰可见。
3、再搜索colorHighlight.colorPreviewHeight，同样设为24。
五、禁用特定语言中的颜色高亮
某些语言（如json配置文件）中出现颜色值仅为字符串，无需视觉化，可针对性关闭以避免干扰。
1、打开命令面板（Cmd+Shift+P），输入并选择“Preferences: Configure Language Specific Settings…”。
2、选择json语言，在弹出的json设置块中添加：“colorHighlight.enabled”: false。
3、保存文件，重新打开任意.json文件，确认颜色值不再渲染色块。