red 与 #ff0000 在 CSS 中完全等价，均映射为 rgb(255, 0, 0)，属 W3C 标准硬编码常量；差异仅在语义、兼容性及扩展性场景下的选用策略。
red 关键字和 #ff0000 在 CSS 中确实完全等价
浏览器在解析 color: red; 和 color: #ff0000; 时，最终都会映射到相同的 RGB 值 rgb(255, 0, 0)。这不是近似匹配，而是 W3C 标准明确定义的硬编码映射——red 就是 #ff0000，没有中间环节或运行时计算。
W3C 官方颜色关键字表是固定且不可扩展的
CSS 颜色模块 Level 4 明确列出 140+ 个标准关键字（如 red、orange、rebeccapurple），每个都对应唯一十六进制值。这些不是“语义别名”，而是规范级常量：
-
red→#ff0000 -
green→#008000（注意：不是#00ff00，后者是lime） -
blue→#0000ff -
black→#000000，white→#ffffff
你不能通过自定义变量或 @property 覆盖 red 的含义；它在所有支持 CSS 颜色关键字的引擎（Blink、WebKit、Gecko）中行为一致。
为什么有时看起来“不红”？常见干扰源
视觉上 red 和 #ff0000 显示不同，几乎总是外部因素导致，而非映射本身问题：
立即学习“前端免费学习笔记（深入）”；
- 父元素设置了
opacity或filter: opacity()，导致两个声明都变淡，但可能被误判为“颜色不准” - 使用了
color-scheme: dark且未禁用，某些 UA 样式会强制调整red等关键字以适配深色模式（但#ff0000不受影响） - 启用了系统级色彩管理（如 macOS 的 Display P3 配置文件），而页面未声明
color-gamut: p3，导致 sRGB 关键字被映射到更窄色域 - 开发者工具里复制出来的值显示为
rgb(255, 0, 0)，但误以为这是“转换结果”，其实只是 DevTools 的格式化输出，原始语义仍是等价的
#ff0000 和 red 的实际选用建议
二者语义层级不同，选哪个取决于上下文需求：
- 写组件库或设计系统 token？优先用
#ff0000或命名变量（如--primary-red: #ff0000），避免依赖 UA 内置关键字的隐式绑定 - 快速原型或教学示例？
red更易读，且所有浏览器兼容性拉满（包括 IE9+） - 需要 alpha 通道？
red不支持透明度，必须转成rgb(255, 0, 0, 0.8)或#ff0000cc；而#ff0000可直接补两位得#ff0000cc - 缩写形式要注意：
#f00等价于#ff0000，但red没有缩写 —— 别试图写re或r，那会失效
真正容易被忽略的是：颜色关键字在 @media (prefers-color-scheme: dark) 下可能被 UA 暗中调整，而十六进制值始终稳定。如果你依赖精确色值做品牌一致性校验，别无选择——得用 #ff0000。
