表示一个颜色居然有这么多种方式

书接上文，上回书咱们讲了 CSS 中的前景色和背景色。说白了，所谓的前景色就是给字体设置颜色，不过人家就叫前景色，咱也是没啥办法。背景色相对来说是比较简单的，但是要注意 background-color 属性的默认值是 transparent 表示透明。

知道了怎么设置前景色和背景色了，可是咱们一直都是在用代表某个颜色的英文单词来设置颜色的。这时候，你可能会问了，除了这种方式之外，还有没有其他方式同样可以设置颜色呢？

接下来，咱们就来说一说可以设置颜色值的类型。

颜色值的类型

其实呢，CSS 发展到 CSS3 版本，能用来表示颜色值的方式肯定不能只有英文单词这么简单的方式了。目前，基本上可以分成 3 种，咱们也可以称为设置颜色值的 3 种类型：

• 色彩关键字
• RGB 色彩模式
• HSL 色彩模式

看着这些名字是不是觉得挺专业的？！其实吧，怎么说呢，名字这种东西就是个代号，方便人家记忆的。所以，千万别被名字所迷惑了。

好了，闲话少叙，书归正传。咱们接下来就一个一个的来介绍每一种的使用方式吧。

色彩关键字

先来说说这个所谓的色彩关键字，简单来说，这个就是咱们说的用英文单词来表示某个具体的颜色值，只不过人家给了个相对专业的说法而已。

这个用来表示颜色值的英文单词是不区分大小的，也就是说，你大写小写什么的都是可以的。但是，咱们一般都是使用小写这种形式，比如 red 就表示红色、blue 就表示蓝色等等。当然了，咱现在说的都是比较简单的色彩关键字。

不仅如此，CSS 从 CSS1 版本发展到 CSS3 版本，这个色彩关键字数量的变化还是比较大的：

• CSS1 版本时只有 16 个基本颜色，一般称为 HTML 的基本颜色。
• CSS2 版本时增加了 orange 这种颜色。
• CSS3 版本时增加的颜色数量比较多，具体的你可以参考 MDN 网站有关色彩关键字的文章

这里有一点你可能需要注意一下，除了 CSS1 版本时的 16 个 HTML 基本颜色之外，其他所有颜色都是需要通过特定的计算程序进行转换的。换句话讲，这些颜色在不同的浏览器中显示出来的效果很可能是不一样的。这也是咱们在实际工作中一般很少使用色彩关键字这种方式来设置颜色值的原因。当然了，你平时自己写点小案例什么还是无妨的。

在这些色彩关键字里面，有一个是比较特殊的，就是咱们之前说的 background-color 属性的默认值 transparent，它表示一个完全透明的颜色。

还有就是 transparent 在 CSS2 版本时并不是一个真实的颜色，到了 CSS3 版本时才重新被定义成了一个真实的颜色。当然了，这些你稍微了解一下就行，毕竟并不影响咱们使用不是？！

RGB 模式

说完了色彩关键字之后，咱们再来看看 RGB 模式是怎么样的。RGB 其实是一个缩写，全称是 Red-Green-Blue，表示的是红-绿-蓝。RGB 一般被叫做三原色，可是这个三原色有很多种呢，可不一定是红绿蓝这三个颜色。所以说呢，咱们现在 CSS 里面用的是原来工业上的一种颜色标准。

当然了，这些你了解一下就行，也不必深究。在实际使用的时候，咱们就是通过这三个颜色变化得到咱们最终想要的颜色。这么说有一点点抽象，咱们还在在一个例子里面来说比较好。

首先，在说例子之前，咱们要先说一下在 CSS 中的 RGB 模式实际上有两种具体的用法：

• 十六进制符号
• 函数符

现在这么说，你肯定是一脸懵逼的，是不？！没事儿，咱慢慢地来了解它就行了。那么，咱们就先来说说所谓的十六进制符号的这种。

这种使用方式具体就是 #RRGGBB，也就是说，是一个 # 符号后面跟着 6 个字母，这 6 个字母就被称为十六进制符号。它们的值范围是从 0 ~ 9，然后再从 A ~ F，一共是 16 位。

然后呢，每两位表示一个颜色，6 位刚好表示三个颜色值。比如如果咱们想设置的颜色为红色的话，就是 #FF0000。

这样，咱们就可以通过改变三个颜色的值来得到咱们最终想要的颜色了。这时候你可能会问了，有些颜色很难一下子就知道对应的红色、绿色和蓝色的值是多少，那要怎么设置呢？其实呢，这个问题咱们可以通过两种方式来解决：

• 目前网上有很多提供颜色的 RGB 值的网站，比如比较经典的有 Web 安全色。基本上，你自己搜索一下就会得到很多结果了。
• 如果你做的案例是参考某个现有的网站或者 Web 应用的话，现在有很多的颜色取色器，也可以得到你想要颜色的 RGB 值。

