vscode 自带颜色选择器和 css 预览功能无需插件：在 CSS/scss/less/postcss 文件中写标准颜色值（如 #fff、rgb()、hsl()、命名色等），左侧即显色块，悬停查看详情，点击打开内置拾色器，支持格式切换与 Alt 批量编辑；需确保语言模式正确且启用 Color Decorators 设置。
VSCode 自带的颜色选择器和 CSS 颜色预览功能，不需要插件就能直接用，关键是要知道怎么触发、在哪显示、以及哪些写法能被识别。
颜色值实时预览（CSS/SCSS/Less/PostCSS）
只要在支持的文件类型中写标准颜色格式，VSCode 会在颜色值左侧显示小色块，悬停还能看到 RGB/HSL 等详细信息。
- 支持的写法包括：
#fff、#ff00aa、rgb(255, 0, 170)、rgba(255, 0, 170, 0.5)、hsl(300, 100%, 50%)、hsla(300, 100%, 50%, 0.5)、red、currentColor等命名色 - 不支持的写法：变量（如
$primary）、自定义函数（如color-mod(red a(50%))）、未解析的 CSS 自定义属性（var(--color-primary)不会预览，除非开启扩展或使用特定设置） - 预览位置：行内颜色值左侧，鼠标移上去会弹出调色板和数值面板
点击色块打开内置颜色选择器
点击任意已识别的颜色预览小方块，就会弹出 VSCode 内置的拾色器——一个简洁的 HSB/RGB 混合调节界面，支持拖拽调整、输入数值、复制 HEX/RGB/HSL。
- 可直接拖动色相环、饱和度-明度矩形，或手动输入 R/G/B/H/S/B 值
- 底部提供常用格式切换按钮：HEX、RGB、HSL、NAME（如
steelblue），点一下就自动替换原代码中的颜色值 - 按住 Alt 键点击色块，可同时在当前文件所有相同颜色处高亮并批量编辑（类似多光标替换）
启用/修复颜色预览失效的情况
如果颜色没显示小色块，大概率是语言模式或设置问题：
立即学习“前端免费学习笔记（深入）”；
- 确认文件右下角语言模式是 CSS、SCSS、Less 或 PostCSS；纯
.txt或.html中的 style 标签默认支持，但内联 style 属性（style="color:red"）需开启"css.inlayHints.colorDecorators": true - 检查设置中是否误关了：
Editor > Color Decorators必须为 Enabled - 某些主题可能让色块对比度太低，可尝试切换主题或在设置中调整
workbench.colorCustomizations中的editorColorDecorator.border等相关颜色
基本上就这些。VSCode 的颜色工具够轻量、响应快，日常改样式不用切到浏览器或第三方取色器，关键还是写对格式、认准那个小色块——点它，就对了。