VSCode 内置颜色选择器可通过命令面板、内联色块点击、自定义快捷键及 CSS 变量支持四种方式激活：Cmd+Shift+ P 输入 Pick Color、悬停点击颜色预览块、绑定 Opt+ C 等快捷键、在 CSS 变量值处调用，支持 HSV/RGB/HSL 实时编辑与格式保持。
如果您在使用 VSCode 编辑 CSS、SCSS、HTML 或其他支持颜色值的文件时，希望快速选取或调整颜色，但未启用或未熟练使用内置颜色选择器，则可能错失高效编辑体验。以下是激活与运用该功能的多种方式：
本文运行环境：MacBook Air M2，macOS Sequoia。
一、通过命令面板调用颜色选择器
VSCode 内置的颜色选择器可通过命令面板统一触发，适用于任意光标位于颜色值（如 #ff0000、rgb(255, 0, 0)、blue）的位置，无需安装扩展即可使用。
1、将光标置于颜色值内部（例如 #3a86ff 中的任意字符上）。
2、按下 Cmd + Shift + P（macOS）或 Ctrl + Shift + P（Windows/Linux）打开命令面板。
3、输入 Pick Color，选择 Developer: Pick Color 命令。
4、颜色选择器弹窗出现后，可拖动色相滑块、调整饱和度与亮度，或直接点击取色器吸管图标吸取屏幕任意位置颜色。
二、使用内联颜色预览快速编辑
当编辑器启用了颜色预览功能，颜色值旁会显示对应色块，点击该色块可直接唤起颜色选择器，实现所见即所得的微调。
1、确保设置中已启用颜色预览：“editor.colorDecorators”: true（默认开启）。
2、在代码中定位到颜色值，例如 background-color: #8ac926;。
3、将鼠标悬停于颜色值右侧的小色块上，点击该色块。
4、颜色选择器窗口展开，支持 HSV/RGB/HSL 模式切换，并可输入十六进制值实时同步。
三、通过快捷键直接唤起取色器
在支持颜色编辑的语法上下文中，VSCode 允许为颜色选择器绑定专属快捷键，跳过命令面板步骤，提升响应速度。
1、进入设置界面，搜索 keyboard shortcuts 并打开快捷键设置。
2、在搜索框中输入 pick color，找到 Developer: Pick Color 条目。
3、双击该条目右侧的空白区域，按下自定义组合键，例如 Opt + C。
4、保存后，在任意颜色值处按此快捷键，立即激活颜色选择器。
四、在 CSS 变量中使用颜色选择器
当项目采用 CSS 自定义属性管理主题色（如 –primary: #ff6b6b;），颜色选择器仍可识别并编辑变量值，前提是变量被正确解析为颜色上下文。
1、确保文件语言模式为 CSS 或 SCSS（右下角状态栏确认）。
2、在声明语句中将光标置于变量值部分，例如 –accent: hsl(200, 100%, 50%); 的 hsl(200, 100%, 50%) 区域内。
3、执行命令面板调用或快捷键操作，颜色选择器将自动解析当前 HSL 值并映射至交互界面。
4、调整后确认，新值以原始格式（如 HSL）写回，保持语法一致性。
