VSCode原生支持颜色选择与预览：启用"editor.colorDecorators":true后，在CSS等文件中写#ff6b6b等颜色值会自动显示色块，点击可调出图形化调色盘，支持HEX/RGB/HSL格式切换及实时更新。
VSCode 自带的颜色选择器和预览功能，能帮你快速选色、实时查看效果，不用切出编辑器或依赖插件——关键在于开启并用对几个设置项。
启用内联颜色预览（自动显示色块）
当你在 CSS、SCSS、Less、PostCSS 或内联 style 属性中写颜色值（如 #ff6b6b、rgb(255, 107, 107)、hsl(0, 50%, 70%)、var(--primary)），VSCode 默认会渲染小色块。如果没看到：
- 确认设置了 "editor.colorDecorators": true（默认开启，可在设置里搜「color decorators」检查）
- 确保当前文件语言模式正确（如 .css 文件右下角显示 “CSS”，不是 “Plain Text”）
- 自定义变量（如 CSS custom properties）需配合扩展（如 CSS Peek 或 Color Info）才能识别并预览
点击调出颜色选择器（支持多种格式切换）
把光标放在颜色值上，点击左侧出现的小色块，就会弹出图形化调色盘：
- 可拖动调节 HSL/HSV 滑块，或直接输入 HEX/RGB/HSL 值
- 底部有格式切换按钮：HEX（#rrggbb / #rgb）、RGB、HSL、甚至支持透明度（HEXA / RGBA）
- 修改后按回车或点外侧自动更新代码中的颜色值，原地生效
支持的颜色语法范围
原生支持以下写法的识别与预览：
- 十六进制：
#fff、#ffffff、#ff6b6b80（含 alpha） - 函数式：
rgb(255, 107, 107)、rgba(255, 107, 107, 0.8)、hsl(0, 50%, 70%)、hsla(...) - 颜色名：
red、cornflowerblue等标准 CSS 颜色名（共 140+） - 不支持原生解析：
color(display-p3 ...)、lab()、lch()（需插件扩展）
增强体验的小技巧
让颜色工作流更顺手：
- 快速复制颜色值：右键色块 → “Copy Color Value”，可选 HEX/RGB/HSL 格式
-
高亮同色所有实例：鼠标悬停色块上，相同颜色的其他位置会高亮（需开启
"editor.colorDecorators": true） -
禁用/启用快捷预览：按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（Mac），输入 “Toggle Color Decorators” 即可开关 - 想在 JSON、Markdown 或 Vue template 中也用？安装 Color Highlight 或 Colorize 类插件补足
基本上就这些——不需要装一堆插件，VSCode 原生的颜色工具已经足够日常开发使用，关键是知道它在哪、怎么触发、哪些能识别。
