原生 VSCode 不支持 CSS 悬停颜色预览，需安装 Color Highlight 插件；它轻量稳定，支持标准颜色写法及配置化 CSS 变量识别，但不跨文件解析、不递归解析 var()。
VSCode CSS悬停显示颜色预览需要什么插件
原生 VSCode 不支持在 CSS 中悬停显示颜色值（如 #ff6b35 或 rgb(255, 107, 53) 的可视化色块），必须依赖插件。最稳定、轻量、无广告的是 Color Highlight，不是 Color Picker 或 Pigments（后者已多年未更新，且在新版本 VSCode 中常失效）。
- Color Highlight 插件体积小、仅做高亮+悬停，不改编辑器行为
- 它能识别所有标准 CSS 颜色写法：
#abc、#aabbcc、rgb()、rgba()、hsl()、hsla()、color-mix()（CSS Color 4）、甚至 CSS 变量中的var(--primary)（需配合colorizeVariables设置） - 安装后无需重启，但需确认工作区没禁用该插件（检查右下角状态栏是否有「CH」图标）
为什么写了颜色却没出现悬停色块
常见不是插件问题，而是颜色写法或上下文不被识别：
- 写在
@keyframes或@media嵌套规则里？Color Highlight 默认支持，但若用了非标准语法（如未闭合的括号），会跳过整段解析 - 颜色值带空格或换行，比如
rgb( 255 , 107 , 53 )—— 它支持，但若写成rgb(255\n,107,53)（换行在括号内），部分版本会漏识别 - 用了 CSS-in-JS 或模板字符串（如
styled.div`background: ${theme.bg}`）—— Color Highlight 默认不处理 JS/TS 文件里的字符串，需手动开启colorHighlight.languages配置并加入javascript、typescript等 - 主题为高对比度模式（如 Windows 高对比主题），可能强制禁用所有颜色渲染 —— 检查 VSCode 设置里
workbench.colorTheme是否为High Contrast
如何让 CSS 变量（--main-color）也显示悬停色块
Color Highlight 默认不解析自定义属性的值，除非你告诉它哪些变量存的是颜色：
- 在
settings.json中添加："colorHighlight.languages": ["css", "scss", "less", "javascript", "typescript"], "colorHighlight.colorDecorators": true, "colorHighlight.colorInfo": true, "colorHighlight.colorizeVariables": ["--.*-color", "--bg.*", "--text.*"]
-
colorizeVariables是正则数组，匹配变量名；不要写.*全开，否则性能下降明显（尤其大项目） - 确保变量本身赋值合法，比如
--primary: #007acc;✅，而--primary: var(--fallback, #000);❌（嵌套var()当前不支持递归解析） - 如果变量定义在外部文件（如
vars.css），而使用在main.css，插件不会跨文件追踪 —— 它只看当前文件内是否定义了匹配的:root或选择器下的--xxx
悬停显示的 RGB/HEX 值能复制吗？怎么快速取色
不能直接点击复制，但有更顺手的方式：
- 悬停后按
Ctrl+Click（Windows/Linux）或Cmd+Click（Mac）可跳转到该颜色定义处（如果它是变量或复用值） - 想复制当前值？把鼠标悬停在颜色上，等色块出现后，用快捷键
Ctrl+Shift+P（Mac 为Cmd+Shift+P）打开命令面板，输入Copy Color，选中「Copy Color as Hex」或「as RGB」即可 - 注意：这个
Copy Color命令来自 Color Highlight 插件，不是 VSCode 内置功能；如果没反应，说明插件未启用或快捷键被其他插件覆盖 - 别依赖右键菜单 —— Color Highlight 没加右键项，有些用户误装了带右键的山寨插件，反而导致悬停失效
真正卡住人的地方，往往不是插件装没装，而是变量正则写太宽泛导致 CPU 占用飙升，或者以为它能跨文件解析 CSS 变量 —— 它不能。悬停只是当前文件的静态分析，不是运行时求值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
