所有浏览器均原生支持140个W3C标准命名颜色（如tomato、rebeccapurple），IE8+及现代浏览器全兼容；命名色本质转为RGB计算，但无法参与CSS自定义属性运算、可能受系统高对比度模式影响，且需严格按全小写无空格拼写（如floralwhite）。
CSS 命名颜色在所有浏览器里都支持吗
靠谱，但仅限于 140 个 W3C 标准定义的命名颜色（如 tomato、rebeccapurple），不是你搜到的“几百种颜色列表”都行。IE8+、Chrome 1+、Firefox 1+、Safari 3.1+ 全部原生支持这些名称，无需 polyfill。
常见误区是把 SVG 颜色名（如 aliceblue）或 X11 扩展名（如 darkseagreen）当“非标”，其实它们全在 W3C 规范里——darkseagreen 是标准色，mediumspringgreen 也是，但 floralwhite 这类带空格/连字符的写法必须全小写且无空格：floralwhite ✅，Floral White ❌。
命名颜色和十六进制/rgb 写法有啥实际区别
本质没区别：浏览器最终都转成 RGB 值计算。但有三个实操影响点：
-
named color无法参与 CSS 自定义属性计算，比如--main: tomato后不能写color: calc(var(--main) * 1.2)—— 会报错，因为命名色不是数值 - 缩放或高对比度模式下，某些命名色（如
lightgray）可能被系统强制映射为其他值，而#d3d3d3更稳定 - 可读性上，
border-color: rebeccapurple比border-color: #663399更易知悉设计意图，尤其团队协作时
rebeccapurple 是什么特殊颜色
它是唯一一个以人名命名的 CSS 标准色，致敬网页先驱 Rebecca Meyer（Eric Meyer 的女儿）。值固定为 #663399，2014 年被加入 CSS Color Module Level 4，并向后兼容所有现代浏览器。
立即学习“前端免费学习笔记（深入）”；
它不是彩蛋，也不是实验特性，而是正式标准色。用法和其他命名色完全一致：
button {
background-color: rebeccapurple;
color: white;
}注意：不要写成 rebecca-purple 或 RebeccaPurple，只认 rebeccapurple（全小写、无连字符）。
哪些命名颜色容易踩坑
名字看着像、实际值反直觉，开发时一用就偏色：
-
orange不是纯橙红，而是#ffa500，比直觉中更黄；真要饱和橙可用orangered（#ff4500） -
gray在多数浏览器中等价于grey，但值是#808080（50% 灰），不是浅灰；想要浅灰得用lightgray（#d3d3d3）或silver（#c0c0c0） -
transparent是命名色，但它是关键字，不是颜色值；写background-color: transparent合法，但color: transparent在部分旧 Android WebView 中不生效 -
currentcolor也是关键字，但它不是命名色，而是取当前color值，别和currentColor（大小写敏感）混淆 —— 小写currentcolor才有效
最稳妥的做法：查 MDN 的 named-color 表，复制粘贴，别靠记忆拼写。
