前言

CSS 中经常需要指定一个颜色，有以下几种方法可以让我们表达一个颜色。

颜色关键字
RGB
RGBA
十六进制
HSL
HSLA

颜色关键字

在 CSS 中可以用一些简单的关键字来表示生活中常用的颜色，比如 pink 表示粉色， red 表示红色，可以参考 MDN 的颜色关键字表格。

RGB

RGB color model（三原色光模式）又被称为红绿蓝颜色模型，它是将红（Red）、绿（Green）、蓝（Blue）三种颜色的光混合来表示各种颜色。

通过色散实验，通过三棱镜可将光折射出彩色光。并且选择三种有相当差距的基本色光，按照不同比例组合即可产生任何颜色，其中以红、绿、蓝最为适用。

现在的绝大多数显示设备都是采用的 RGB 发光原理，屏幕上的每一个像素点都由红绿蓝三个发光二级管组成，通过控制发光二级管的强弱来显示指定的颜色。

因此我们使用 RGB 来表示颜色时就是指定红绿蓝三个颜色的发光程度，取值范围是 0 ~ 255。这意味着我们总共可以表示 256 x 256 x 256 = 16777216，总计一千六百多万个颜色。

RGB 表示颜色的语法如下，用 rgb 把三个数值括起来，用逗号间隔，比如以下表示红色255，绿色0，蓝色0：

h1 {
    color: rgb(255, 0, 0);
}

$$tip

有关 RGB 颜色的取色可以参考辅助工具部分。

RGBA

RGBA 只是比 RGB 多了一个 alpha 通道，用来表示颜色的不透明度， alpha 的取值范围是 0 ~ 1，0就是完全透明，而 1 是完全不透明。

h1 {
    color: rgba(255, 100, 0, 0.3);
}

十六进制

十六进制其实就是 RGB 的十六进制写法，所谓十六进制就是逢 16 进 1，一般用数字 0 ~ 9 和字母 A ~ F 表示。

在 CSS 中使用 # 号开头表示这是一个十六进制的数字，两位的十六进制可表示 256 个数字，与 RGB 中的取值范围 0 ~ 255 相等。因此用十六进制表示颜色时头两位表示红色，中间两位表示绿色，后两位表示蓝色。

比如我们有一个颜色用 RGB 表示是 rgb(255, 100, 0)，那转换成十六进制就是，红色 FF，绿色 64，蓝色 0，那就十六进制表示相同的颜色就是 #FF6400。

$$warning

当十六进制只有一位时，应当在前面补 0 补足两位。比如 rgb(5, 5, 5) 用十六进制表示应该是 #050505。

h1 {
    color: #ff6400;
}

$$tip

在线进制转换器。

3位数的表达方式

16 进制的颜色也可以使用 3 位数的表达方式，此时每位的取值为 0 ~ f ， 0 表示不发光， f 表示完全发光。

比如以下代码：

<h1>#19e</h1>
<h2>#1199ee</h2>

<style>
    h1 {
        color: #19e;
    }
    h2 {
        color: #1199ee;
    }
</style>

$$demo

3 位数颜色与 6 位数颜色间可以相互转换，以 #19e 为例，括号内为 10 进制：

R（red）：1 / f（15）* ff（255）= 11（17）
G（green）：9 / f（15）* ff（255）= 99（153）
B（blue）：e（14） / f（15）* ff（255）= ee（238）

十六进制透明通道

如同 RGBA 一般，可以加入一个 alpha 通道，用来表示颜色的不透明度，此时的 alpha 的取值范围是 0 ~ FF，0 表示完全透明， FF 表示完全不透明。

h1 {
    color: #ff640066;
}

HSL

HSL 表示的是色相（Hue）、饱和度（Saturation）、亮度（Lightness）。色相的取值范围是 0 ~ 359，饱和度与亮度的取值范围是 0% ~ 100%。可以用 HSL 在线取色工具进行取值。

h1 {
    color: hsl(40, 82%, 74%);
}

HSLA

HSLA 只是比 HSL 多了一个 alpha 通道，用来表示颜色的不透明度。 alpha 的取值范围是 0 ~ 1，0就是完全透明，而 1 是完全不透明。

h1 {
    color: hsla(40, 82%, 74%, 0.4);
}

辅助工具

Windows 画图工具

按 WIN+R 打开运行工具，输入 mspaint 可以打开画图工具。点击编辑颜色可以调配我们想要的颜色 RGB 数值。

微信截图

按 ALT+A 可以打开微信截图，截图工具会显示当前鼠标指针指向的 RGB 数值。

Snipaste 截图工具

Snipaste 是一款很优秀的截图工具，能让我们取 RGB 或十六进制的颜色数值。

练习

以下色块的颜色用 RGB 表示是多少？

$$demo

</div>

以下色块的颜色用十六进制表示是多少？

$$demo

</div>

以下色块的颜色用 HSL 表示是多少？

$$demo <div style=" width: 100px; height: 100px; background-color: hsla(188, 77%, 60%); ">

</div>

#4a8 这个颜色用 6 位来表示等于什么？