CSS标准颜色名称仅140个，现代浏览器全支持，IE8仅支持16个；名称须小写，中文/自定义名无效；十六进制或RGB/HSL更稳妥，因语义模糊、难微调且工具链兼容差。
css颜色名称在所有浏览器中都可用吗
可以，但仅限于 W3C 标准定义的 140 个颜色名称（如 red、darkslategray、rebeccapurple）。这些名称自 CSS2 起被正式标准化，现代浏览器（Chrome/Firefox/Safari/Edge）全部支持。IE9+ 也支持全部 140 个，但 IE8 只支持基础 16 个（如 black、blue、fuchsia 等），遇到 lightseagreen 这类会直接失效。
-
rebeccapurple是唯一一个以人名命名的标准色，为纪念 Web 先驱 Eric A. Meyer 的女儿，2014 年加入 CSS Color Module Level 4 - 名称区分大小写：必须全小写，
Red或RED无效 - 中文或自定义名称（如
天青、奶茶色）完全不被识别，会回退到默认色或触发解析错误
用颜色名称 vs 用十六进制/rgb/hsl 哪个更稳妥
日常开发中，优先用十六进制（#rrggbb 或 #rgb）或 rgb()/hsl()，原因很实际：
- 颜色名称语义模糊：
orange是偏红还是偏黄？gray和grey是同一个色（是的，二者等价），但darkgray和dimgray数值完全不同（前者#a9a9a9，后者#696969） - 无法微调：想让
blue暗一点？只能换名（darkblue），不能写blue(80%) - 工具链兼容性差：PostCSS、Tailwind 的 color palette、设计系统 token 通常不映射标准名称，导致主题切换或暗色模式难实现
/* 可读性好，但控制力弱 */
.button { background-color: tomato; }
<p>/<em> 更可控，便于自动化和设计协同 </em>/
.button { background-color: #ff6347; } /<em> 就是 tomato 的精确值 </em>/哪些颜色名称最容易用错
这几个名字看似直观，实际容易踩坑：
-
orange不是#ffa500吗？对——但它在部分旧 Android WebView 中曾被错误映射为#ff8c00（darkorange的值），虽已修复，但遗留 CSS 里混用会导致视觉偏差立即学习“前端免费学习笔记（深入）”；
transparent是关键字，不是颜色名称，但它能用在任何接受<color></color>的地方（如border-color: transparent），且兼容性比所有命名色都好（IE6+）currentcolor也不是颜色名，而是动态关键字，取值为当前元素的color值，常用于图标复用文字色，但新手常误以为它是“某种灰色”lightgray在 Windows 系统下某些 IE 版本中渲染偏亮，而 macOS 下更接近预期，跨平台一致性不如#d3d3d3稳定white和black看似安全，但在 OLED 屏幕上纯黑（#000）比black更省电——虽然值相同，但某些早期安卓 WebView 对关键字解析略慢
什么时候值得坚持用颜色名称
只有两个真实场景建议用：
快速原型或教学演示：写
div { color: hotpink; }比查#ff69b4直观得多，且无歧义需要语义化强调时：比如用
error { color: red; }表达严重性，比#f00更易维护；但前提是团队约定“red 只用于错误态”，否则后续有人加button { color: red; }就破坏语义如果项目用了 CSS 自定义属性（
--primary: blue;），别把颜色名称直接塞进去：--primary: blue;是合法的，但color: var(--primary);在不支持自定义属性的环境（如 IE11）会失效，此时还不如写死color: #00f;设计系统文档若列出 “Brand Blue =
cornflowerblue”，请立刻要求改成十六进制——因为设计师给的色值图、Sketch 插件导出、前端组件库生成工具，全依赖数值，名称只是障眼法
真正麻烦的从来不是“能不能用”，而是“用完之后谁来保证它一直长这样”。
