十六进制颜色值(#RRGGBB及缩写#RGB)不区分大小写,因浏览器底层为字符转数字映射;推荐统一小写以保障团队协作、工具校验和风格一致。

十六进制颜色值(#RRGGBB)不区分大小写
CSS 解析器把 #FF0000、#ff0000 和 #Ff0000 全部当作同一个红色,因为十六进制中的 A–F 代表数值 10–15,大小写在数值层面完全等价。浏览器底层做的是字符转数字映射,不是字符串比对。
缩写形式(如 #FFF)同样不区分大小写
当红、绿、蓝三组两位值各自相同时,可缩写为三位(#RGB),比如 #f0f 和 #F0F 都等价于 #ff00ff(品红)。但要注意:缩写只适用于“每组两位相同”的情况,#abc 是合法的,#abcc 则无效(长度错误,会被整个忽略)。
为什么建议统一用小写?
这不是语法要求,而是工程实践问题:
- 团队协作时避免
#FF0000和#ff0000被 Git 当作不同内容,徒增无意义 diff - 多数主流 CSS 规范(如 Airbnb、Google CSS Style Guide)明确推荐小写
- 编辑器/构建工具(如 stylelint)默认校验小写,大写会触发 warning
- 和
rgb()、hsl()等函数保持风格一致——它们虽不区分大小写,但小写是事实标准
哪些颜色写法才真正在意大小写?
真正区分大小写的其实是 CSS 的其他部分,不是颜色本身:
立即学习“前端免费学习笔记(深入)”;
-
color: Red;✅ 合法(颜色关键字不区分大小写) -
Color: red;❌ 无效(属性名Color大写,不是标准属性) -
div#MyId { ... }✅ 可能选中 ID 为MyId的元素(ID 选择器区分大小写) -
font-family: "Times New Roman";中的引号内字体名,某些系统对大小写敏感(尤其 macOS/Linux 下的本地字体)
/* 所有这些都显示为同一蓝色,但推荐只用最后一行 */ color: #0000FF; color: #0000ff; color: #000ff; color: #00f;
实际项目里,颜色值大小写不影响渲染,但混用会悄悄抬高维护成本——尤其当它和真正区分大小写的部分(如自定义属性 --myColor)共存时,容易模糊边界。盯住「一致性」比盯住「是否合法」更重要。










