Web前端入门第 25 问：CSS 中 11 种颜色写法

nhLHF3qy · 3 天前

曾经，CSS 颜色的写法很专一，就只有十六进制写法（#ff0000）和关键字写法（red）。
现在，它变了，变得花样多了，各种招式眼花缭乱。
以红色（red）为例：
1. 颜色关键字

直接使用预定义的颜色名称：
color: red;

2. 6位十六进制

使用完整的 6 位十六进制（#RRGGBB）：
color: #ff0000;

3. 3位十六进制

使用简写的 3 位十六进制（#RGB）：
color: #f00; /* 等价于 #ff0000 */

4. 8位十六进制（带透明度）

使用 8 位十六进制（#RRGGBBAA），最后两位表示透明度（00为完全透明，ff为不透明）：
color: #ff000080; /* 红色，50% 透明度 */

参数：
ff: 红色分量（255）；
00: 绿色分量（0）；
00: 蓝色分量（0）；
80: 透明度分量（十六进制 80 = 十进制 128，即 50% 透明度）。

5. RGB 函数

使用 rgb() 函数指定红、绿、蓝分量（0-255）：
color: rgb(255, 0, 0);

6. RGBA 函数

使用 rgba() 函数，额外指定透明度（0-1）：
color: rgba(255, 0, 0, 0.5); /* 红色，50% 透明度 */

7. HSL 函数

使用 hsl() 函数通过色相（0-360）、饱和度（0%-100%）、明度（0%-100%）表示：
color: hsl(0, 100%, 50%); /* 色相 0 度（红色），100% 饱和度，50% 明度 */

参数：
0: 色相（0-360 度，0°=红色，120°=绿色，240°=蓝色）；
100%: 饱和度（0%=灰色，100% 最鲜艳）；
50%: 明度（0%=黑色，100%=白色，50% 为基准颜色）。

8. HSLA 函数

使用 hsla() 函数，额外指定透明度（0-1）：
color: hsla(0, 100%, 50%, 0.5); /* 红色，50% 透明度 */

9. HWB 函数（较新）

使用 hwb() 函数通过色相（0-360）、白度（0%-100%）、黑度（0%-100%）表示：
color: hwb(0 0% 0%); /* 色相 0 度，0% 白度，0% 黑度 */

参数：
0: 色相（0-360 度）；
0%: 白度（混合白色的比例，0%-100%）；
0%: 黑度（混合黑色的比例，0%-100%）。
注意：白度 + 黑度 ≤ 100%，超出会被规范化。

浏览器兼容性：

10. LAB() 函数（较新）

基于 CIE LAB 颜色空间（人眼感知的色彩模型）：
color: lab(53.23% 80.09 67.2); /* 亮度 53.23%，a 轴 80.09，b 轴 67.2 */

参数：
53.23%: 亮度（Lightness），范围 0%-100%；
80.09: a 轴（绿-红轴），负值偏绿，正值偏红；
67.2: b 轴（蓝-黄轴），负值偏蓝，正值偏黄。

浏览器兼容性：

11. LCH() 函数（较新）

基于 LCH 颜色空间（亮度、色度、色相的极坐标形式）：
color: lch(53.23% 104.55 40.85); /* 亮度 53.23% ，色度 104.55 ，色相 40.85 */

参数：
53.23%: 亮度（Lightness），范围 0%-100%；
104.55: 色度（Chroma），数值越大颜色越鲜艳；
40.85: 色相（Hue），0-360 度的角度值（红色约在 0-50 度之间）。

浏览器兼容性：

<hr>最新版本的 Chrome 浏览器已支持全部写法，如图：

删除线并不是说不支持这种写法，而是同一条规则中相同的 css 属性，只会有一条生效，其他的将会被丢弃。
总结

共 9 种常见写法，涵盖颜色关键字、十六进制、RGB/RGBA、HSL/HSLA 和 HWB。
其他高级颜色空间（如 lab()、lch()）根据兼容情况，选择性使用。