VSCode自带颜色选择器可直接使用，无需插件：光标停在标准颜色值（如#ff0000、rgb()、hsl()、命名色）上，按Ctrl+Click（Win/Linux）或Cmd+Click（macOS），或右键选“Pick Color”即可唤出内联调色盘；仅限CSS/SCSS/HTML等语言模式下被语法识别的位置生效，不支持JSON、Python、注释及CSS变量（如var(--color)）。
VSCode 自带颜色选择器就能满足绝大多数前端取色需求，不需要额外装插件；但如果你在 Python、JSON 或纯文本里写颜色值，才需要补装 ColorPicker 这类第三方扩展。
VSCode 自带 Color Picker 怎么用？
它不是独立面板，而是点击即弹的内联调色盘，只对语法高亮识别的颜色生效。
- 光标停在
#ff0000、rgb(255, 0, 0)、hsl(0, 100%, 50%)或rebeccapurple上，等 200ms 出现下划线，Ctrl+Click（Win/Linux）或Cmd+Click（macOS）直接唤出 - 右键颜色值 → 选
Pick Color更稳定，尤其在多显示器或远程桌面环境下 - 必须确保文件语言模式正确：.css 文件不能是
Plain Text，.scss 文件要设为SCSS，否则不触发 - 支持格式包括：
#RGB、#RGBA、#RRGGBB、#RRGGBBAA、rgb()、rgba()、hsl()、hsla()、color()、标准命名色；不支持var(--primary)或$color变量声明本身
为什么 var(--xxx) 点不了调色盘？
VSCode 原生 Color Picker 不解析 CSS 变量，只匹配字面量颜色值。它不会去读 :root { --primary: #007acc; } 然后把 var(--primary) 映射成实际色值。
- 想点
var(--primary)就调出对应颜色？得靠CSS Peek或Polacode配合跳转定义，再手动复制值过去 -
currentColor和transparent能被识别，但无法弹调色盘——因为没有可调节的 RGB/HEX 值 - SCSS 中
color: $primary能触发的前提是：VSCode 已通过插件（如 Live Sass Compiler）实时编译并注入了最终颜色值，原生不支持变量预处理
Python 文件里怎么让 "#ff0000" 显示颜色块？
原生不支持，必须装扩展。推荐 ColorPicker（JunHan 开发），不是 VSCode 官方那个同名扩展。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 安装后，在 Python 文件中写
color = "#ff0000"，下方会自动出现小色块；悬停→点击即可打开调色盘 - 它支持的格式和原生一致，但识别逻辑更宽松：能从字符串字面量中抽取出
rgb(255, 0, 0)、"#abc"等，不依赖 CSS 语法高亮 - 注意别和
ColorHighlight混用——后者只显示色块、不带调色盘；两者共存可能造成渲染冲突或点击失效 - 如果调色盘弹出后卡死、无法拖拽或失焦关闭，先禁用所有 UI 类扩展（尤其是主题、背景图类），再检查系统级快捷键是否劫持了
Cmd+Alt+C（macOS）或Ctrl+Alt+C（Win）
调色盘弹出来却没反应，焦点丢了怎么办？
这是 Electron 渲染层的焦点管理问题，不是插件 bug，常见于 Wayland 会话、Windows 高对比度模式、某些 NVIDIA 驱动或远程桌面环境。
- 最稳操作：先左键点击编辑器任意位置，再右键颜色值 →
Pick Color - Linux 用户若用 Wayland，换 X11 会话基本解决；Windows 用户关掉“高对比度模式”
- VSCode 设置里加
"window.experimental.useSandbox": false并重启，可缓解 WebView 卡死 - 不要指望它支持吸管跨窗口取色——
eye-dropper图标只能从当前 VSCode 窗口内取，且仅限桌面端
真正容易被忽略的是：颜色值必须“被识别为颜色”，而不是“看起来像颜色”。哪怕写得再标准，如果文件类型不对、扩展冲突、或系统渲染层异常，它就只是段普通文本——点十次也不会弹窗。
