结论：所有命名颜色（如red、tomato）都应被限制使用——它们只是140个固定rgb值的静态别名，无语义、不可控、无法计算，且易因拼写、上下文或系统映射失效；唯一例外是currentcolor，它是动态关键字而非命名色，支持继承但不解决语义化问题。
直接说结论：不是“过时的颜色名”有问题，而是所有命名颜色（red、tomato、rebeccapurple）在现代工程中都该被限制使用——它们本质是 140 个固定 RGB 值的别名，既无语义、也不可控、无法参与计算，还容易因拼写/大小写/上下文失效。
命名颜色在 CSS 中根本不是“变量”，只是静态别名
你写 color: tomato，浏览器立刻替换成 rgb(255, 99, 71)，之后就再无关联。它不绑定设计意图，不能被主题切换覆盖，也不能用 color-mix() 调整明暗。更关键的是：tomato 这个词本身没告诉你它是“错误提示色”还是“装饰性高亮”，下次看到它，你得翻三遍代码才能确认用途。
常见误用场景：
- 把
--error: red和color: red混写——改变量不影响已写的字面值 - 用
lightgray写禁用态，结果在 Windows 高对比度模式下被系统强制映射为纯黑，文字消失 - 复制设计稿里的 “cool-gray-200” 直接当颜色名用 → 浏览器静默忽略整条声明
gray vs grey 这类拼写差异会真实破坏协作流
CSS 标准确实同时支持 gray 和 grey（值相同），但它们是两个独立关键词。团队里有人写 color: gray，有人写 color: grey，IDE 全局搜索 gray 就漏掉一半；CI 构建时不同版本的 PostCSS 对大小写容错性不一致，可能某次构建后 Gray 突然失效；更隐蔽的是，无障碍检测工具通常只校验十六进制/RGB/HSL，遇到 darkslategray 可能跳过对比度检查。
实操建议：
- 禁用所有命名色，统一用
hsl()或rgb()+ CSS 变量，例如--state-error: hsl(0, 80%, 55%) - 若必须保留命名色（如原型阶段），只限用 W3C 官方列表中的全小写无空格形式，且禁止混用同义名（如只选
gray，禁用grey） - 用 ESLint 插件
stylelint-color-no-named在提交前拦截
为什么 currentcolor 是唯一可接受的“命名色”
currentcolor 不是命名颜色，而是 CSS 关键字，表示当前元素的 color 值，且**必须全小写**——currentColor 或 CURRENTCOLOR 全部无效。它能用于 border-color、fill、outline 等属性，实现颜色继承链，是少数真正具备语义和动态性的用法。
但要注意：
- 它依赖父级
color值存在，如果父级没设color，就会回退到初始值（通常是black） - 在 SVG 中用
fill: currentcolor很方便，但若父级color是命名色（如color: red），那currentcolor实际仍是rgb(255, 0, 0)，依然不可计算 - 别把它当“省事替代方案”——它解决的是继承问题，不是语义化问题
真正难的不是记住哪些名字“过时”，而是意识到：只要颜色值脱离了语义绑定（比如 --text-primary）、脱离了设计系统约束（比如明度阶梯、对比度校验）、脱离了工具链支持（比如自动深色适配、WCAG 检测），它就不再是工程资产，只是技术债。命名颜色恰恰卡在这三重脱节的交点上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
