color highlight 和 colorize 是 vs code 中真正实现颜色值与色块直观对应的高亮插件；前者开箱即用支持 css 等语言中各类颜色字符串实时渲染，后者进阶支持框架模板中变量绑定的颜色预览，二者可共存但需关闭重复 hover 功能。
Color Highlight 和 Colorize 是目前 VS Code 中真正能“一眼看出颜色值对应色块”的高亮插件，其他多数所谓“颜色高亮”插件只是加个背景色或简单渲染，实际开发中容易误判。
为什么 Color Highlight 是首选
它直接解析 CSS、SCSS、Less、PostCSS 甚至内联 style 属性里的颜色字符串（如 #ff6b35、rgb(255, 107, 53)、hsl(14, 100%, 60%)、var(--primary)），并在编辑器里实时渲染出对应色块，不依赖语言服务或额外配置。
常见错误现象：装了插件但没生效——大概率是文件没识别为对应语言（比如 .css 文件被识别成 plain text），检查右下角语言模式是否正确；或者用了自定义变量但没配 colorHighlight.customColors 支持。
- 支持 CSS 变量高亮需手动添加配置项：
"colorHighlight.customColors"，否则var(--bg)类型不会渲染 - 对 Tailwind 的
bg-red-500等类名默认不处理，得靠Colorize或配合Tailwind CSS IntelliSense - 性能影响极小，即使打开 500 行 CSS 文件也无卡顿
Colorize 更适合前端工程化场景
它不止高亮颜色字面量，还能识别框架模板中的颜色绑定，比如 Vue 的 :style="{ backgroundColor: themeColor }" 或 React 的 style={{ color: primaryColor }}，只要变量值是合法颜色字符串，就能在 hover 时显示色块预览。
使用场景：组件库开发、主题切换调试、设计系统落地验证。
- 需要启用
colorize.enableHover才能在 hover 时看到色块 - 对 JS/TS 中的字符串拼接颜色（如
`#${r}${g}${b}`）不支持，仅支持静态字面量或明确赋值的常量 - 和
ESLint/Stylelint无冲突，但若同时启用多个颜色插件，建议禁用Color Highlight的 hover 功能，避免重复弹窗
别踩坑：TODO Highlight 和 Highlight Matching Tag 不是颜色高亮插件
名字带 “Highlight” 容易混淆，但它们完全无关：
-
TODO Highlight只处理// TODO、/* FIXME */这类注释标记 -
Highlight Matching Tag专注 HTML/XML 标签对高亮，和颜色毫无关系 - 装错插件后发现“颜色没变”，第一反应不是插件坏了，而是装错了工具
真正要解决“代码里颜色看不见、调不对、协作时猜不准”这个问题，Color Highlight 是开箱即用的底线，Colorize 是进阶补充。两者可以共存，但得关掉重复功能项，否则 hover 色块会叠两层。
