W3C 140个标准色均有唯一确定的#RRGGBB值，高频使用约30个；命名色仅适用于transparent、currentColor等语义明确场景，状态色等需用自定义属性+十六进制确保可访问性与一致性。
常见 CSS 颜色名称和对应 #RRGGBB 值（140 个标准色中高频使用的）
W3C 定义的 140 个命名颜色每个都有唯一、固定的十六进制值，不是近似值。比如 gray 和 grey 都是 #808080，不是“差不多”，而是完全等价；rebeccapurple 严格等于 #663399，不是“偏紫一点”。实际开发中高频用到的约 30 个，以下是语义清晰、对比度可用、拼写稳定的核心集：
-
black→#000000 -
white→#ffffff -
red→#ff0000（但注意：对比度仅 3.99:1，常不满足 WCAG AA） -
green→#008000（比lime（#00ff00）更稳，更适合“成功”状态） -
blue→#0000ff（纯蓝，饱和度高，慎用于正文链接——明度太低） -
darkblue→#00008b（比blue暗得多，适合标题或深色背景文字） -
lightcoral→#f08080（暖红调，比salmon（#fa8072）更灰、更柔和） -
steelblue→#4682b4（冷灰蓝，UI 中常用作主色或边框色，可访问性友好） -
olive→#808000（易拼错成olivedrab或olivegreen，建议直接记#808000） -
rebeccapurple→#663399（唯一人名色，不是“高级 purple”，而是为包容性加入；若设计系统未明确定义，别擅自引入）
为什么别靠肉眼猜颜色名称对应的色值？
因为很多名字视觉差异极小，但数值差得真实：darkgray 是 #a9a9a9，dimgray 是 #696969，亮度差 64 单位（十进制），在深色 UI 中可能一个显字、一个糊成一片。更麻烦的是，浏览器开发者工具里用取色器点出来的值，永远是精确的 #RRGGBB，而不是你写的 darkslategray ——它只显示计算后结果。
- 查表不可靠：不同网站整理的“CSS 颜色表”可能混入非标准色或旧版值
- VS Code / WebStorm 不补全命名色（
rebeccapurple得手敲全名，无缩写） - ESLint 规则
color-no-named可强制禁用命名色，防止团队协作时失控 - 真正可靠的验证方式：写好样式后，右键元素 → “检查”，在 Styles 面板里看 computed color 的十六进制值
什么时候该用颜色名称，什么时候必须用 #RRGGBB 或 rgb()
颜色名称不是“简写”，而是带语义的标记。用错场景，反而增加维护成本。
- ✅ 推荐用名称的场景：
transparent（比rgba(0,0,0,0)更短、语义清、IE9+ 全兼容）；currentColor（继承父级文字色，用于图标或边框） - ❌ 禁止用名称的场景：组件状态色（如
.btn--error { color: red; }），因为red对比度不达标，且无法在设计系统中统一映射到可访问色 - ⚠️ 高风险场景：用
maroon（#800000）、navy（#000080）等低明度色做文字，极易触发可访问性检测失败 - ? 实操替代方案：定义 CSS 自定义属性，例如
--color-error: #dc2f2f;，再在类中引用color: var(--color-error);，既可控又可主题化
十六进制写法的兼容性与常见误写
#RRGGBB 是最通用、最安全的颜色写法，所有浏览器从 IE6 起就支持。但细节上容易手滑出错：
立即学习“前端免费学习笔记（深入）”；
-
#f00是合法简写，等价于#ff0000；但#f0或#f000是无效值，会被浏览器忽略 -
#RRGGBBAA（8 位）支持透明度，但 Safari 14.1 之前不支持，如需兼容旧版 iOS，优先用rgba() - 字母不区分大小写，
#FF0000和#ff0000效果一样，但团队应统一小写规范（便于 diff 和压缩） - 十六进制中没有
G、H等字母——只有0-9和a-f，写成#f0g000会静默失效
