Color Highlight插件可在VSCode中为CSS、SCSS及内联样式中的颜色代码实时渲染色块预览；需安装插件、启用功能并配置语言支持与显示样式。
如果您在vscode中编辑css、scss或内联样式时，希望直接看到颜色代码对应的实际颜色效果，则color highlight插件可实现该功能。以下是启用并优化该插件显示效果的步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装Color Highlight插件
Color Highlight插件需通过VSCode扩展市场安装，安装后即可自动识别常见颜色格式并渲染为色块。该插件支持十六进制、RGB、RGBA、HSL、HSLA、预定义颜色名称等多种格式。
1、打开VSCode，点击左侧活动栏中的扩展图标（四个方块组成的图标）。
2、在扩展搜索框中输入Color Highlight。
3、在搜索结果中找到作者为sergeche的插件，点击“安装”按钮。
4、安装完成后点击“重新加载”使插件生效。
二、启用颜色高亮显示
插件默认启用基础颜色识别，但部分格式（如CSS变量、自定义函数）需手动开启支持。启用后，所有匹配的颜色值旁将出现小色块预览。
1、按下Cmd + ,（macOS）打开设置界面。
2、在搜索框中输入color highlight。
3、勾选Color Highlight: Enabled选项。
4、确保Color Highlight: Languages中包含当前文件类型，例如css、scss、html等。
三、自定义颜色显示样式
Color Highlight允许调整色块大小、位置及边框样式，以适配不同主题与编辑习惯。修改配置后无需重启，实时生效。
1、按下Cmd + Shift + P打开命令面板。
2、输入并选择Preferences: Open Settings (JSON)。
3、在settings.json中添加以下配置项：
4、设置色块尺寸："colorHighlight.size": 16。
5、设置色块位置："colorHighlight.position": "right"（可选值为left/right/both）。
6、设置是否显示边框："colorHighlight.border": true。
