HTML基础教程（二十七）颜色之颜色名&颜色值：色号求生指南：告别“屎黄”和“基佬紫”的CSS崩溃瞬间！

第一章：颜色的“曾用名”与“身份证”——为什么需要两种定义方式？

在HTML和CSS的世界里，颜色定义就像人类的社会身份——既有“马云”、“马斯克”这样耳熟能详的名字，也有“330102196508150016”这样精确唯一的身份证号码。

颜色名就是颜色的“常用名”，比如red、blue这种人类友好型标签；而颜色值则是颜色的“身份证号码”，无论是十六进制的#FF0000还是RGB的rgb(255,0,0)，都能实现精确到数字级的颜色控制。

为什么需要两种方式？想象一下：如果你对装修师傅说“我要一面淡蓝色的墙”，很可能得到完全不符合预期的结果；但如果说“我要潘通色卡上的14-4312TCX号色”，就能精准获得你想要的色彩。前者是颜色名，后者是颜色值。

第二章：颜色名大全——从“姨妈红”到“基佬紫”的民间命名史

2.1 基础16色：Web的元老级配色

HTML最初只定义了16种基础颜色，这些颜色直到今天仍然被所有浏览器支持：

<!-- 经典16色示例 -->
<div style="color: black;">black - 经典黑</div>
<div style="color: white; background: black;">white - 纯白白</div>
<div style="color: red;">red - 番茄红</div>
<div style="color: green;">green - 其实偏绿</div>
<div style="color: blue;">blue - 宝蓝</div>
<div style="color: yellow;">yellow - 香蕉黄</div>
<div style="color: purple;">purple - 紫罗兰</div>
<div style="color: gray;">gray - 五十度灰</div>
<!-- 更多基础色... -->

有趣的是，green在Web标准中实际对应的是#008000，是一种相对较暗的绿色，而不是许多人想象中的鲜绿色。这就是使用颜色名的风险——你以为的绿可能不是代码里的绿。

2.2 扩展130+色：X11的颜色狂欢

随着Web发展，更多颜色名被引入，最终形成了147种标准颜色名（加上16种基础色）。这些新增颜色名大多来自X11窗口系统的配色方案，包括了一些非常有意思的命名：