必须开启editor.colorDecorators设置，且文件语言模式为css/scss/less，颜色值需为静态可解析格式（如#fff、rgb()等），var()变量不支持；Color Info插件仅显示状态栏文本信息，不提供色块或调色板功能。
Color Info 插件不是 VSCode 内置功能，它不会在颜色值旁显示调色板——这是常见误解。VSCode 原生的调色板（悬停弹出、点击色块唤出）由 editor.colorDecorators 控制，和 Color Info 无关。
为什么装了 Color Info 却没看到调色板？
Color Info 的核心功能是：鼠标悬停在颜色值上时，在状态栏（底部）显示该颜色的 HEX/RGB/HSL 等格式信息，**不渲染色块，也不弹出调色面板**。它不提供取色器、不支持点击编辑、不替换代码。
- 它只输出文本信息，不干预编辑器 UI 装饰（decorator）逻辑
- 即使启用，
#ff0000左侧依然不会出现小色块——那是colorDecorators.enabled的职责 - 如果你期待“点一下就调色”，那你要用的是原生能力，不是
Color Info
想在颜色值旁显示色块并点击调出调色板，该开哪个设置？
必须确保以下三项同时满足：
-
editor.colorDecorators设置为true（全局或工作区） - 当前文件语言模式是
css、scss、less或postcss（右下角确认，不是plaintext或html） - 颜色写法是静态可解析的：
#abc、rgb(255, 0, 0)、hsl(0, 100%, 50%)、red——var(--c)、$color、currentColor不会触发
Color Info 和原生 colorDecorators 同时启用会冲突吗？
一般不会直接冲突，但容易混淆职责：
-
Color Info在状态栏显示格式文本，不影响色块或悬停调色板 - 但若你禁用了
colorDecorators，又装了Color Info，就会误以为“颜色功能失效”——其实只是你关掉了真正负责预览的开关 - 某些旧版
Color Info曾尝试注入装饰器，但现代版本已收敛为纯信息提示，建议用 v0.11.5+ 版本
真正影响色块和调色板是否出现的，只有 editor.colorDecorators 和语言上下文。插件再热闹，也绕不开这个底层开关——它被关掉，所有视觉反馈就归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
