CSS命名颜色共140个，均在sRGB下有明确定义的十六进制值，如black为#000000、white为#ffffff、gray/grey同为#808080；rebeccapurple特例为#663399，语义优先于简洁，需结合设计系统谨慎使用。
常见 CSS 颜色名称实际对应哪个十六进制值
CSS 颜色名称不是“印象派”，每个都有明确定义的 RGB 值，但不同名称之间差异可能很微妙，比如 darkgray 和 dimgray 看起来几乎一样，实际却差了 8 个亮度单位。W3C 标准定义了 140 个命名颜色（含 orange、rebeccapurple 等），所有值都在 sRGB 色彩空间下固定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
black永远是#000000，white永远是#ffffff，不随设备或浏览器变化 -
gray是#808080，而grey是它的完全等价别名（不是近似） -
lightcoral是#f08080，比salmon（#fa8072）更偏粉、更暗一点 - 避免靠肉眼猜——直接查 CSS Color 4 命名色表 或用开发者工具取色验证
什么时候该用颜色名称，而不是 #RRGGBB 或 rgb()
颜色名称只在语义明确、且团队/项目接受其精度限制时才合适。它们不是“更简洁的写法”，而是带隐含含义的标记。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
transparent而不用rgba(0,0,0,0)：前者语义清晰、字节更少、兼容性更好（IE9+） - 组件状态类中可用
valid/invalid这类语义化变量，背后再映射到具体色值，而非直接写red—— 因为red在可访问性检测中对比度常不达标 - 禁用
maroon、olive等易拼错名称（maroon不是marroon，olive不是olivegreen） - CI 流程中可加 ESLint 规则
color-no-named强制禁用名称，防止设计系统失控
rebeccapurple 是特例，但别滥用
这是唯一一个以人名命名的 CSS 颜色，值为 #663399，致敬 web 先驱 Eric Meyer 的女儿 Rebecca。它被加入标准是为了推动包容性命名实践，不是为了提供新色相。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 它和
purple（#800080）、darkmagenta（#8b008b）都属紫调，但饱和度与明度不同——rebeccapurple更灰、更稳，适合 UI 主色调 - 不要把它当作“更高级的 purple”来用；如果设计系统没明确定义它，就别引入，否则会增加维护成本
- VS Code / WebStorm 输入
rebeccapurple时不会自动补全，需手动敲全名（无缩写）
/* 对比示例：同一视觉区域，不同写法的实际渲染效果 */
.button--error {
background-color: #dc2f2f; /* 推荐：明确、可控、可计算 */
}
.button--error-alt {
background-color: red; /* ❌ 不推荐：对比度仅 3.99:1，不满足 AA */
}
.button--error-safe {
background-color: rebeccapurple; /* ✅ 可用，但前提是设计规范已采纳 */
}颜色名称最大的陷阱不是“不准”，而是“你以为它准”。真正要控制视觉一致性，得靠设计令牌（design tokens）绑定具体色值，而不是依赖记忆或浏览器默认映射。
