rebeccapurple是CSS中唯一以真实人物命名的颜色,为纪念Eric Meyer之女Rebecca而设,色值固定为#663399;它无技术优势,仅具人文意义,2014年经社区情感共识投票纳入CSS Color Level 4标准。

rebeccapurple 不是技术升级,而是社区对一个人的纪念。 它的色值固定为 #663399,没有更快的渲染、不提升可访问性、也不比 purple 多支持什么新语法——它存在的全部意义,就是把 Eric Meyer 的女儿 Rebecca 的名字,刻进 CSS 标准里。
rebeccapurple 是怎么进标准的
2014 年,CSS 工作组收到社区提案:将 Rebecca 生前最爱的颜色加入命名颜色列表。Eric Meyer 当时已是 CSS 先驱,但他以父亲身份公开分享了 Rebecca 与脑瘤抗争的历程,文字朴素却极具感染力。提案不是靠技术参数胜出,而是靠真实的人和情感共识。最终投票通过,rebeccapurple 成为 CSS Color Level 4 中唯一以真实人物命名的颜色。
为什么写错大小写或拼写就失效
CSS 关键字严格区分大小写且无容错机制:
-
rebeccapurple✅ 全小写,一字不差 -
RebeccaPurple❌ 首字母大写,浏览器当无效值丢弃 -
rebecapurple❌ 少一个c,整个声明被跳过(IE8 甚至静默回退到黑色)
编辑器如 VS Code 默认不补全它,你得手动敲全——这不是疏忽,而是因为它属于“语义层”而非“功能层”,工具链没把它当高频词对待。
立即学习“前端免费学习笔记(深入)”;
用它之前必须想清楚的三件事
它不是“更好看的 purple”,而是带义务的命名:
- 是否已在设计系统中明确定义为品牌色?否则单点使用会让新人困惑,
rebeccapurple和#663399并存只会增加维护成本 - 是否覆盖了 IE10 以下、Android 4.4 WebView 等旧环境?这些环境不报错,但直接忽略,按钮可能变黑或继承错误颜色
- 是否评估过深色模式下的对比度?
rebeccapurple在深灰背景上对正文文字仅勉强满足 AA 级,AAA 不达标
真正难的从来不是写对那行代码,而是决定要不要为一个六岁女孩的名字,在项目里多加一条降级规则、多测一台旧手机、多向协作成员解释一次背后的故事。


















