CSS 参考 · 147 色
CSS 命名色 — 完整参考
CSS Color Module Level 4 规范定义的全部命名色——147 个——一张可搜索的色板。按色名、色相或感知亮度排序，点击色块复制 HEX。
显示 148
关于 CSS 命名色，四件值得知道的事
名单看起来杂乱，因为它本来就是——三十年 Web 演化的产物。下面几个事实能解释这些奇怪之处。
147 个关键字，142 种颜色
CSS Color Module 4 共有 147 个有效色名关键字，但只有 142 种不同的 HEX 值——gray 与 grey、cyan 与 aqua、magenta 与 fuchsia，以及几对 darkgray/darkgrey 式别名共享同色值。
源自 X11
大多数色名来自 X11 调色板——1980 年代 X Window System 的色彩列表，由 Paul Ravelling 等人命名。这就是为什么会有 "papayawhip"（番木瓜白）这种今天没有设计工具会用的名字。
英美拼写都接受
凡是含 "gray" 的色名都有 "grey" 别名，反之亦然。浏览器两种都接受。CSS Color 4 把这条规则标准化——更早的规范里不一致，部分浏览器只支持一种写法。
rebeccapurple 有故事
CSS Color 4 新增 rebeccapurple 用以纪念 Rebecca Meyer——CSS 规范联合编辑 Eric Meyer 的女儿，6 岁因癌症去世。颜色是她自己选的。这是 CSS 唯一通过社区提案加入的色名。
何时该用
命名色用于原型和测试，不要用于生产。
CSS 命名色用着方便——敲 "tomato" 比 "#FF6347" 快——大多数也是可用的色相。但整套色板没有体系：17 种不同的红，没有统一的明度阶梯，多个名字指同一颜色，还有几个怪东西（papayawhip？）没有任何设计系统会用。
生产代码里，交付用 HEX、设计令牌用 OKLCH、或用你的设计系统色板令牌。命名色最有价值的两个场景：快速原型（"先给我个红色"）以及 CSS 测试代码——名字比 HEX 易读。
唯一例外是 rebeccapurple。可以用。颜色本身不错，背后的故事值得纪念。