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 默认会渲染小色块。如果没看到：
把光标放在颜色值上，点击左侧出现的小色块，就会弹出图形化调色盘：
原生支持以下写法的识别与预览：
#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()（需插件扩展）让颜色工作流更顺手：
"editor.colorDecorators": true）Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac），输入 “Toggle Color Decorators” 即可开关基本上就这些——不需要装一堆插件，VSCode 原生的颜色工具已经足够日常开发使用，关键是知道它在哪、怎么触发、哪些能识别。
以上就是VSCode中的颜色选择器与预览工具的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
477
收藏
