vscode内置颜色选择器开箱即用，无需安装插件；必须同时满足文件语言模式正确（css/scss/less/html块）、颜色值为标准字面量（如#3a86ff、rgb()、hsl()、命名色）、且"editor.colordecorators": true开启，三者缺一不可。
VSCode 内置颜色选择器开箱即用，不需要装插件，但必须满足三个硬性条件：文件语言模式正确、颜色值是标准字面量、editor.colorDecorators 设置为 true；不满足任一条件，点再多次也弹不出来。
怎么确认颜色值能被识别？看左边有没有小色块
只要写的是标准格式（如 #3a86ff、rgb(255, 107, 53)、hsl(200, 100%, 50%) 或 rebeccapurple），且文件语言模式是 CSS / SCSS / Less / HTML（仅限 <style></style> 块内），左侧就会自动出现一个带边框的小色块。
- 鼠标悬停上去能看到 RGB/HSL 值，说明已被识别
- 点击这个色块是最稳的唤起方式，比快捷键更可靠
- 如果没色块，先检查右下角状态栏显示的是不是
CSS，不是就点它手动切换 -
var(--primary)、$accent、color-mod()这类写法永远不显示色块——它们不是颜色字面量，编辑器不解析
Ctrl+Click 没反应？优先排查这三件事
快捷键失效不是功能坏了，大概率卡在环境配置上：
-
editor.colorDecorators被关了：打开设置搜 “Color Decorators”，勾选启用；或直接在settings.json加一行"editor.colorDecorators": true - 插件劫持了点击事件：临时禁用
CSS Peek、Auto Rename Tag、Pigments这类高频样式工具，再试 - 文件被排除在外：检查
files.excludes或search.exclude是否误配了"**/*.css": true这类规则
调色盘弹出来后，哪些操作会影响最终输出格式？
颜色选择器不会乱改你的格式，但有几个关键行为会触发转换：
- 拖动滑块或吸管取色 → 默认保持原上下文格式（
#ff6b35改完还是 HEX） - 手动输入
hsl(200, 70%, 50%)→ 回车后仍为 HSL，不会强制转 HEX - 点右下角
HEX/RGB/HSL按钮 → 只切换当前显示和回填格式，数值精度不变（rgb(255, 107, 53)切成 HEX 就是#ff6b35，不是#ff6b35ff） - 从
#fff开始操作 → Alpha 默认补 1，不会自动转成rgba()；想加透明度得手动拉 Alpha 滑块或输rgba()
为什么 var(--xxx) 和 $color 点不了？这不是 bug，是设计限制
VSCode 的 Pick Color 是静态分析工具，只匹配语法高亮识别的颜色字面量，不做运行时计算或预处理器展开：
-
var(--primary)是个 CSS 函数调用，不是颜色值，原生不支持 -
$primary: #3a86ff这种 SCSS 声明本身也不触发，只有在color: $primary且编辑器已加载 SCSS 语言服务时，才可能渲染出色块（依赖扩展是否做模拟编译） - 想对变量取色，得先跳转到定义处（用
CSS Peek或Go to Definition），再在定义行点颜色值 - 别指望靠一个点击解决所有场景——CSS 变量和预处理器变量的本质是编译期/运行期行为，编辑器无法绕过语法树直接“猜”出结果
最容易被忽略的是语言模式和 colorDecorators 开关，很多人反复试快捷键失败，其实只是右下角写着 “Plain Text” 而已。点那个小色块，比记快捷键靠谱得多。
