颜色名称仅适用于原型或极简场景，正式项目应禁用除transparent和currentcolor外的所有命名色，统一使用语义化css变量以保障可维护性、无障碍合规与主题一致性。
颜色名称基本只适合原型或极简场景，日常开发中应优先用 #rrggbb，除非你明确需要语义表达且能接受色域受限和不可控的渲染差异。
颜色名称在哪些地方会“失效”
浏览器对颜色关键字的支持看似统一，但实际存在隐性偏差：
-
orange在 Chrome 和 Safari 中渲染略有不同，Safari 偏暗；rebeccapurple是唯一由 W3C 明确定义的新增关键字，其他如mediumslateblue依赖 UA 默认实现，旧版 Edge 可能回退为gray - 所有颜色关键字都映射到 sRGB 色域内的固定
#rrggbb值（比如tomato≡#ff6347），但设计师给的色值若落在关键词覆盖范围外（如品牌色#2563eb），你根本找不到对应名称 - CSS 自定义属性、JS 动态读取时，
getComputedStyle(el).color返回的永远是rgb()或rgba()格式，不会保留原始关键字写法——这意味着调试时你看到的不是你写的
什么时候可以放心用颜色名称
仅限以下三类情况，且需团队达成书面约定：
- 快速搭建内部工具页，不追求视觉一致性，例如用
color: red;表示错误状态，此时语义比精度重要 - 配合
currentColor做图标/边框继承，如border: 1px solid currentColor;，这时名称只是占位符，真正颜色由父级决定 - 教学或文档示例，为降低认知负荷，比如写
color: blue;比color: #00f;更易被初学者理解
hex 值不是“更高级”，而是更可控
用 #rrggbb 不是为了显得专业，而是规避不可控变量：
- 漏掉
#会直接导致声明失效（浏览器忽略整条规则），而red写成Red或RED仍有效——但这种“宽容”反而掩盖了拼写错误 - 设计系统中所有主色、中性色必须可精确复现，
#2563eb是 Figma 导出的原始值，转成skyblue就彻底失真 - 构建工具（如 PostCSS、Tailwind）解析颜色时，只认字面量
#开头或函数式语法；indigo这类名称需额外配置映射表，否则无法参与 color-mix 或 theme 扩展
真正容易被忽略的是：颜色名称没有 alpha 通道，也没有 HSL 语义，它既不能动态变暗，也无法叠加透明度。一旦项目需要主题切换、无障碍对比度调节或深色模式适配，从 darkgray 切换到 hsl(0, 0%, 20%) 的成本远高于一开始就用 #333 定义基础色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
