命名颜色与十六进制色渲染性能无差异，但可维护性差；小项目可用，长期项目应使用语义化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 无关，别混淆。
