命名颜色与十六进制色渲染性能无差异，但可维护性差；小项目可用，长期项目应使用语义化CSS变量。

color: red 和 color: #f00 渲染性能一样

浏览器在解析 CSS 时，所有命名颜色（如 red、blue、darkslategray）都会在样式计算阶段被立即转换为对应的 RGB 值（例如 red → rgb(255, 0, 0)），后续布局、绘制流程完全不感知原始写法。实测 Chrome DevTools 的 Rendering > FPS Meter 和 Layers 面板下，切换 color: red 和 color: #ff0000 不会引起任何帧率或重绘区域差异。

所以“命名色性能差”是过时的误解——它既不增加解析时间，也不影响 GPU 上传或着色器执行。

命名颜色兼容性取决于 CSS 版本而非浏览器新旧

CSS 标准定义了两批命名颜色：16 个基本色（black, white, red, blue 等）和 140 个扩展色（cornflowerblue, lightseagreen 等）。前者来自 HTML 4，后者来自 SVG 1.0 和 CSS3 Color Module。

• red、blue、transparent 在 IE6+、Android 2.3+、iOS 3.2+ 全支持
• rebeccapurple、darkslateblue 等扩展名在 IE9+、Android 4.0+、iOS 5.0+ 才可靠
• system colors（如 ButtonFace）行为不一致，已废弃，不应使用

实际项目中更该警惕的是可维护性陷阱

命名颜色本身没性能问题，但容易掩盖设计系统缺陷：

• 团队协作时，color: orange 可能指品牌主色，也可能只是临时强调——语义模糊
• 主题切换时，无法批量替换：想把所有 blue 改成 #2563eb，但又得排除 lightblue 和 darkblue
• 无障碍检查工具（如 axe）无法识别 lightgrey 是否满足对比度，但能校验变量 --text-primary 对应的值

现代项目推荐用自定义属性 + 有意义的语义名：

:root {
  --color-brand: #3b82f6;
  --color-warning: #f59e0b;
}
.button { color: var(--color-brand); }

要不要用命名颜色？看场景

小项目、原型、内网工具页，直接写 red 没问题；但只要涉及长期迭代、多主题、设计系统对齐，就该放弃所有命名颜色——不是因为慢，而是它们无法表达意图、不可控、难审计。

特别注意：CSS 预处理器（Sass/Less）里的 $red: #e53e3e 是变量，和原生 red 无关，别混淆。