第十八讲：在帖子中使用常规CSS颜色

现代浏览器普遍支持的CSS颜色主要有四种：标准颜色名称、十六进制、rgb/rgba 和 hsl/hsla。我们来逐一认识它们：

一、标准颜色名称

有140多种常用颜色被预定义了英文名称，可以直接使用，例如我们设置文本颜色为红色，可以这样：color: red;。这些颜色名称将来可能还会增加，比如，2014年增加的一种颜色叫 rebeccapurple， 丽贝卡紫色 ，这背后有一个感人的故事：Eric A. Meyer是CSS标准重要的贡献者，其6岁的女儿不幸因脑癌夭折，人们为了纪念她，提议将Rebecca生前最喜欢的颜色命名为 beccapurple 且被采纳，Eric得知此事后强烈建议要使用 rebeccapurple 命名，原因是他女儿生前最大的愿望是自己能长大成人，不应使用小名 becca，最终，该颜色就命名为 rebeccapurple，对应于十六进制的 #663399。也许，不是所有的标准颜色名称背后都有着感人的故事，但它们都是实实在在的，拿来即用。以下例子，使用标准颜色名称给元素制定背景色、前景色、边框颜色以及盒子和文本的阴影颜色等：

<style>
.cbox1 {
	width: 400px;
	min-height: 100px;
	color: yellow; /* 前景色 ：黄色 */
	text-shadow: 2px 2px 3px gold; /* 文本阴影 ：金黄 */
	background-color: rebeccapurple; /* 背景色 ：丽贝卡紫 */
	box-shadow: 3px 3px 28px dimgray; /* 盒子阴影 ：昏灰 */
	border: 1px solid gray; /* 边框颜色 ：灰色 */
	font: bold 2.4rem sans-serif;
	padding: 10px;
}
</style>

<div class="cbox1">CSS颜色</div>

点击查看效果

英文基础不太好的童鞋记住颜色名称可能有些难度，没关系，可以查资料，网上很多，这里是一份 《中英文颜色对照表》，可秒开，资料来源较早，没有收录 rebeccapurple 这个有特殊意义的颜色。需要明白的是，原则上英文名称均使用小写，不过使用大写并无大碍。

二、十六进制颜色

有童鞋知道罩杯的来源吗？为啥用ABCDEF命名？这和十六进制有关。十六进制是中国人发明的，半斤八两一词就是明证。所以，我们学习十六进制并不难，难的是后来为了表达需要，统一使用如下的方式构造十六进制的每一个组成数字：

0123456789ABCDEF

A在这里代表十进制的10，F则是15，没有16，因为十六进制逢16就进位。罩杯就是用十六进制后一节的字母数字，后来扩展到了G那是严重违规的虽然很科学，根源是激素或手术吧。男生也不必伤心，0~9归咱们……不管这个了，我们还是来理解十六进制颜色吧。十六进制颜色要有前缀，一个 # 号，例如红色，写成十六进制是 #ff0000，一个#号带6位十六进制格式的数字，字母数字提倡用小写，但大写也无妨。为什么是6位呢？

原来，这和web三原色有关，红绿蓝，注意颜色的顺序，所有的web颜色都是用它们仨混合而成，每一种颜色分派两个十六进制数字。我们举一个例子，红的成分是00，绿的成分是00，蓝的成分是ff，构成的颜色就是 #0000ff，蓝色。这里，00表示参与的成分没有，就是说红和绿不参与混色，而蓝以最大的数值ff加进去，全色参加了，所以就是纯蓝色。

【提示】标准颜色名称的纯绿色用十六进制表示道理上应该是 #00ff00（lime，绿黄、酸橙），但实际上是 #008000（green，纯绿），这大约与早期的显卡渲染颜色的能力低下、相关程序为了解决显示问题而将就有关，然后将错就错、一错再错，一直沿用至今。标准颜色名称的定性我们要理解，同时不能让命名习俗影响我们对十六进制颜色构成的理解。

十六进制颜色表达结构总结起来是 #RRGGBB，R=红色，G=绿色，B=蓝色，每一种颜色的参与都是两个十六进制数字，00表示颜色参与度为0，ff表示颜色参与度为最高份额。十六进制理论上共能组成 16*16*16*16*16*16=16,777,216 种颜色。十六进制颜色存在缩写形式，一般针对单一数字构成的颜色，比如黑色、白色分别可以写成 #000 和 #fff，其他的缩写方式请自行网补。

此外，十六进制颜色还支持透明度的直接表达，方法是在6位数的基础上再加两位十六进制的数字，必须凑足8位数。透明度设为 00 表示完全透明即透明度为 0，此时颜色渲染不出来，设为 ff 表示完全不透明即透明度为 1，此时颜色为纯色。下面例子的背景颜色演示了8位数的十六进制颜色，单击演示界面的盒子可在透明度 ff 和 00 之间切换：

<style>
.cbox2 {
	width: 400px;
	height: 100px;
	background: #ffcc66ff; /* 背景颜色第七、八位数为ff，完全不透明，等同于 #ffcc66  */
	border: 1px solid #808080; /* 灰色边框 */
	padding: 10px;
	user-select: none; /* 禁止选中文本等元素 */
}
</style>