上面说的这两种方式，基本上都是你自己练习做一些项目的时候能用上。如果是在工作中的话，一般颜色的值都是由设计人员来确定的，你只要用就可以了。所以就不要纠结这个问题了！

不过，咱们得说另外一个事儿，就是如果像刚才咱们设置红色的 RGB 值一样的话，你会发现表示三个颜色的两位值是一模一样的，比如 ff、00，这个时候咱们是可以省略一位的，就变成了 #f00。

接下来，咱们就在一个案例中来尝试用一下 RGB 模式的颜色值：

<style>
	.p1 {
		color: #ff0000;
	}
	.p2 {
		color: #f00;
	}
</style>
<p class="p1">这是一个段落内容.</p>
<p class="p2">这也是一个段落内容.</p>

然后，咱们运行这样的 HTML 页面：

通过运行的 HTML 页面的效果，咱们可以看到两种方式的 RGB 模式的颜色值都是有效的。咱们就这样愉快地掌握了十六进制符号方式的 RGB 模式了，接下来，咱们再来说说函数符方式的 RGB 模式吧。

CSS 提供的函数符方式的 RGB 模式实际上就是提供了一个 rgb() 函数，然后这个函数里面接收 3 个参数，分别表示红色、绿色和蓝色。在这种方式中颜色值的范围可以用 0 ~ 255 之间的数字来表示，也可以用 0% ~ 100% 之间的百分值来表示。

这么说还是有些不好理解，咱们还是在案例里面用一下就明白了：

<style>
	p {
		color: rgb(255, 0, 0);
	}
</style>
<p>这是一个段落内容.</p>

然后，咱们运行这样的 HTML 页面：

咱们可以看到运行后的 HTML 页面，函数符方式的 RGB 模式依旧是有效的。这时候，可能你会问了，RGB 模式提供了两种方式，那我要用哪一种呢？其实你用哪一种都是可以的，因为它们之间是没有差异的，除了写法不同之外。

HSL 模式

搞定了 RGB 模式之后，咱们就剩最后一种设置颜色值的方式了 - HSL 模式。HSL 模式是 CSS3 版本新增的一种用来设置颜色值的方式，HSL 也是缩写，全称是 Hue-Saturation-Lightness，表示的是色调-饱和度-亮度。懵逼了吧？！说心里话，我第一次看到的时候也懵逼了。色调？饱和度？亮度？这都是啥啊？！直接怀疑人生了。

当初为了搞定 HSL 模式的颜色值，我专门去研究了一下啥叫色调、饱和度和亮度。简单来说，咱们可以这么理解：

• 色调：就是用来设置颜色显示的相对明暗程度。
• 饱和度：就是用来设置颜色中包含灰色的多少，比如灰色的含量是 0，那就是饱和度最大的，反之就是最小。
• 亮度：就是用来设置颜色中包含黑色的多少，比如黑色的含量是 0，那就是亮度最大的，反之就是最小。

还是有些懵吧？！没事儿，针对没事儿，说心里话我也不是很能理解！尤其是色调，饱和度和亮度可能还好理解一些，毕竟咱们不是一个设计专业出身的。

咱们还是回到 CSS 里面的 HSL 模式吧，接下来咱们来说说怎么来进行设置：

• H 表示色调，它的值范围是 0 ~ 360 之间的一个角度值。
• S 表示饱和度，它的值范围是 0% ~ 100% 之间的百分值。
• L 表示亮度，它的值范围是 0% ~ 100% 之间的百分值。

所以，如果想要用 HSL 模式来设置颜色值的话，可以这样来写：

<style>
	p {
		background-color: hsl(22, 90%, 49%);
	}
</style>
<p>这是一个段落内容.</p>

说实话，上面例子里面的 HSL 模式的三个值，我是随便写的。所以，具体会是什么颜色，我也不晓得，咱们运行一下来看看吧：

写在最后的话

看到这儿了，说明设置颜色值的三种方式你都已经清楚了。你可能已经注意了，我没有说掌握了，而是清楚了。为啥呢？因为清楚了不见得是掌握了，尤其是 HSL 模式这种，对吧？！

最后我想和你说说我个人在设置颜色值的经历：

• 色彩关键字：这种方式我一般都是用在测试页面效果或者在写一些自己的 Demo 时会用，反正对颜色的要求不是很高的时候。
• RGB 模式：这种方式我基本上都是在工作中的项目中使用，但大部分都是设计人员直接提供给我的，或者我用取色器直接从设计稿中得到的。真的很少自己去搞这个 RGB 值！
• HSL 模式：这种方式至今为止我就没用过，可能将来我也不会用吧！因为我觉得 RGB 模式已经足够了。

之所以要说 HSL 模式，即使是在搞得不是很明白的情况下，毕竟这种方式是 CSS3 版本新增的方式，可能在将来的某个时候就变成的主流了呢？！还是先了解了解，等将来真的要使用的时候不至于一脸懵逼，你说是不是？！