十六进制颜色值大小写不敏感,#ff0000、#FF0000 和 #Ff0000 均解析为同一红色,因CSS规范规定A–F不区分大小写;但格式错误如漏#、长度不符或含空格等会导致声明被静默忽略。

没有区别,#ff0000、#FF0000 和 #Ff0000 在所有现代浏览器中都解析为同一红色。
为什么大小写不影响解析
CSS 规范明确将十六进制字符 A–F 视为不区分大小写的数字(10–15),和 0–9 一样参与数值计算。浏览器在解析时直接转成十进制数,F 和 f 都等于 15,所以通道值完全一致。
这点也适用于缩写形式:#f0a、#F0A、#F0a 全部展开为 #ff00aa。
但要注意:这种“不区分”仅限于颜色值本身;CSS 自定义属性(如 --main-color)和选择器、类名等仍严格区分大小写,混用容易模糊边界。
立即学习“前端免费学习笔记(深入)”;
哪些写法看似合法实则无效
大小写不是问题,但格式错误会静默失效——浏览器直接忽略整条声明,控制台也不报错。
-
ff0000(漏掉#)→ 被当作无效值丢弃 -
#FF0000FF(8 位大写)→ 不是标准 hex,也不符合八位 HEX(#rrggbbaa)必须小写的硬性要求,整条失效 -
#ff0000 80(带空格)或"#ff000080"(加引号)→ 解析中断,回退到继承色 -
#fff0000(7 位)或#1234(4 位)→ 非法长度,被忽略
实际项目里该用大写还是小写
统一用小写是更稳妥的选择,原因很实在:
Git diff 不会因大小写变化触发无意义的行变更;设计稿给的 #3a86ff 直接复制粘贴就能用,不用 mentally 转换;自动化工具(Lighthouse、axe-core)和预处理器(Sass)对小写 hex 支持最稳定;团队协作时,color: #e63946 比 color: #E63946 更少引发“这是不是改错了”的疑问。
真正容易被忽略的是:缩写(如 #f0a)和大小写无关,但它本身就有歧义风险——#f0a 是 #ff00aa,不是 #f000aa 或 #fa00aa,人工核对时得展开才能确认是否符合设计值。


















