VSCode颜色选择器是集成在CSS等支持颜色语法的文件中的内联工具，将光标停在有效颜色值上稍候或Ctrl/Cmd+Click即可调出，支持多种颜色格式及实时编辑、吸管取色和历史复用。
VSCode 自带的颜色选择器（Color Picker）不是独立面板，而是集成在 CSS、SCSS、Less、HTML 等支持颜色语法的文件中，通过点击颜色值（如 #ff0000、rgb(255, 0, 0)、hsl(0, 100%, 50%) 或命名色 red）触发的内联工具。
如何打开颜色选择器
将光标停在有效的颜色值上，等待几毫秒出现下划线提示（或直接按 Ctrl+Click / Cmd+Click），即可弹出颜色选择器浮层。也可右键颜色值 → 选择“Pick Color”。
- 支持的颜色格式包括：
#RGB、#RGBA、#RRGGBB、#RRGGBBAA、rgb()、rgba()、hsl()、hsla()、color()（CSS Color Level 4）、以及标准命名色（如tomato、rebeccapurple） - 不支持：变量（如
$primary）、自定义属性（var(--color-primary)）或无语法高亮的纯文本 - 若未响应，请确认文件语言模式正确（如 .css 文件应为 “CSS”，非 “Plain Text”）
颜色选择器的功能与操作
弹出的调色盘支持拖拽选取、输入 HEX/RGB/HSL 值、切换明度/饱和度、预览透明度，并实时更新代码中的颜色值。
- 顶部输入框可手动编辑 HEX（自动补全 # 号）、RGB（逗号分隔）、HSL（括号内数值）
- 滑块区域可分别调节色相（H）、饱和度（S）、亮度（L）或 Alpha（透明度）
- 点击右下角小 eye-dropper 图标可启用吸管工具，从当前 VSCode 窗口任意位置取色（仅限桌面端）
- 已选颜色会加入底部“Recent Colors”历史栏，方便复用
常见问题与优化建议
颜色选择器默认启用，但部分插件或设置可能干扰其行为。遇到无法唤出或显示异常时可检查以下几点：
- 确保 “Editor › Color Decorators” 设置为
true（默认开启，控制颜色方块预览） - 禁用可能劫持点击事件的插件（如某些 CSS 工具类扩展）
- 若使用 Remote-SSH 或 Dev Container，确认远程环境已安装必要依赖（通常无需额外配置）
- 想让所有颜色都带预览方块？可在
settings.json中添加："editor.colorDecorators": true
基本上就这些。它不复杂，但容易忽略——只要写的是标准颜色语法，点一下就能调出来，改色效率翻倍。
