十六进制颜色写错一位即失效，浏览器仅接受3位或6位合法十六进制（a–f），非法字符或位数错误会导致整条声明静默忽略；rgb()、rgba()、hsl()等函数也需严格遵循参数类型、范围与单位规则，否则同样静默失效。
十六进制颜色写错一位就失效，怎么快速定位？
CSS里#ff00gg这种写法不会报错，但浏览器直接忽略整条声明——它不是语法错误，而是无效值，开发者工具里会显示为“strike-through”（划掉），但容易被当成其他原因导致的样式不生效。
- 浏览器只接受严格 3 位或 6 位十六进制字符（
#rgb或#rrggbb），字母限于a–f（大小写不敏感），g、z、q等全是非法字符 -
#1234（4位）、#12（2位）、#12345（5位）全都不合法，也不会 fallback 到最近的有效格式 - VS Code / WebStorm 默认不校验 CSS 颜色值，需手动装插件（如 “Autocomplete Color”）或开启 CSS Lint
示例：color: #ff00gg; → 完全无效，等价于没写background: #abcde; → 5位，无效，别指望它当 #abc 或 #abcde0 解析
rgb() 和 rgba() 常见传参陷阱
rgb() 和 rgba() 看似简单，但参数类型和范围稍有偏差就会静默失败。
- 第一、二、三个参数必须是 无单位数字（
rgb(255, 200, 100)✅），加了px、%或引号（"255"）就无效 - 数值范围是 0–255（整数）或 0%–100%（百分比），但二者不能混用：
rgb(100%, 200, 50%)❌ -
rgba()第四个 alpha 参数必须是 0–1 的小数（rgba(0,0,0,0.5)✅），写成50%或50都无效 - 所有参数之间必须用英文逗号+空格分隔，
rgb(255,200,100)可以，但rgb(255,200, 100)（逗号后两个空格）也行；真正致命的是中文逗号或全角符号
hsl() 和 hsla() 的角度与饱和度易被误解
hsl() 不是“随便填个数就行”，h、s、l 各自的单位和取值逻辑不同，填错单位或超界会导致整条失效。
立即学习“前端免费学习笔记（深入）”；
-
h（色相）是角度值，单位可以是deg、rad、grad或无单位（此时按deg解析），但写成hsl(360, 100, 50)✅，hsl(360deg, 100%, 50%)✅，而hsl(360px, 100%, 50%)❌（px不合法） -
s（饱和度）和l（亮度）必须带 % 单位，hsl(120, 80, 60)是无效的，正确是hsl(120, 80%, 60%) - 超出范围不会 clamp（比如
s: 120%或l: -10%），而是整条声明作废，且不报错
如何在真实项目中提前发现颜色格式问题？
靠肉眼检查 CSS 文件效率低，尤其在多人协作或从设计稿批量导出颜色时。
- 开发者工具里看 Styles 面板：无效颜色值会带删除线，且右侧“Computed”标签页里查不到对应属性，这是最直接信号
- 使用 PostCSS 插件
postcss-color-hex-alpha（支持#rrggbbaa）或stylelint配合color-no-invalid-hex、function-allowed-list规则，在构建时拦截 - VS Code 中安装 “CSS Peek” + “Error Lens”，能让非法颜色值实时标红（注意：默认不包含 hex 校验，需配合 stylelint）
- 少用“复制粘贴”设计软件里的颜色值——Figma 复制的是
rgb(120, 180, 220)，Sketch 可能给#1a2b3c80（带 alpha），而老版 Chrome 不支持 8 位 hex，得转成rgba()
颜色格式问题往往不报错、不警告，只沉默失效。最麻烦的不是写错，而是写错后还在那儿调 margin、查 specificity，以为是选择器问题。
