VSCode中的颜色选择器与实时预览工具

VSCode原生颜色选择器支持HEX/RGB/HSL模式切换，光标置于颜色值上Ctrl/Cmd+Click调出；色块预览可悬停查看多格式值、点击复制，配合Live Server实现保存即刷新。

VSCode 自带的颜色选择器和实时预览功能，能帮你快速选色、即时看到效果，不用反复切窗口或手动改 HEX 值。

颜色选择器怎么调出来

把光标放在任意颜色值上（比如 #ff6b35、rgb(255, 107, 53)、hsl(14, 100%, 60%) 或 blue），按 Ctrl+Click（Windows/Linux）或 Cmd+Click（Mac）就能唤出内置色盘。支持 HEX、RGB、HSL 模式切换，拖动滑块或点击色板直接修改，回车确认后自动更新代码。

• 只对 CSS、SCSS、Less、HTML style 属性、JS/TS 字符串中的标准颜色语法生效
• 如果没反应，检查是否启用了 Color Highlight 扩展（VSCode 默认已启用颜色识别）
• 主题色变量（如 var(--vscode-editor-foreground)）不支持点击调色，需查主题定义

实时预览颜色效果

颜色值旁会显示一个小色块预览（默认开启），悬停还能看到 RGB/HSL 数值。这个小方块就是实时预览的入口——它不是装饰，而是可交互的“眼见为实”工具。

Copysmith

Copysmith是一款面向企业的 AI 内容创建解决方案

168 查看详情

• 鼠标移到色块上，会显示当前颜色的多种格式（HEX、RGB、HSL、Name）
• 点击色块可复制该颜色值到剪贴板（快捷高效）
• 在 CSS 中修改颜色后，如果开启了 Live Server 或使用浏览器预览插件，保存即刷新可见变化

增强体验的实用技巧

原生功能够用，但加点小配置或轻量扩展能让效率再提一档：

• 安装 Pigment 扩展：支持更多语言（如 Vue、Svelte 的内联样式）、色板管理、取色器吸附屏幕任意位置
• 开启 Settings → Color Decorators 确保预览色块始终显示（默认开）
• 在 settings.json 中添加 "editor.suggest.showColors": true，让颜色建议出现在智能提示里
• 写 CSS 时输入 color: 后触发建议，直接选预设色名或最近用过的 HEX 值

基本上就这些。不需要装重型工具，VSCode 原生能力已经覆盖了日常调色的核心场景——点一点、看一看、改一改，顺手又稳当。

以上就是VSCode中的颜色选择器与实时预览工具的详细内容，更多请关注其它相关文章！