仅16个基础色名（如black、red、blue等）在IE6+全平台稳定可用，其余扩展色如rebeccapurple在旧版Safari或WebView中会被静默丢弃；gray与grey等价但拼写错误即失效；red等虽渲染为#ff0000却不符合WCAG AA对比度标准；transparent和currentColor是少数语义清晰、值得保留的例外。
直接用颜色名称在多数场景下反而增加维护成本，不推荐作为主力方案；仅在语义明确、兼容性优先、且无需控制对比度或透明度的简单场景中可临时使用。
哪些颜色名称能无脑用，哪些会悄悄失效
CSS 有 140+ 个标准命名色，但只有最老的 16 个（black、white、red、blue、green、yellow、purple、fuchsia、maroon、olive、navy、teal、aqua、lime、gray、silver）在 IE6+ 全平台稳定解析。其余如 rebeccapurple、lightseagreen、darkslategray 在旧版 Safari 或 WebView 中可能被直接丢弃，降级为 transparent 或 black，且不会报错。
常见踩坑点：
-
gray和grey都合法且等价（都是#808080），但拼成grae或gry就无效 -
olive容易打成olivedrab（后者是另一个合法色，值为#6b8e23），但语义完全不同 -
orange是合法名，orangered也是，但orange-red或orange red会整个声明失效
为什么 red 不等于“红色按钮该有的颜色”
写 color: red; 渲染出来确实是 #ff0000，但它在 WCAG 对比度检测中只有 3.99:1（对白色背景），不满足 AA 标准。而真正可用的错误态文字色，比如 #dc2f2f，对比度达 5.2:1。你不是在“选颜色”，是在“选合规信号”。
立即学习“前端免费学习笔记（深入）”；
更关键的是：命名色无法表达设计意图。比如 border-color: lightgray; 看似合理，但 lightgray 是 #d3d3d3，和 --color-border-subtle 这种语义变量相比，它既没说明用途（是分隔线？输入框边框？禁用态？），也无法随深色模式自动切换。
所以：
- 状态类样式（如
.error、.success）必须用具体色值或 CSS 变量，不能依赖red/green -
transparent是唯一值得保留的命名色——它语义清晰、字节少、IE9+ 全支持，比rgba(0,0,0,0)更优 -
currentColor不是颜色名，是动态关键字，只在需要继承文字色的装饰场景（如 SVGfill、border-color）中安全有效
想用命名色又不想翻车，得加 fallback 且顺序不能错
现代浏览器支持多值声明，后写的会覆盖前写的。要让扩展色生效，必须把兼容性差的放后面：
button {
background-color: #e0f7fa; /* fallback for old browsers */
background-color: lightseagreen; /* overrides above in modern ones */
}反过来写就完全失效：background-color: lightseagreen; background-color: #e0f7fa; —— 后者永远生效，前者形同虚设。
注意：lightseagreen 值为 #20b2aa，不是“浅一点的 sea green”，也不是 seagreen（#2e8b57）的变体，二者明度差近 40 单位，视觉上根本不是同一类绿。
VS Code 里敲 rebeccapurple 为啥不补全
因为它是 W3C 后期加入的特例（2014 年），不属于早期 16 色体系，主流编辑器的 CSS 语法补全列表默认只含那 16 个。你得手动敲全名——rebeccapurple 没缩写、不分大小写，但拼错一个字母（比如 rebecapurple）就变成无效值。
更麻烦的是：开发者工具里查 computed style 时，看到的永远是 #663399，而不是你写的 rebeccapurple。这意味着你无法通过搜索源码中的颜色名来定位所有使用位置，grep rebeccapurple 会漏掉已计算为色值的实例。这也是为什么大型项目普遍用 ESLint 规则 color-no-named 直接禁用所有命名色——不是它们不好，而是它们在协作系统里太难追踪。
真正该花时间确认的，从来不是“这个单词怎么拼”，而是“这个颜色在什么上下文中承担什么功能”。命名色掩盖了这层判断，反而让人更容易忽略对比度、可访问性、主题适配这些实际影响用户的关键点。
