VSCode 自带颜色选择器和 CSS 预览功能无需插件：在 CSS/SCSS/Less/PostCSS 文件中写标准颜色值（如 #fff、rgb()、hsl()、命名色等），左侧即显色块，悬停查看详情，点击打开内置拾色器，支持格式切换与 Alt 批量编辑；需确保语言模式正确且启用 Color Decorators 设置。
VSCode 自带的颜色选择器和 CSS 颜色预览功能，不需要插件就能直接用，关键是要知道怎么触发、在哪显示、以及哪些写法能被识别。
只要在支持的文件类型中写标准颜色格式，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。
steelblue），点一下就自动替换原代码中的颜色值如果颜色没显示小色块，大概率是语言模式或设置问题：
立即学习“前端免费学习笔记（深入）”；
.txt 或 .html 中的 style 标签默认支持，但内联 style 属性（style="color:red"）需开启 "css.inlayHints.colorDecorators": true
Editor > Color Decorators 必须为 Enabled
workbench.colorCustomizations 中的 editorColorDecorator.border 等相关颜色基本上就这些。VSCode 的颜色工具够轻量、响应快，日常改样式不用切到浏览器或第三方取色器，关键还是写对格式、认准那个小色块——点它，就对了。
以上就是VSCode内置的颜色选择器与CSS颜色预览工具的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
562
收藏
