最直接判断css hex颜色是否生效，是看devtools styles面板中background-color或color行是否有删除线；有则说明hex值非法（如#fffff、#ff00gg、漏#、加引号等），浏览器静默忽略；无删除线但颜色不显，则需排查宽高、覆盖、css变量引号误用等问题。
DevTools里看颜色行有没有被划删除线
这是最直接的判断方式。打开浏览器开发者工具，选中目标元素，在 Styles 面板中找到 background-color、color 等带颜色值的声明行。如果该行显示为灰色并带删除线（strikethrough），说明浏览器已判定该值非法并完全忽略——大概率就是十六进制写错了。
常见触发删除线的写法包括：#fffff（5位）、#ff00gg（含非法字符 g）、ff0000（漏掉 #）、"#ff0000"（加了引号）。这些都不是语法错误，但属于“无效属性值”，浏览器静默丢弃，不报错也不警告。
用取色器反向验证颜色是否真被渲染
如果颜色行没被划掉，但页面上依然看不到预期背景或文字色，别急着改 hex 值，先确认它是否真的参与了渲染。打开 Chrome DevTools 的取色器：点击 Styles 面板中颜色值旁的小色块，然后悬停在对应元素区域，观察实时读出的 hex 或 rgb 值。
若取色器显示的是 rgb(0, 0, 0) 或 #000000，但你写的却是 #123，说明你的样式根本没生效——问题不在 hex 本身，而在覆盖、继承或尺寸上。
特别注意：取色器读的是最终像素结果，不是源码。如果设计稿是 #3b82f6 但取色器返回 #4c93ff，可能是叠加了 filter: brightness(1.2) 或父级 opacity，这时候修 hex 没用。
临时替换为标准值快速隔离问题
遇到疑似 hex 错误时，不要反复修改原值调试。直接复制粘贴一个已知有效的值做对照：
-
background-color: #f00;（简写三位，浏览器自动展开为#ff0000） -
background-color: red;（命名色，绕过所有进制转换逻辑） -
background-color: rgb(255, 0, 0);（显式函数，排除字符解析歧义）
只要其中任一能立刻让颜色出现，就可断定原 hex 值非法；若全都不生效，问题一定出在别处：元素无宽高、被 background 复合属性覆盖、或 display 为 inline 且未设 line-height / vertical-align。
检查 CSS 变量中 hex 是否被当字符串处理
用 var() 调用颜色变量时，很多人会下意识给 hex 值加引号，比如：--primary: "#3b82f6";。这会导致变量存储的是字符串，而非颜色值，后续 color: var(--primary); 实际等价于 color: "#3b82f6"; —— 浏览器无法解析，整条声明失效，且不会划删除线，极难察觉。
正确写法必须去掉引号：--primary: #3b82f6;。验证方法：在 DevTools 的 Computed 面板里搜 color，看最终计算值是否为 rgb(59, 130, 246)；如果是 "#3b82f6"（带引号），说明变量定义错了。
真正容易被忽略的是：hex 值在变量里写错，和在普通声明里写错，表现完全不同——前者静默失败，后者至少有删除线提示。调试时得切换思路，不能只盯 Styles 面板里的颜色行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
