WebStorm需同时勾选“Show CSS color preview icon in gutter”和“Show CSS color preview as background”才能完整显示CSS颜色预览，路径为File→Settings→Editor→General→Appearance，支持标准颜色格式如#abc、rgb()、hsl()及命名色，不支持变量、currentColor等非纯色声明。
WebStorm 默认不显示 CSS 颜色预览，必须手动开启两个独立开关才能看到行内颜色块和背景色渲染——只开一个，效果不完整。
如何启用 CSS 颜色预览（图标 + 背景）
这两个选项控制不同视觉反馈，需同时勾选：
-
Show CSS color preview icon in gutter：在行号右侧显示小色块图标（比如color: #ff6b6b;左边出现粉红色方块） -
Show CSS color preview as background：让颜色值本身（如#3498db、rgb(52, 152, 219)、hsl(204, 67%, 52%)）的背景变成对应颜色
路径：File → Settings → Editor → General → Appearance（macOS 是 WebStorm → Preferences），勾选后立即生效，无需重启。
为什么开了预览但某些颜色不显示
不是所有颜色写法都支持预览。WebStorm 只识别标准格式：
立即学习“前端免费学习笔记（深入）”；
- ✅ 支持：
#abc、#aabbcc、rgb(255, 0, 128)、rgba(0, 0, 0, 0.5)、hsl(120, 100%, 50%)、hsla(...)、命名色如tomato、rebeccapurple - ❌ 不支持：
color: var(--primary)（CSS 变量）、color: currentColor、color: transparent、color: inherit、color: unset - ⚠️ 注意：
background: linear-gradient(...)中的颜色值也不会被预览——预览仅作用于纯色声明值，不解析函数或表达式
怎么调出 WebStorm 内置拾色器（Color Picker）
它不是独立工具，而是嵌在配色方案设置里的编辑界面。触发方式只有两种：
- 在任意支持颜色编辑的设置项右侧点击颜色方块（如
Editor → Color Scheme → General → Text → Default text的Foreground方块） - 快捷键：
Ctrl+Shift+A（Windows/Linux）或Cmd+Shift+A（macOS），输入Color Picker回车
拾色器里可吸管取色、拖动 Brightness 滑块快速调明暗、一键 Copy Hex 值（如 #2ecc71）。但改完必须回到上层设置页点 Apply，否则无效。
颜色预览失效的常见卡点
最常被忽略的是三层绑定关系：
- 当前项目用的是否是「可编辑」配色方案？右上角
Scheme下拉框若显示锁图标，说明是只读方案，得先点齿轮 →Duplicate创建副本 - 是否误在
Default方案里修改，但项目实际使用的是Darcula或自定义方案？务必确认下拉框选中的是你正在编辑的那个 - 刚复制/修改完方案，没手动从下拉框里切换过去——新方案不会自动激活
- 极少数情况缓存未刷新，关掉 WebStorm 再重开是最稳妥的验证方式
真正起效的前提不是“点了勾”，而是「方案已激活 + 颜色语法合法 + 编辑器未被语义高亮或插件覆盖」——漏掉任一环，预览就只是个摆设。
