css颜色名称与色值对比_如何选择常见颜色名称

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）绑定具体色值，而不是依赖记忆或浏览器默认映射。