CSS Color 值完全指南：从 RGB、HSL 到 HWB 与 LAB 色彩模型

CSS Color（CSS 颜色）是层叠样式表（Cascading Style Sheets）中用于设定元素色彩的关键属性，使开发者能够精确控制文本、背景、边框等视觉元素的色调。借助多种丰富而灵活的色彩定义方式，CSS 实现了对颜色的精细调控。接下来，我们将系统解析其具体实现方法与应用技巧。

一、颜色关键字（Color Keywords）

直接使用预定义的颜色名称，语法简洁直观。

1.1 基本颜色关键字

CSS 定义了 16 种基本颜色（CSS1/2 标准），如：

p { color: red; }     /* 红色 */
p { color: blue; }    /* 蓝色 */
p { color: black; }   /* 黑色 */
p { color: white; }   /* 白色 */

1.2 扩展颜色关键字

CSS3 扩展了大量颜色名称（共 147 种），如：

p { color: tomato; }      /* 番茄红 */
p { color: skyblue; }     /* 天蓝色 */
p { color: mediumseagreen; } /* 中海绿色 */

1.3 系统颜色关键字

与操作系统主题关联的颜色，如：

p { color: ButtonText; }   /* 按钮文本颜色 */
p { color: LinkText; }     /* 链接文本颜色 */

• 备注：系统颜色在现代 CSS 中已较少使用，建议使用自定义颜色以保证跨平台一致性。

二、十六进制颜色（Hexadecimal Colors）

通过红（R）、绿（G）、蓝（B）三通道的十六进制值表示颜色，是 web 开发中最常用的颜色格式。

2.1 六位十六进制（标准）

格式：#RRGGBB，其中 RR、GG、BB 分别为 00-FF 的十六进制值（对应十进制 0-255）。

十六进制数值系统

• 十六进制是一种基数为16的计数系统，使用数字0-9和字母A-F（或a-f）来表示数值。

• 每一位的权重是16的幂次，从右往左依次为16⁰, 16¹, 16²...。

00-FF的数值范围：

• 00 是两位十六进制数的最小值，转换为十进制是 0。

• FF 是两位十六进制数的最大值，转换为十进制是 255。

示例：

