css 颜色值可以写大写吗_hex 大小写是否影响解析

十六进制颜色值（#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）共存时，容易模糊边界。盯住「一致性」比盯住「是否合法」更重要。