CSS预设颜色名称是怎么回事

CSS允许直接写"Tomato""SlateBlue"这样的颜色名称,而不用写色值,但这份名单背后的来历,比大多数人想象的要古老得多,也没那么系统。

预设颜色名称是对应固定HEX值的关键字

在CSS里写color: tomato;,和写color: #FF6347;在功能上完全等价。浏览器只是把这个名称替换成预先定义好的HEX值,中间不涉及任何计算。

CSS规范中定义了147个预设颜色名称

其中包括像gray和grey这样美式、英式拼写不同但对应同一个色值的名称,两者最终都解析为相同的颜色。是否把拼写差异算作两个不同的颜色,会让统计出的总数略有不同。

这份名单并非CSS原创,而是源自X11和SVG

这些名称大多数并不是专门为网页设计的,而是可以追溯到20世纪80年代X11窗口系统的颜色列表,后来被SVG采用,CSS又是从SVG那里继承过来的,而不是自己重新设计了一套配色方案。

这些名称在色相上并没有系统化的规律

Tomato(偏橙的红色)、SlateBlue(偏灰的蓝紫色)、Chartreuse(明亮的黄绿色)这类名字,来自历史上比较随意、凭感觉的命名方式,而不是某种系统设计出来的配色体系,所以单凭名字很难准确猜出实际色相。

16个基础颜色和后来扩展的131个颜色

最初的CSS1规范只定义了黑、白、红等16个基础预设颜色;数量大得多的扩展列表是后来加入的,整体照搬自SVG/X11的颜色关键字集合。

transparent是一个特殊的关键字

和其他预设颜色名称不同,transparent对应的不是一个不透明的HEX值,而是表示完全透明的黑色,功能上等同于rgba(0,0,0,0)。

为什么这些名称显得历史感很重、缺乏系统性

这些名称所依据的X11颜色列表,是在20世纪80年代为早期Unix图形系统编制的,主要靠给颜色起一些容易联想到的物品、布料、颜料的名字来命名,而不是依据某种系统化的色相理论。CSS和它之前的SVG,都是为了兼容性和方便,直接整套采用了这份名单,而没有重新设计,这也是为什么这些名称至今看起来更像是历史遗留产物,而不是刻意规划出来的配色系统。

什么时候适合用预设颜色名称,什么时候更适合用HEX或RGB

在快速搭建原型、写便于阅读的示例代码,或者需要用到transparent、currentColor这类没有对应数值写法的CSS关键字时,预设颜色名称确实很实用。但如果需要精确还原品牌色、严格匹配设计系统的调色板,或者需要精细调整色彩,由于预设颜色的调色板是固定的、无法精确表示绝大多数颜色,使用HEX或RGB值会更可靠。

常见问题

CSS里实际支持多少个预设颜色名称?

CSS颜色规范中定义了147个颜色关键字,不过具体数字会因为是否把gray和grey这类拼写差异算作两个颜色而略有不同,这两种拼写最终都会解析为同一个色值。

预设颜色名称在不同浏览器里显示效果一致吗?

是的。由于预设颜色名称在CSS规范中被标准化为固定的HEX值,所有现代浏览器渲染出来的颜色都是一致的,不会像系统字体或表单控件的默认样式那样出现浏览器之间的差异。