p { color: #FF0000; }   /* 红色（R=255, G=0, B=0） */
p { color: #0000FF; }   /* 蓝色（R=0, G=0, B=255） */
p { color: #336699; }   /* 深蓝色 */

2.2 三位十六进制（简写）

若三通道的值两两相同，可缩写为 #RGB （自动扩展为 #RRGGBB）。

示例

p { color: #F00; }      /* 等价于 #FF0000（红色） */
p { color: #00F; }      /* 等价于 #0000FF（蓝色） */
p { color: #369; }      /* 等价于 #336699（深蓝色） */

2.3 八位十六进制（带透明度）

CSS3 新增，格式：#RRGGBBAA ，其中 AA 为 alpha 通道（透明度，00=完全透明，FF=完全不透明）。  

示例：

p { color: #FF000080; } /* 半透明红色（alpha=0.5） */
p { color: #0000FF40; } /* 25% 不透明蓝色 */

理解 #FF000080 中的 80，代表的是 alpha 通道（透明度）。将其转换为 透明度值需要经过以下计算步骤：

步骤一：十六进制到十进制的转换

两位十六进制数 80 转换为十进制的计算方法：

1. 十六进制中，8 对应十进制的 8，0 对应十进制的 0

2. 两位十六进制数的权重：第一位（高位）乘以 16^1，第二位（低位）乘以 16^0

3. 计算公式：8 × 16^1 + 0 × 16^0 = 8 × 16 + 0 × 1 = 128 + 0 = 128

步骤二：归一化到 0-1 范围

Alpha 通道在 CSS 中的取值范围是 0（完全透明）到 1（完全不透明），而两位十六进制数的十进制范围是 0-255。因此需要将十进制值归一化：

• 透明度 = 十进制值 ÷ 255

• 对于 128：128 ÷ 255 ≈ 0.50196，通常四舍五入为 0.5

三、RGB 与 RGBA

通过红、绿、蓝三通道的十进制值表示颜色，RGBA 在此基础上增加了 alpha 通道（透明度）。

3.1 RGB

格式：rgb(r, g, b) 或 rgb(r g b)（空格分隔），其中 r、g、b 可为：  

• 整数（0-255）；

• 百分比（0%-100%）。

示例：

p { color: rgb(255, 0, 0); }        /* 红色（整数） */
p { color: rgb(100%, 0%, 0%); }     /* 红色（百分比） */
p { color: rgb(51, 102, 153); }     /* 深蓝色（整数） */

3.1 RGBA

格式：rgba(r, g, b, a) ，其中 a 为透明度（0=完全透明，1=完全不透明）。

示例：

p { color: rgba(255, 0, 0, 0.5); }  /* 半透明红色 */
p { color: rgba(0, 0, 255, 0.25); } /* 25% 不透明蓝色 */

四、HSL 与 HSLA

基于色相（Hue）、饱和度（Saturation）、亮度（Lightness）的色彩模型，更符合人眼对颜色的感知，便于调整颜色。

4.1 HSL

格式：hsl(h, s, l)，各参数含义：

• h：色相（0-360°，0=红色，120=绿色，240=蓝色）；

• s：饱和度（0%-100%，0%=灰色，100%=纯色）；

• l：亮度（0%-100%，0%=黑色，50%=正常亮度，100%=白色）。

备：上述中的 l 是大写字母 L 的小写形式，也就是 lightness 的首字母。

示例：

p { color: hsl(0, 100%, 50%); }     /* 红色（色相0°，全饱和，正常亮度） */
p { color: hsl(120, 50%, 50%); }    /* 中等饱和度的绿色 */
p { color: hsl(240, 70%, 60%); }    /* 高饱和度的蓝色 */

4.2 HSLA

格式：hsla(h, s, l, a)，增加 alpha 通道控制透明度。

示例：

p { color: hsla(0, 100%, 50%, 0.5); }  /* 半透明红色 */
p { color: hsla(120, 50%, 50%, 0.75); } /* 75% 不透明的绿色 */

五、HWB（色相-白度-黑度）

CSS Color Module Level 4 引入的色彩模型，基于色相（Hue）、白度（Whiteness）、黑度（Blackness），语法更直观。

格式：hwb(h, w, b)，各参数含义：

• h：色相（0-360°，0=红色，120=绿色，240=蓝色）；

• w：白度（0%-100%，混合白色的比例）；

• b：黑度（0%-100%，混合黑色的比例）；

• 可选 alpha 通道：hwb(h, w, b / a）。

示例：

p { color: hwb(0 0% 0%); }      /* 纯红色（无白无黑） */
p { color: hwb(240 30% 20%); }   /* 蓝色，混合30%白色、20%黑色 */
p { color: hwb(120 40% 10% / 0.8); } /* 半透明绿色（白度40%，黑度10%） */

六、LAB 与 LCH（基于 CIELAB 色彩空间）

CSS Color Module Level 4 引入，基于人眼感知的 CIELAB 色彩空间，可表示更广泛的颜色范围（超色域）。

CIELAB

也称为LAB，是一种人眼感知友好的色彩空间，由国际照明委员会（CIE）制定，设计初衷是让色彩的数值差异更接近人类视觉实际感知的差异。

核心特点：设备无关 + 视觉均匀

• 设备无关：同一LAB值在任何显示/打印设备上应该看起来一致（理论上），解决了RGB/CMYK等设备相关色彩空间的“同值不同色”问题。

• 视觉均匀：色彩数值的变化幅度与人类感知的颜色变化幅度基本一致，方便进行精准的色彩调整和比较。

6.1 LAB

格式：lab(l, a, b)，各参数含义：

• l：亮度（0-100，0=黑色，100=白色）；

• a：绿-红轴（负值=绿色，正值=红色，范围无严格限制）；

• b：蓝-黄轴（负值=蓝色，正值=黄色，范围无严格限制）；

• 可选 alpha 通道 lab(l, a, b / a）。

LAB用三个数值描述颜色，就像三维坐标：

示例：

p { color: lab(50 0 0); }       /* 灰色（亮度50，无红绿/蓝黄倾向） */
p { color: lab(60 50 0); }      /* 偏红的颜色 */
p { color: lab(70 0 50 / 0.5); } /* 半透明偏黄的颜色 */

6.2 LCH

格式：lch(l, c, h)，基于 LAB 的极坐标表示，更直观：

• l：亮度（Lightness，0-100，0=黑色，100=白色）；

• c：色度（Chroma，颜色的鲜艳程度，0=灰色，值越大越鲜艳）；

• h：色相（Hue 0-360°）。

• 可选 alpha 通道 lch(l, c, h / a）。

示例：

p { color: lch(50 0 0); }       /* 灰色（无色度） */
p { color: lch(60 50 0); }       /* 红色（色相0°） */
p { color: lch(70 60 240 / 0.5); } /* 半透明蓝色（色相240°） */

七、color() 函数

CSS Color Module Level 4 引入，用于指定不同色彩空间的颜色值，语法更灵活。

格式：color(colorspace params)，常见色彩空间包括：

• srgb：标准 RGB（与 rgb() 等价）；

• srgb-linear：线性 RGB；

• display-p3：广色域 RGB（支持更多鲜艳颜色）；

• a98-rgb：Adobe RGB；

• prophoto-rgb：ProPhoto RGB；

• rec2020：UHD TV 色彩空间。

示例：

p { color: color(srgb 1 0 0); }              /* 标准红色（等价于 rgb(255,0,0)） */
p { color: color(display-p3 1 0 0); }         /* P3 广色域红色（更鲜艳） */
p { color: color(srgb-linear 0 0 1 / 0.5); }  /* 半透明线性蓝色 */

八、currentColor

特殊关键字，继承当前元素的 color 属性值，常用于简化 CSS 代码（如边框、背景色与文本色一致）。

示例：

div {
  color: red;          /* 文本色为红色 */
  border: 2px solid currentColor; /* 边框色继承为红色 */
  background-color: currentColor; /* 背景色继承为红色（文本会看不见，仅作示例） */
}

九、transparent

关键字，表示完全透明的颜色（等价于 rgba(0, 0, 0, 0)）。

示例：

p { color: transparent; }  /* 文本完全透明（不可见） */

总结

CSS color 的值种类丰富，可根据需求选择：

• 快速开发：使用颜色关键字或十六进制；

• 精确控制：使用 RGB/RGBA、HSL/HSLA；

• 直观调整：使用 HWB（色相、白度、黑度）；

• 广色域支持：使用 LAB、LCH 或 color()函数（需现代浏览器支持）；

• 复用颜色：使用 currentColor 继承。

选择合适的颜色格式，可提高代码可读性、维护性，并实现更精准的视觉效果。

颜色集

• CSS 1.0 规范定义了 16 种最基础的 命名颜色（Named Colors），它们是 CSS 中最早支持的颜色集，至今仍被广泛使用。这些颜色有对应的十六进制值，下面是完整列表：

• CSS3（CSS Color Module Level 3）扩展了颜色名称集，从最初的16种增加到了147种。这些颜色基于X11颜色系统，所有现代浏览器都支持。以下是完整列表（按颜色类别分组，包含颜色名称和十六进制值）：

• 以上是CSS3规范定义的全部147（基础色 16种，扩展色 131种）种命名颜色，包含了从基础色系到各种衍生色的完整覆盖，可直接在CSS中通过颜色名称使用，无需记忆复杂的十六进制值。

彩蛋

本文于 Cnb 平台完整呈现了 CSS Color 示例代码，欢迎前往阅读《CSS Color完整示例》以获取详尽内容。