<div class="cbox2" id="cb2">戳我 ：背景颜色将在 #ffcc66ff 和 #ffcc6600 两者间来回切换</div>

<script>
var bgIdx = 0;
cb2.onclick = () => {
	bgIdx = bgIdx === 0 ? 1 : 0;
	cb2.style.setProperty('background', ['#ffcc66ff','#ffcc6600'][bgIdx]);
};
</script>

点击查看效果

三、rgb、rgba颜色

rgb颜色可以看成是十六进制颜色的白话版。说它是白话版的十六进制颜色，是因为它也是采用rgb三原色混合成所需颜色，理论上总共也是能生成 256*256*256=16777216 种颜色，但它的表示法更为直观，结构直接采用 rgb(R,G,B) 这样的方式，其中 R=红，G=绿，B=蓝，颜色顺序与十六进制颜色完全相同，每一种颜色的取值范围均为 0~255（含头尾数），各颜色单元间用小角逗号隔开（将来的统一标准是用空格隔开）。例如红色，rgb(255,0,0)，绿色，rgb(0,255,0)【传统绿色，rgb(0,128,0)，道理请参阅介绍十六进制颜色时的说明】，蓝色，rgb(0,0,255)。

而 rgba() 函数则是在 rgb() 函数基础上多出一个 alpha 通道数值参数，取值范围在 0~1 之间（含头尾数值），0 表示完全透明，1 表示完全不透明。这个也比十六进制颜色的透明度更简易，使用的是十进制的浮点数。

提示：rgb/rgba 是绝大多数现代浏览器默认使用的颜色表达体系。但浏览器非常聪明，当使用了其他先进的颜色表达法，浏览器只要支持都可以识别并使用该颜色表达体系对页面相关内容的进行颜色渲染。

四、hsl、hsla颜色

hsl颜色则是不同于前面任何一种表达体系，它包含有色相（h，即hue）、饱和度（s，即saturation）和亮度（l，即light）。一般来说，正常的颜色表达，饱和度 s 的值应为100%，100%表示颜色的纯度为正常纯度，0% 颜色为纯灰即没有颜色；亮度 l 的正常值是 50%，0%是没有亮度，任何颜色都只看到黑色，100%表示全明，任何颜色都是白色；而色相 h，指色轮上从 0 到 360 的度数，红绿蓝在色轮上的度数依次为0、120、240。度数可以是浮点数，所以，hsl颜色体系理论上可以构成无数的颜色。

以下色盘，我们使用锥形渐变来实现，色相 h 从 0 到 360 按 1 的步进依次展开，饱和度 s 固定为 100%、亮度 l 固定为 50% 以保证颜色的纯正：

<style>
#colorBox {
	width: 300px;
	height: 300px;
	border-radius: 50%;
}
</style>

<div id="colorBox"></div>

<script>
var ar = Array.from({length: 360}).fill(0).map((_,key) => `hsl(${key}, 100%, 50%)`);
colorBox.style.background = `conic-gradient(${ar.join(',')})`;
</script>

点击查看效果

上面的色盘红色始于十二点钟方向，但我们看到，十二点钟方向左右都是红色系。实际上，圆的0度和360度重合，这意味着正十二点钟方向的颜色为纯红色，两边同系但不可能同色，依次与相邻的色相混合过渡，肉眼能否明显分辨是另一码事。其他原色色系同理，纯绿色在正四点钟方向，纯蓝色在八点钟方向，也是分两边依次向相邻色相渐变过渡。另外，两个三原色之间存在一个反差较大的色系，如两点钟方向纯黄，六点钟方向纯青，十点钟方向纯紫，它们（色系）的存在是两种相邻三原色混合的结果——换言之，红+绿=黄，绿+蓝=青，蓝+红=紫。

【提示】JS生成360个hsl颜色非常高效，一句代码生成数组，数组元素记录从0到359的hsl颜色，另一句代码将数组内容与锥形渐变语句拼凑起来并将所得结果给元素背景赋值。

hsla 与 rgba 同理，a 指 alpha 通道，a 值为 0 颜色完全透明，为 1 完全不透明。

CSS还有其他新生或偏门的颜色表达体系，由于兼容性问题，它们要流行起来还需时日，得等待浏览器的陆续支持。这些，这里就不介绍了，学透本讲的四种颜色表达法，做音画帖绰绰有余。

作业一：做四个 400*100 的元素，给元素背景设置同一种自己最喜欢的颜色，要求依次使用 ① 标准颜色名称、② 十六进制、③ rgb、④ hsl 这四种颜色表达法来实现背景颜色的设置。最终的背景颜色应为纯色，不含透明度。

作业二：任选一种颜色表达法，做一个有 ::before 和 ::after 伪元素的元素，伪元素尺寸小于元素尺寸并 ::after 比 ::before 小一些，要求宿主元素、伪元素都有一定的透明度。

返回目录