生产环境应避免使用 color: red 等颜色关键字，因其存在兼容性与解析偏差风险；推荐统一使用 6 位十六进制色值（如 #3b82f6），兼顾确定性、性能及工具链支持；仅 currentColor 和 transparent 可例外使用。
color: red 这种写法在生产环境里基本只该出现在原型或临时调试阶段，正式代码里用它等于埋雷。
关键字颜色的兼容性陷阱
表面上看 red、blue、transparent 写起来最省事，但 CSS 规范里定义的关键字只有 148 个（CSS Color Level 4），其中像 rebeccapurple 这种是后来加的，IE 完全不认识；更麻烦的是，不同浏览器对同一关键字的 RGB 解析可能有微小偏差——比如 orange 在 Chrome 是 rgb(255, 165, 0)，在旧 Safari 里曾被解析为 rgb(255, 164, 0)，虽然后来统一了，但历史存量设备仍可能出问题。
十六进制颜色在交付链路中的确定性优势
设计师给的色值几乎全是 #3b82f6 这类格式，前端直接抄过去就能 1:1 复现品牌色，不依赖浏览器对关键字的映射表。而且：
-
#3b82f6是纯字符串匹配，解析开销比rgb()或关键字都低，尤其在大量内联样式（如表格行内背景）中可测出微小但真实的性能差异 - 所有构建工具（PostCSS、Webpack CSS loader）、设计系统 token 工具（Style Dictionary）、甚至 Figma 插件导出都默认输出 HEX，混用关键字反而要额外做映射转换
- 简写形式
#38f虽然节省字符，但容易和#3388ff混淆，建议团队约定统一用 6 位格式，避免 CI 检查时因格式不一致触发误报
什么时候真该用关键字？
仅限两种场景：
-
currentColor：它是动态继承值，不是静态颜色，用于图标描边、按钮边框跟随文字色等场景，无法用 HEX 替代 -
transparent：它语义清晰且兼容性比rgba(0,0,0,0)更老（IE6+ 支持），比#00000000更早被广泛支持，是唯一值得保留的关键字
getComputedStyle(el).color 返回的永远是 rgb() 字符串，哪怕你写的是 #3b82f6 或 red。所以任何依赖字符串匹配颜色值的逻辑（比如主题切换时判断当前色系），必须先做标准化转换，不能假设输入格式和存储格式一致。 
