在 VSCode 中，将光标停在支持的颜色值上并按 Ctrl/Cmd+Click 可唤出原生颜色选择器；仅限 CSS/SCSS/JS 等语言中被识别为颜色上下文的位置生效，不支持注释、JSON 或格式错误的字符串。
VSCode 里怎么唤出颜色选择器
直接在支持颜色的配置项或 CSS/SCSS/JS 字符串中，把光标停在颜色值上（比如 #ff0000、rgb(255, 0, 0)、blue），按 Ctrl+Click（Windows/Linux）或 Cmd+Click（macOS）就能弹出取色器面板。不是所有地方都支持——只有编辑器识别为“颜色上下文”的位置才响应。
常见不生效的场景：
• 字符串里带额外空格或换行，如 " #ff0000 "
• 颜色写在注释里
• 使用了非标准前缀（如 my-color: #ff0000; 但没定义该变量为颜色类型）
• 在 JSON 文件里写颜色值（除非是已知颜色字段，如 "color": "#ff0000"）
支持哪些颜色格式？为什么改完格式会变
取色器默认以当前上下文格式输出：你在 .css 里点 hsl(120, 100%, 50%)，调色后仍保持 HSL；在 .scss 中点 $primary 变量，它不会展开，而是直接修改变量值（需变量本身被识别为颜色）。
格式自动转换的触发条件：
• 编辑器检测到颜色值处于“可解析”且“有明确格式声明”的上下文
• 你手动切换取色器右下角的格式按钮（HEX / RGB / HSL / NAME）
• 某些插件（如 Color Highlight）干扰了原生行为，导致格式强制归一化
注意：rgba() 和 hsla() 的 alpha 通道在取色器里是独立滑块，但如果你从 HEX 开始操作，它默认补全为 rgba(r,g,b,1)，不会自动转成带透明度的 HEX（#RGBA 不被所有地方支持）。
为什么点了没反应？常见兼容性问题
原生取色器依赖 VSCode 的语言服务支持，不是所有语言模式都启用：
- CSS/SCSS/Less/Sass：完全支持
- HTML
style属性和style标签内：支持 - JavaScript/TypeScript 字符串中颜色字面量（如
element.style.color = "#000"）：部分支持，取决于语法高亮是否标记为support.constant.color - JSON、YAML、Markdown：基本不支持，除非用扩展（如 Settings Sync 或特定主题配置文件）
如果确认位置正确却无响应：
• 检查右下角语言模式是否为预期类型（如显示“Plain Text”就要先切到 CSS）
• 关闭可能劫持颜色行为的插件（如 Color Picker、Pigments，它们会覆盖原生功能）
• VSCode 版本低于 1.72 时，对 CSS 自定义属性（--main-color）的支持较弱
取色器改完颜色，但预览不更新？
VSCode 的颜色预览（小方块 + 悬浮色板）只是静态快照，不实时绑定 DOM 或运行时效果。它只反映当前文件中该字符串的值，不会触发浏览器重绘或样式热更新。
真正影响运行效果的只有：
• 保存文件后，浏览器 DevTools 是否同步刷新（需开启 Live Server 或 HMR）
• CSS-in-JS 库（如 styled-components）是否监听了 JS 字符串变更
• 主题色变量（如 editor.foreground）需要重启窗口或重载主题才能生效
容易忽略的一点：取色器修改的是文本内容，不是变量引用。比如你点了 $accent 并调色，实际改的是变量赋值语句（$accent: #ff6b6b;），但如果其他地方用的是 lighten($accent, 10%)，那计算结果仍由 Sass 编译时决定，不是取色器能实时联动的。
