CSS中gray与grey命名颜色为什么显示效果相同

gray 和 grey 在 CSS 中之所以会显示出完全相同的颜色效果，根本原因是 W3C 标准已将它们明确规定为同义颜色关键字，最终解析结果统一都是 #808080。这并不是浏览器“碰巧兼容”，而是 CSS 规范中的正式定义。现代主流浏览器基本都会严格按照这套标准执行，但 IE 只支持 gray；如果在实际项目中混合使用，后续维护、工具链处理以及兼容性方面，往往会增加不必要的成本和风险。

gray 和 grey 效果一致，是因为它们在 W3C 标准里被明确定义为同一个 CSS 命名颜色，对应的色值都是：#808080。因此，这不是浏览器的偶然兼容行为，而是规范层面强制等价的结果。

W3C 明确将 gray/grey 定义为同一个关键字

在 CSS 颜色模块（CSS Color Module Level 4）中，gray 和 grey 被正式认定为同义关键字（aliases）。也就是说，这两个 CSS 颜色名称在底层使用的是同一套解析规则。浏览器在处理时不会进行“模糊识别”或“近似匹配”，而是直接将它们映射为同一个内部颜色值。

• 所有符合标准的现代浏览器，如 Chrome、Firefox、Safari、Edge ≥79，都会严格遵循这一规范
• 这意味着无论写 color: gray; 还是 color: grey;，在 CSSOM 解析后，getComputedStyle(el).color 返回的结果都会是 rgb(128, 128, 128)
• PostCSS、Tailwind 的 color plugin、stylelint 等前端工具链也会按照该标准处理，不会额外做差异化转换

IE 是唯一例外：只认 gray，不认 grey

Internet Explorer（包括 IE11）并没有实现这一别名机制，只支持 gray，不支持 grey。如果在 IE 中写 grey，通常会被视为无效 CSS 值，随后回退为继承色或初始值（多数情况下表现为黑色）。

• 如果项目仍然需要兼容 IE 浏览器，那么颜色命名必须统一使用 gray
• 在 CI 流程或旧版构建环境中，若同时混用两种写法，某些老版本工具（例如旧版 cssnano）可能会静默丢弃 grey 声明
• 无障碍检测工具（如 axe-core）通常不会重点检查命名色差异，但如果使用 grey 并叠加 IE 兼容模式，可能会间接导致颜色对比度判断失效

团队协作中拼写不一致的真实代价

表面上看，这只是英式拼写与美式拼写的区别；但在真实开发场景中，它会影响代码搜索、样式维护以及自动化处理流程。

• 在 VS Code 中全局搜索 gray 时，会漏掉所有写成 grey 的实例，反过来搜索也同样如此
• 如果设计系统文档里同时出现两种写法，开发者往往无法借助 IDE 的“转到定义”快速定位统一的色板来源
• 颜色 token 提取脚本（例如从 CSS 中通过正则抓取 color:s*(w+);）可能会把 gray 和 grey 识别成两个不同的 token，增加后续整理难度

真正麻烦的并不是“gray 和 grey 哪个更正确”，而是“整个项目是否保持统一”。即使团队最终决定全部使用 grey，只要没有人在 gray 的兼容性问题上额外打补丁，也通常比两种写法混用更安全、更利于长期维护。