CSS 颜色模块 第4级

1. 引言

本节不是规范性的。

本模块描述了 CSS 属性，这些属性允许作者指定元素文本内容的前景颜色和不透明度。 本模块还详细描述了 CSS <color> 值类型。

它不仅定义了已经存在于 CSS1、CSS2 和 CSS Color 3 中的与颜色相关的属性和值， 还定义了新的属性和值。

特别是，它允许在 sRGB 之外的其他 颜色空间 中指定颜色； 以前，即使显示设备支持，更饱和的颜色（超出 sRGB 色域的颜色）也不能在 CSS 中使用。

可用的 草稿实现报告 已发布。

1.1. 值的定义

本规范遵循 CSS属性定义约定（见 [CSS2]）， 并使用 值定义语法（见 [CSS-VALUES-3]）。 未在本规范中定义的值类型，参见 CSS数值与单位 [CSS-VALUES-3]。 与其它CSS模块的结合可能会扩展这些值类型的定义。

除了在定义中列出的特定于属性的值外，本规范中定义的所有属性还接受 CSS-wide 关键字 作为其属性值。 为了可读性，它们没有被显式重复。

2. 颜色术语

颜色 是对人类视觉对光线或被光照亮的物体的视觉感知的定义（数值或文本）。 对人类颜色感知的客观研究称为 颜色测量学。

物体的颜色取决于它在每个可见波长上反射的光的多少， 以及照亮它的光的实际颜色（同样是每个波长上的光量）。 它通过分光光度计进行测量。

发光物体的颜色（包括计算机屏幕上的颜色） 取决于它在每个可见波长上发射的光的多少。 它通过分光辐射计进行测量。

如果两个物体具有不同的光谱，但仍然产生相同的物理感觉， 我们说它们具有相同的颜色。 我们可以通过将光谱转换为 CIE XYZ（三个数字）来计算两个颜色是否相同。

颜色空间 是对颜色相对于基础颜色测量学模型的组织， 使得在该颜色空间中任何颜色都有明确的、可客观测量的含义。 这也意味着相同的颜色可以在多个颜色空间中表示， 或从一个颜色空间转换为另一个颜色空间， 同时看起来保持相同。

 color(sRGB 0.41587 0.503670 0.36664);
 color(display-p3 0.43313 0.50108 0.37950);
 color(a98-rgb 0.44091 0.49971 0.37408);
 color(prophoto-rgb 0.36589 0.41717 0.31333);
 color(rec2020 0.42210 0.47580 0.35605);

加色色彩空间意味着坐标系在光强度上是线性的。 CIE XYZ 色彩空间是一种加色色彩空间。 XYZ 的 Y 分量是亮度，即单位面积的光强度， 或者说“它有多亮”。亮度以坎德拉每平方米 (cd/m²) 为单位进行测量， 也称为尼特。

在加色色彩空间中，可以进行计算 以准确预测颜色混合。大多数 RGB 空间 不是加色的，因为其分量是伽马编码的。取消这种伽马编码 会产生线性光值。

色度 是将亮度分量排除后的颜色测量值。 从上述相同的灯光示例中，一个灯光的u',v' 色度为 (0.2537, 0.5268)， 而两个灯光的色度相同（它们的颜色相同，只是更亮）。

色度是加性的， 因此它可以准确预测混合物的色度（但不能预测其产生的亮度）。 色度是二维的，因此可以在色度图上轻松表示，以预测颜色混合的色度。 任何两个颜色都可以混合，结果颜色将位于图上连接它们的直线上。 三种颜色形成一个平面，结果颜色将位于它们在图上形成的三角形内。

因此，一旦线性化，RGB 色彩空间就是加色的， 它们的色域由红、绿、蓝三原色的色度， 加上白点（所有三种原色都达到最大强度时形成的颜色）的色度定义。

大多数色彩空间使用少数几种模拟日光的白点之一， 这些白点以相应黑体辐射器的相关色温 (CCT) [Understanding_CCT] 命名。 例如，D65 是一个日光白点， 对应于 6500 开尔文的相关色温 （实际上是 6504， 因为自从最初定义该颜色以来，普朗克常数的值已发生变化）。

为了避免累积的往返误差， 在计算的所有地方必须一致地使用相同的色度值， 这样才能实现最大兼容性。 因此，在本规范中定义了以下两个标准的白昼模拟白点：

当已知颜色空间或产生颜色的设备的物理特性 （例如其使用的基色的色度， 或对一组给定输入的响应所产生的颜色）时， 我们称它为已表征。

如果另外进行了调整，使设备满足校准目标，例如白点、中性色、调响应的可预测性和一致性， 那么它被称为已校准。

目前的物理设备还无法产生人眼可以看到的每种可能颜色。 给定设备能够产生的颜色范围称为色域 （不要与伽马混淆）。 色域有限的设备无法产生非常饱和的颜色， 如彩虹中的颜色。

不同颜色空间的色域可以通过查看可以表示的颜色体积（以立方 Lab 单位为单位）来比较。 下表检查了 CSS 中可用的预定义颜色空间。

CSS 中的颜色要么是无效颜色， 如下所述的每种语法形式， 要么是有效颜色。

任何不是无效颜色的颜色都是有效颜色。

某些颜色可以是有效颜色， 但仍然超出输出设备（屏幕、投影仪或打印机）可以产生的颜色范围。

这种情况称为超出色域。

每个有效颜色要么对于特定输出设备（屏幕或打印机）在色域内， 要么超出色域。

 color(prophoto-rgb 0.88 0.45 0.10)

 color(display-p3 1.0844 0.43 0.1)

3. 在 CSS 中应用颜色

3.1. 可访问性与通过颜色传达信息

虽然颜色可以为文档增加重要信息并提高其可读性， 但颜色本身不应成为传达重要信息的唯一手段。 作者在文档中使用颜色时应考虑 W3C Web 内容可访问性指南 [WCAG21]。

1.4.1 使用颜色： 颜色不能作为传达信息、指示操作、提示响应或区分视觉元素的唯一视觉手段

3.2. 前景颜色：color 属性

此属性指定元素的主要前景颜色。 它用作文本内容的填充颜色， 并且还指定了 使用的值，currentcolor 将解析为该值， 这允许间接引用该前景颜色，并影响其他各种颜色属性的初始值， 如 border-color 和 text-emphasis-color。

<color>

将主要前景颜色设置为指定的 <color>。

em { color:  lime; }   /* color keyword  */
em { color:  rgb(0 255 0); } /* RGB range 0-255   */
em { color:  rgb(0% 100% 0%); } /* RGB range 0%-100% */
em { color:  color(sRGB 0 1 0); } /* sRGB range 0.0-1.0 */

当应用于文本时，此属性（包括其 alpha 分量）对“彩色字形”没有影响（例如某些字体中的表情符号），这些字形由内置调色板着色。 然而，一些彩色字体能够引用上下文“前景色”， 例如 OpenType 的 COLR 表中的调色板条目 0xFFFF， 或者 SVG-in-OpenType 中的 context-fill 值。 在这种情况下，前景色由此属性设置，与设置 currentcolor 值相同。

3.3. 透明度：opacity 属性

透明度可以被看作是后处理操作。 从概念上讲，在元素（包括其子元素）被渲染为 RGBA 离屏图像后， 透明度设置指定如何将离屏渲染与当前的合成渲染进行混合。 详情见简单的 alpha 合成。

<不透明度值>

应用于元素的透明度。 最终的透明度应用于整个元素，而不是某个特定颜色。

透明度值超出范围 [0,1] 并非无效，且在指定值中会被保留， 但在计算值中会被限定在 [0, 1] 范围内。

CSS 中的不透明度使用 <opacity-value> 语法表示， 例如在 opacity 属性中。

<opacity-value> = <number> | <percentage>
        

表示为 <number> 时， 其值的有效范围是 0（表示完全透明） 到 1（表示完全不透明）。 它也可以写成 <percentage>， 其计算结果为等效的 <number>（0% 对应 0，100% 对应 1）。

opacity 属性将指定的不透明度应用于元素 整体， 包括其内容，而不是单独应用于每个子元素。 这意味着，例如，即使 opacity 小于 1， 遮挡部分背景的不透明子元素仍然会继续遮挡，但元素和子元素作为一个整体将显示底层页面。

这也意味着， 元素中所有字符的字形都被 作为一个整体 处理； 任何重叠部分都不会增加不透明度。

如果希望每个字形具有不同的不透明度， 可以通过使用包含 alpha 通道的颜色值来实现， 而不是设置 opacity 属性。

如果一个盒子具有小于 1 的 opacity， 它会为其子元素形成一个堆叠上下文。 （这可以防止其内容在 z 轴上与外部内容交错。）

此外，如果 z-index 属性应用于盒子， 则该元素的 auto 值被视为 0； 否则它会在其父堆叠上下文中与具有堆叠级别 0 的定位元素在同一层上绘制 （就好像它是具有 z-index:0 的定位元素一样）。

更多关于堆叠上下文的信息，请参阅 第 9.9 节 和 附录 E，参见 [CSS2]。

这些关于堆叠顺序的规则不适用于 SVG 元素， 因为 SVG 有其自己的 渲染模型（[SVG11]，第 3 章）。

opacity 属性的值 不会影响命中测试。

3.4. 标记图像的颜色空间

标记图像是指显式分配了颜色配置文件的图像， 由图像格式定义。 这通常通过包含国际色彩联盟（ICC）配置文件来完成 [ICC]。

例如，JPEG [JPEG]、PNG [PNG] 和 TIFF [TIFF] 都指定了一种嵌入 ICC 配置文件的方法。

图像格式也可以使用其他等效的方法，通常是为了简洁。

例如，PNG 指定了一种方法（sRGB 块）， 用于显式地将图像标记为 sRGB 颜色空间， 而无需包含 sRGB ICC 配置文件。

类似地，PNG 指定了一种紧凑的方法 （cICP 块）， 用于显式地将图像标记为各种 SDR 或 HDR 颜色空间之一， 例如 Display P3 或 BT.2100 HLG， 而无需包含 ICC 配置文件。

标记的 RGB 图像， 以及使用 RGB 转换（如 YCbCr）的标记图像， 如果颜色配置文件或其他识别信息有效， 必须被视为处于指定的颜色空间中。

例如，当运行在具有 Display P3 显示器的系统上的浏览器显示一个标记为 ITU Rec BT.2020 [Rec.2020] 色彩空间的 JPEG 图像时，必须将颜色从 ITU Rec BT.2020 转换为 Display P3，以便正确显示。不能将 ITU Rec BT.2020 值视为 Display P3 值，否则会产生错误的颜色。

如果颜色配置文件或其他标识信息无效，则图像将按照未标记图像的描述进行处理。

3.5. 未标记颜色的色彩空间

为了兼容性，HTML 中指定的颜色 以及未标记图像必须被视为 处于 sRGB 色彩空间（[SRGB]） 除非另有规定。

未标记图像是指未根据图像格式定义明确指定颜色配置文件的图像。

此规则不适用于未标记视频，因为未标记视频应假定采用 ITU 定义的色彩空间。

• 低于 720p 时，使用 Recommendation ITU-R BT.601 [ITU-R-BT.601]

• 720p 时，使用 SMPTE ST 296（与 709 具有相同的色彩学） [SMPTE296]

• 1080p 时，使用 Recommendation ITU-R BT.709 [ITU-R-BT.709]

• 4k (UHDTV) 及更高分辨率时，使用 ITU-R BT.2020 [Rec.2020] 用于 SDR 视频

4. 表示颜色: <color> 类型

CSS 中的颜色表示为颜色分量列表， 有时也称为“通道”， 代表色彩空间中的轴。 每个分量都有一个最小值和最大值， 并且可以取这两个值之间的任何值。 此外，每种颜色都附带一个 Alpha 分量， 指示其透明程度， 从而指示可以通过颜色看到多少背景。

CSS 有多种指定颜色值的语法：

• sRGB 十六进制颜色表示法，它以十六进制表示法表示 RGB 和 Alpha 分量

• 各种颜色函数，可以使用各种色彩空间和坐标系表示颜色

• 常量命名颜色关键字

• 变量<system-color>关键字和currentColor关键字。

颜色函数使用 CSS 函数表示法通过指定其分量坐标来表示各种色彩空间中的颜色。 其中一些使用圆柱极坐标颜色模型， 通过<hue>角度、代表亮度 （黑到白）的中心轴， 以及代表饱和度或色度 （颜色与中性灰色的距离）的半径来指定颜色。 其他的则使用矩形正交颜色模型， 使用三个正交分量轴指定颜色。

第 4 级中可用的颜色函数有：

• rgb() 及其 rgba() 别名， 与 十六进制颜色表示法类似，直接通过红/绿/蓝/透明度分量指定 sRGB 颜色。

• hsl() 及其 hsla() 别名， 通过色调、饱和度和亮度 按照 HSL 圆柱坐标模型指定 sRGB 颜色。

• hwb()， 按照 HWB 圆柱坐标模型， 通过色调、白度和黑度指定 sRGB 颜色。

• lab()， 按照 CIE LAB 矩形坐标模型， 通过 CIE 明度和 a、b 轴色调坐标（红/绿与黄/蓝倾向性）指定 CIELAB 颜色。

• lch()， 按照 CIE LCH 圆柱坐标模型 通过 CIE 明度、色度和色调指定 CIELAB 颜色。

• oklab()， 按照 Oklab 矩形坐标模型， 通过 Oklab 明度和 a、b 轴色调坐标（红/绿与黄/蓝倾向性）指定 Oklab 颜色。

• oklch()， 按照 OkLCh 圆柱坐标模型， 通过 Oklab 明度、色度和色调指定 Oklab 颜色。

• color()， 允许在多种色彩空间中指定颜色， 包括 sRGB、 线性光 sRGB、 Display P3、 线性光 Display P3、 A98 RGB、 ProPhoto RGB、 ITU-R BT.2020-2， 以及 CIE XYZ。

为便于其他规范引用， 不透明黑色 定义为 颜色 rgb(0 0 0 / 100%)； 透明黑色 为同样的颜色， 但完全透明，即 rgb(0 0 0 / 0%)。

4.1. <color> 语法

在 CSS 中，颜色由 <color> 类型表示：

<color> = <color-base> | currentColor | <system-color>

<color-base> = <hex-color> | <color-function> | <named-color> | transparent
<color-function> = <rgb()> | <rgba()> |
              <hsl()> | <hsla()> | <hwb()> |
              <lab()> | <lch()> | <oklab()> | <oklch()> |
              <color()>

绝对颜色是一个 <color>，其计算值具有绝对的、色度学解释。这意味着该值不是：

• currentColor（它取决于 color 属性的值）

• 一个 <system-color>（它取决于颜色模式）

解析为 sRGB 的颜色有：

• 十六进制颜色

• rgb() 和 rgba() 值

• hsl() 和 hsla() 值

• hwb() 值

• 命名颜色

支持旧版颜色语法的函数有：

• rgb() 和 rgba()

• hsl() 和 hsla()

<hsl()>、<hsla()>、<hwb()>、<lch()> 和 <oklch()> 颜色函数是使用 <hue> 角度的圆柱极坐标颜色表示法； 其他颜色函数使用矩形正交颜色表示法。

4.1.1. 现代（空格分隔）颜色函数语法

本规范中首次定义的所有绝对颜色函数形式 都使用现代颜色语法， 这意味着：

• 颜色分量由空格分隔

• 可选的 alpha 项由斜杠 (“/”) 分隔

• 序列化时的最低所需精度已定义， 并且可能大于每个分量 8 位

• 允许使用 none 值来表示缺失的分量

• 使用 <percentage> 和 <number> 的分量可以自由混合

rgb(100% 0% 0% / 50%)

4.1.2. 传统（逗号分隔）颜色函数语法

为了 Web 兼容性， rgb()、rgba()、hsl() 和 hsla() 的语法形式 （在早期规范中定义的那些） 也支持一种旧版颜色语法，它具有以下区别：

• 颜色分量用逗号分隔 （可选地在前面和/或后面加上空格）

• 非不透明形式使用单独的表示法 （例如 hsla() 而不是 hsl()） 并且 alpha 项用逗号分隔 （可选地在前面和/或后面加上空格）

• 最低所需精度较低，每个分量 8 位

• 不允许使用 none 值

• 颜色分量必须全部使用 <percentage> 或全部使用 <number> 来指定，它们不能混合使用。

rgba(100%, 0%, 0%, 0.5)

对于本级别或随后的级别中引入的 颜色函数，在没有 Web 兼容性问题的情况下，传统颜色语法是无效的。

4.2. 表示颜色中的透明度：<alpha-value> 语法

<alpha-value> = <number> | <percentage>

注： 此语法按原样用于传统颜色 语法。 对于现代颜色 语法， 此语法进行了扩展， 使 alpha 分量 也可以采用值 none。

除非另有规定，颜色的 <alpha-value> 组件在省略时默认为 100%。超出范围 [0,1] 的值不是无效的，但在解析值时会被限制在该范围内。

4.3. 表示圆柱坐标色相：<hue> 语法

色相表示为颜色圆的一个角度（将彩虹扭曲成一个圆，并在紫色和红色之间加入紫红色）。

<hue> = <number> | <angle>

由于这个值通常以度数给出，参数也可以用数字表示，这个数字被解释为度数，是 标准单位。

这个数字被标准化为范围 [0,360)。

注意： 特定色相对应的角度和间距取决于色彩空间。例如，在使用 sRGB 色彩空间的 HSL 和 HWB 中，sRGB 的绿色是 120 度。在 LCH 中，sRGB 绿色是 134.39 度，display-p3 绿色是 136.01 度，a98-rgb 绿色是 145.97 度，prophoto-rgb 绿色是 141.04 度（因为这些都是不同的绿色阴影）。

<hue> 分量是最常变为无效的颜色分量； 任何足够接近中心非彩色轴的颜色 都将具有无效的色相分量。

4.4. “缺失”的颜色组件和 none 关键字

在某些情况下， 一种颜色可以有一个或多个 缺失的 颜色分量。

在本规范中， 对于某些颜色（例如 white），这会由于基于色相的插值 而自动发生； 其他规范可以定义 分量会自动缺失的其他情况。

也可以显式指定这种情况， 方法是在颜色函数中为某个分量提供关键字 none。 所有颜色函数 （使用传统颜色语法的函数除外） 都允许将其任意分量指定为 none。

这样做时应谨慎， 并且仅在需要由此产生的特定效果时才这样做。

有关在颜色插值等组合两种颜色的情况下处理缺失分量的信息， 请参阅 § 13.3 使用缺失分量进行插值。

对于其他所有用途，缺失组件表现为零值，采用该组件的适当单位：0，0%，或0deg。这包括直接渲染颜色、将其转换为其他颜色空间、对颜色组件值执行计算等。

如果带有缺失组件的颜色被序列化或直接呈现给作者，对于传统颜色语法，其表示该组件为零值；否则，则表示该组件为none关键字。

结果将是一个真正看起来像绿色和白色混合的颜色，而不是看起来略带红色（如果将白色的色相默认为0deg）。

4.4.1. “无效”颜色组件

个别颜色语法可以指定，在某些情况下，它们的语法中的某个组件会成为无效颜色组件。这表明该组件的值不会影响渲染的颜色；无论你赋予它什么值，屏幕上显示的颜色都是相同的。

例如，在hsl()中，当饱和度组件为0%时，色相组件是无效的；0%的饱和度表示灰度颜色，它根本没有色相，因此0deg和180deg或任何其他角度，都会得到完全相同的结果。

如果手动指定了无效分量， 则其行为正常； 其无效的事实没有任何影响。

但是，如果颜色是通过色彩空间转换自动生成的， 则结果中的任何无效分量都必须设置为缺失， 而不是转换过程中产生的任何值。

当执行颜色空间转换至圆柱极坐标颜色空间时， 用户代理应将色相分量视为无作用， 如果色度（或其他衡量色彩鲜艳程度的度量，例如 hsl 中的饱和度） 小于或等于为该颜色空间指定的 epsilon（ε）。 例如，转换为 oklch() 的灰色可能会 由于数值误差， 具有极小的色度，而不是精确的 0%； 因此，色相分量是无作用的。

当将无效的色相分量改为缺失分量时， 色度（或其他色彩度量，例如 hsl 中的饱和度；参见类似分量）会被设为零， 以避免放大浮点噪声。 负值不会被钳制为零， 只有当该值大于零但小于或等于 ε 时，才会将其设为零。 对于 hwb，则改为遵循 以下步骤：

1. 如果 W + B 大于或等于 ε 且 W + B 小于 100
  1.1. 如果 W 和 B 均不缺失
    1.1.1. 将 B 设为 100 - W
  1.2. 否则，如果 W 不缺失
    1.2.1. 将 W 设为 100
  1.3. 否则，如果 B 不缺失
    1.3.1. 将 B 设为 100

4.5. 解析 <color> 值

注意：此算法并非旨在解析 CSS 样式表或 CSSOM 接口中指定的 CSS <color> 值，而是在 HTML 属性或 Canvas 接口等其他地方使用。

5. sRGB 颜色

CSS 中位于 sRGB 色彩空间内的颜色通过三元值来表示——红、绿和蓝——标识 sRGB 色彩空间中的一个点 [SRGB]。 这是一种国际公认的设备无关的色彩空间，因此适用于指定在计算机屏幕上显示的颜色，也适用于在其他类型的设备（如打印机）上指定颜色。

CSS 也允许使用非 sRGB 的 色彩空间，如 第 10 节 预定义的色彩空间 中所述。

CSS 提供了几种直接指定 sRGB 颜色的方法：十六进制颜色、rgb()/rgba() 颜色函数、hsl()/hsla() 颜色函数、hwb() 颜色函数、命名颜色， 以及 transparent 关键字。

5.1. RGB 函数：rgb() 和 rgba()

rgb() 和 rgba() 函数通过直接指定 r、g 和 b（红、绿、蓝）分量来定义 sRGB 颜色。 它们的语法是：

rgb() = [ <legacy-rgb-syntax> | <modern-rgb-syntax> ]
rgba() = [ <legacy-rgba-syntax> | <modern-rgba-syntax> ]
<legacy-rgb-syntax> = 	rgb( <percentage>#{3} , <alpha-value>? ) |
                  rgb( <number>#{3} , <alpha-value>? )
<legacy-rgba-syntax> = rgba( <percentage>#{3} , <alpha-value>? ) |
                  rgba( <number>#{3} , <alpha-value>? )
<modern-rgb-syntax> = rgb(
  [ <number> | <percentage> | none]{3}
  [ / [<alpha-value> | none] ]?  )
<modern-rgba-syntax> = rgba(
  [ <number> | <percentage> | none]{3}
  [ / [<alpha-value> | none] ]?  )

前三个参数分别指定颜色的 r、g 和 b（红、绿、蓝）分量。 0% 表示 sRGB 色域中该颜色分量的最小值， 100% 表示最大值。

颜色分量的百分比参考范围源于这样一个历史事实：许多图形引擎在内部将颜色分量存储为单个字节， 该字节可以容纳 0 到 255 之间的整数。 实现应尽可能遵循创作或计算的分量精度。 如果无法做到，则应将分量向 +∞ 舍入。

最后一个参数 <alpha-value> 指定颜色的 Alpha 值。 如果省略，则默认为 100%。

超出这些范围的值并非无效， 而是在解析值时被限制在此处定义的范围内。

由于历史原因，rgb() 和 rgba() 也支持旧版颜色语法。

5.2. RGB 十六进制表示法：#RRGGBB

CSS 十六进制颜色表示法允许通过将分量指定为十六进制数来指定 sRGB 颜色， 这与颜色通常在计算机代码中直接编写的方式类似。 它也比用 rgb() 表示法写出相同的颜色要短。

<hex-color> 的语法是一个 <hash-token> 标记，其值由 3、4、6 或 8 个十六进制数字组成。 换句话说，十六进制颜色写为一个哈希字符“#”， 后跟一些数字 0-9 或字母 a-f （字母的大小写无关紧要 - #00ff00 与 #00FF00 相同）。

给定的十六进制数字的数量决定了如何将十六进制表示法解码为 RGB 颜色：

6 位数字

第一对数字，解释为十六进制数， 指定颜色的红色分量， 其中 00 表示最小值， ff（十进制的 255）表示最大值。 下一对数字，以相同的方式解释， 指定绿色分量， 最后一对指定蓝色分量。 颜色的 Alpha 分量是完全不透明的。

换句话说， #00ff00 表示与 rgb(0 255 0)（一种石灰绿）相同的颜色。

8 位数字

前 6 位数字的解释与 6 位数字表示法相同。 最后一对数字，解释为十六进制数， 指定颜色的 Alpha 分量， 其中 00 表示完全透明的颜色， ff 表示完全不透明的颜色。

换句话说， #0000ffcc 表示与 rgb(0 0 100% / 80%)（一种略微透明的蓝色）相同的颜色。

3 位数字

这是 6 位数字表示法的一种较短的变体。 第一个数字，解释为十六进制数， 指定颜色的红色分量， 其中 0 表示最小值， f 表示最大值。 接下来的两个数字分别以相同的方式表示绿色和蓝色分量。 颜色的 Alpha 分量是完全不透明的。

这种语法通常被解释为与通过“复制”所有数字获得的 6 位数字表示法相同。 例如，表示法 #123 指定与表示法 #112233 相同的颜色。 这种指定颜色的方法的“分辨率”低于 6 位数字表示法； 3 位十六进制语法中只有 4096 种可能的颜色可以表示， 而 6 位十六进制语法中大约有 1700 万种。

4 位数字

这是 8 位数字表示法的一种较短的变体， 其“扩展”方式与 3 位数字表示法相同。 第一个数字，解释为十六进制数， 指定颜色的红色分量， 其中 0 表示最小值， f 表示最大值。 接下来的三个数字分别表示绿色、蓝色和 Alpha 分量。

6. 颜色关键词

除了 <color> 的各种数字语法外， CSS 还定义了几组颜色关键字，可以替代使用——每组都有其自身的优点或用例。

6.1. 命名颜色

CSS 定义了一组 命名颜色，这样常见的颜色可以更容易地书写和阅读。 一个 <named-color> 以 <ident> 的形式编写，任何需要 <color> 的地方都接受这种形式。 对于 CSS 定义的 <ident>，所有这些关键词都是 ASCII 大小写不敏感的。

这些名字解析为 sRGB 颜色。

CSS 的 16 个命名颜色最初来自 VGA 调色板，后来被 HTML 采用：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white 和 yellow。 其余大部分颜色来自 X11 颜色系统的一个版本，该系统用于 Unix 衍生系统的控制台颜色指定，后来被 SVG 采用。

注意：这些颜色名称在这里被标准化，不是因为它们好，而是因为它们的使用和实现已经存在了几十年，标准需要反映现实。 实际上，很难想象每个名字对应的颜色是什么（因此有下面的列表）；这些名字在 sRGB 色彩空间中的分布并不均匀，甚至它们内部也不一致（ darkgray 比 gray 更亮，而 lightpink 却比 pink 更暗）， 并且一些名字（例如 indianred，最初是以来自印度的红色颜料命名的）被发现具有冒犯性。因此，不建议使用它们。

（两个特殊的颜色值 transparent 和 currentcolor 在各自的章节中有特殊定义。）

下表定义了所有不透明的命名颜色，通过给出其他颜色语法的等价数值表示。

注意：此颜色列表及其定义是 SVG 1.1 定义的命名颜色 列表的超集。

注意： X11 颜色系统的历史非常有趣，并由 Alex Sexton 在其演讲 “Peachpuffs and Lemonchiffons” 中做了极好的总结。

6.2. 系统颜色

一般来说，<system-color> 关键字 反映了用户、浏览器或操作系统所做的默认颜色选择。 它们通常用于浏览器的默认样式表中，正是出于这个原因。

为了保持可读性， <system-color> 关键字也会响应 元素配色方案。

然而，在 强制配色模式（forced colors mode）下， 页面上的大多数颜色会被强制为受用户选择限制的调色板， 详见 CSS Color Adjustment 1 § 5.2 强制配色模式调色板。 <system-color> 关键字 将这些用户选择的颜色暴露出来， 方便页面其他部分能够融合进这个受限调色板。

当 forced-colors 媒体特性 处于 active 状态时， 作者应当在<system-color> 关键字用作颜色值， 用在CSS Color Adjustment 1 § 3.1 列出的受影响属性以外的属性上， 以确保整个页面的可读性和一致性， 并避免用户强制颜色和页面自定义颜色混杂的情况。

当<system-color>关键字的值由浏览器提供 （而非操作系统默认或用户自定义）时，浏览器应该 保证匹配的 前景/背景配对至少有 WCAG AA 对比度。 但用户偏好（无论是更高或更低的对比度）， 无论是通过浏览器偏好、用户样式表， 还是更改操作系统默认值， 都必须优先于该要求。

作者也可以在任何时候使用这些关键字， 但应当注意使用成对匹配的背景-前景色， 以保证合适的对比度。 因为非配对项之间 的对比关系 （例如 Canvas 和 ButtonText） 并无法保证。

<system-color> 关键字定义如下：

AccentColor

 强调型界面控件的背景色。

AccentColorText

 强调型界面控件的文本色。

ActiveText

 活动链接文本色。浅色背景下通常为红色。

ButtonBorder

 普通按钮的基础边框色。

ButtonFace

 普通按钮的表面（face）背景色。

ButtonText

 按钮文本色。

Canvas

 应用内容或文档的背景色。

CanvasText

 应用内容或文档的文本色。

Field

 输入框的背景色。

FieldText

 输入框中的文本色。

GrayText

 禁用文本色。 （通常但不一定为灰色。）

Highlight

 选中文本的背景色，例如 ::selection。

HighlightText

 选中文本的文本色。

LinkText

 非活动、未访问链接的文本色。浅色背景下传统为蓝色。

Mark

 被特殊标记文本的背景色 （例如HTML的 mark 元素）。

MarkText

 被特殊标记文本的文本色 （例如HTML的 mark 元素）。

SelectedItem

 被选中项的背景色，例如被选中的复选框。

SelectedItemText

 被选中项的文本色。

VisitedText

 已访问链接的文本色。浅色背景下传统为紫色。

注意：与所有其他关键字一样，这些名称是ASCII 大小写不敏感的。它们在这里以混合大小写显示以便于阅读。

对于没有特定系统 UI 概念的系统，指定的值应映射到最接近的相关系统颜色值。以下系统颜色配对预计将形成可读的背景-前景颜色：

• Canvas背景与CanvasText、LinkText、VisitedText、ActiveText前景配对。

• Canvas背景与ButtonBorder边框以及相邻颜色Canvas

• ButtonFace背景与ButtonText前景配对。

• Field背景与FieldText前景配对。

• Mark背景与MarkText前景配对。

• ButtonFace或Field背景与ButtonBorder边框以及相邻颜色Canvas

• Highlight背景与HighlightText前景配对。

• SelectedItem背景与SelectedItemText前景配对。

• AccentColor背景与AccentColorText前景配对。

此外，GrayText预计可以阅读，尽管对比度可能较低，在任何背景上都可以阅读。

为保持与组件强调色样式的一致性， AccentColor 的取值来自 accent-color， 除非启用了强制色彩模式。 AccentColorText 的取值为 和 AccentColor 对比的前景色， 具体如组件 强调色样式中所描述。

早期版本的CSS定义了其他<系统颜色>，这些已经被弃用。它们在附录A：弃用的CSS系统颜色中进行了记录。

注意：<系统颜色>存在一些隐私和安全风险，详见§ 22 隐私考虑和§ 20 安全考虑。

用户代理可以选择返回固定值以减轻隐私和安全风险（例如指纹识别），这些值不反映用户的自定义或主题选择。

6.3. transparent关键字

关键字transparent指定了透明黑。它是一种<named-color>。

6.4. currentcolor关键字

关键字currentcolor表示同一元素上的color属性的值。与<named-color>不同，它不局限于 sRGB；该值可以是任何<color>。其使用值由解析颜色值来确定。

.foo {
  color:  red;
  background-color:  currentcolor;
}

.foo {
  color:  red;
  background-color:  red;
}

<p><em>Some <strong>really</strong> emphasized text.</em> 
<style>
p { color: black; }
em { text-emphasis: dot; }
strong { color: red; }
</style>

注意： CSS 中的多词关键字通常用连字符分隔各个组成词。 currentcolor 没有这样做，因为（深呼吸） 它最初在 SVG 中作为属性值引入，名字写作 "current-color"，符合 CSS 通常拼法。 后来（以及所有其他属性及其值） 它变成了展示属性和值， 以及属性， 以便用 XSLT 方便生成。 接着所有展示属性都从用连字符的写法 改成了驼峰式，因为 DOM 对连字符含义为“减号”有问题。 但这样又不符合 CSS 的习惯写法 所以所有已经被 CSS 采用的属性及属性值 又都改回用连字符了！ currentcolor 那时还没进 CSS， 所以还是 camelCase。 CSS 后来才采用它， 这时候大小写就无所谓了， 因为 CSS 关键字 ASCII 不区分大小写。

7. HSL 颜色：hsl() 和 hsla() 函数

RGB 系统用于指定颜色， 对于机器和图形库来说很方便， 但通常被认为对人类来说很难直观地理解。 例如，很难知道如何改变 RGB 颜色以产生同一色调的较亮变体。

还有几种其他的颜色方案可行。 其中一种是 HSL [HSL] 颜色方案， 使用起来更直观， 但仍可以轻松映射回 RGB 颜色。

HSL 颜色是通过色相、饱和度和亮度三元组来指定的。 hsl() 和 hsla() 函数的语法是：

hsl() = [ <legacy-hsl-syntax> | <modern-hsl-syntax> ]
hsla() = [ <legacy-hsla-syntax> | <modern-hsla-syntax> ]
<modern-hsl-syntax> = hsl(
    [<hue> | none]
    [<percentage> | <number> | none]
    [<percentage> | <number> | none]
    [ / [<alpha-value> | none] ]? )
<modern-hsla-syntax> = hsla(
    [<hue> | none]
    [<percentage> | <number> | none]
    [<percentage> | <number> | none]
    [ / [<alpha-value> | none] ]? )
<legacy-hsl-syntax> = hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<legacy-hsla-syntax> = hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

第一个参数指定色相角度。

在 HSL（和 HWB）中，角度 0deg 代表 sRGB 原始红色（同样适用于 360deg、720deg 等），其余的色相围绕圆周分布，所以 120deg 代表 sRGB 原始绿色，240deg 代表 sRGB 原始蓝色，依此类推。

接下来的两个参数分别是饱和度和亮度。对于饱和度，100% 或 100 表示完全饱和、明亮的颜色，而 0% 或 0 表示完全不饱和的灰色。对于亮度，50% 或 50 表示“正常”颜色，而 100% 或 100 是白色，0% 或 0 是黑色。

由于历史原因，如果饱和度小于 0%，它将在解析值阶段被钳制到 0%，然后再转换为 sRGB 颜色。

最后一个参数指定颜色的 Alpha 分量。 它的解释与 rgb() 函数的第四个参数完全相同。 如果省略，则默认为 100%。

HSL 颜色解析为 sRGB。

如果 HSL 颜色的饱和度为 0% 或 0，则色相分量是无效的。

与 RGB 相比，HSL 的一个优点是它更直观：人们可以猜测他们想要的颜色，然后进行调整。

hsl(120deg 100% 50%) 亮绿色
hsl(120deg 100% 25%) 深绿色
hsl(120deg 100% 75%) 浅绿色
hsl(120deg 75% 85%) 粉绿色

HSL 相对于 OKLCh 的一个缺点是，色相操作会改变视觉亮度，并且色相并非均匀分布。

因此，在 HSL 中创建一组匹配的颜色（通过保持色相不变并改变饱和度和亮度）比操作 sRGB 组件值更容易；但是，由于亮度只是伽马校正的红、绿和蓝组件的平均值，因此它不对应于色相的视觉亮度。

在 HSL 中，色相角度并非感知上均匀的；颜色在某些区域聚集，而在其他区域则较为稀疏。

由于历史原因，hsl() 和 hsla() 也支持旧版颜色语法。

7.1. 将 HSL 颜色转换为 sRGB

将 HSL 颜色转换为 sRGB 在数学上很简单。 以下是 JavaScript 中转换算法的示例实现。 它返回一个包含三个数字的数组， 分别表示颜色的红色、绿色和蓝色分量， 对于 sRGB 色域中的颜色，这些分量将在 [0, 1] 范围内。

此代码假设已经应用了解析时对负饱和度的限制。

/**
 * @param {number} hue - Hue as degrees 0..360
 * @param {number} sat - Saturation in reference range [0,100]
 * @param {number} light - Lightness in reference range [0,100]
 * @return {number[]} Array of sRGB components; in-gamut colors in range [0..1]
 */
function hslToRgb(hue, sat, light) {

    sat /= 100;
    light /= 100;

    function f(n) {
        let k = (n + hue/30) % 12;
        let a = sat * Math.min(light, 1 - light);
        return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
    }

    return [f(0), f(8), f(4)];
}

7.2. 将 sRGB 颜色转换为 HSL

反向的转换过程类似。

特别注意处理由远离 sRGB 色域的颜色产生的中间负饱和度值。

/**
 * @param {number} red - Red component 0..1
 * @param {number} green - Green component 0..1
 * @param {number} blue - Blue component 0..1
 * @return {number[]} Array of HSL values: Hue as degrees 0..360, Saturation and Lightness in reference range [0,100]
 */
function rgbToHsl (red, green, blue) {
    let max = Math.max(red, green, blue);
    let min = Math.min(red, green, blue);
    let [hue, sat, light] = [NaN, 0, (min + max)/2];
    let d = max - min;
    let epsilon = 1 / 100000;   // max Sat is 1, in this code

    if (d !== 0) {
        sat = (light === 0 || light === 1)
            ? 0
            : (max - light) / Math.min(light, 1 - light);

        switch (max) {
            case red:   hue = (green - blue) / d + (green < blue ? 6 : 0); break;
            case green: hue = (blue - red) / d + 2; break;
            case blue:  hue = (red - green) / d + 4;
        }

        hue = hue * 60;
    }

    // Very out of gamut colors can produce negative saturation
    // If so, just rotate the hue by 180 and use a positive saturation
    // see https://github.com/w3c/csswg-drafts/issues/9222
    if (sat < 0) {
        hue += 180;
        sat = Math.abs(sat);
    }

    if (hue >= 360) {
        hue -= 360;
    }

    if (sat <= epsilon) {
        hue = NaN;
    }

    return [hue, sat * 100, light * 100];
}

7.3. HSL 颜色示例

本节不是规范性的。

下表展示了可能的 HSL 颜色的广泛范围。 每个表格代表一个色相， 以 30° 为间隔选择， 以说明常见的 "核心" 色调： 红色， 黄色， 绿色， 青色， 蓝色， 洋红色， 以及这些之间的六种中间颜色。

在每个表格中，X 轴表示饱和度， Y 轴表示亮度。

8. HWB 颜色：hwb() 函数

HWB（色相-白度-黑度的缩写）[HWB] 是另一种指定 sRGB 颜色的方法，类似于HSL，但通常对人类来说更容易使用。它通过一个起始色相，然后混入一定程度的白色和黑色来描述颜色。

许多颜色选择器基于 HWB 色彩系统，因为它直观易用。

HWB 颜色解析为 sRGB。

hwb() 函数的语法如下：

hwb() = hwb(
  [<hue> | none]
  [<percentage> | <number> | none]
  [<percentage> | <number> | none]
  [ / [<alpha-value> | none] ]? )

第一个参数指定色相， 其定义与 hsl() 完全相同； 这意味着它具有相同的缺点，例如色相均匀性。

第二个参数指定要混合的白色量， 百分比范围从 0%（无白色）到 100%（全白色）。 类似地，第三个参数指定要混合的黑色量， 百分比范围也从 0%（无黑色）到 100%（全黑色）。

注： hwb() 未考虑阿布尼效应 [Abney] ，该效应是指向单色光源中加入白光时 所产生的感知色相偏移。

超出这些范围的值并不无效；色相角度超出 [0,360) 范围将被归一化至该范围，而白色和黑色的值相加为 100% 或更高时，将生成如下所述的无彩色。

最终的颜色可以在概念上理解为选择的色相、白色颜料和黑色颜料的混合物，相对的数量由百分比决定。

如果白色加黑色的和大于或等于 100%，则定义为无彩色，即灰色阴影；转换为 sRGB 时，R、G 和 B 的值相等，其值为 white / (white + black)。

无彩色的 HWB 颜色不再包含任何所选择的色相。在这种情况下，色相组件为无效。

第四个参数指定颜色的 Alpha 分量。 它的解释与 rgb() 函数的第四个参数完全相同。 如果省略，则默认为 100%。

hwb 不存在 Web 兼容性问题，它 是本级规范中新引入的，因此 hwb() 不支持使用逗号分隔其所有参数的旧式颜色语法。 在 hwb() 中使用逗号是错误的。

8.1. 将 HWB 颜色转换为 sRGB

将 HWB 颜色转换为 sRGB 非常简单，类似于将 HSL 转换为 RGB 的方式。以下是算法的 Javascript 实现，首先将白色和黑色组件标准化，使它们的总和不超过 100%。

/**
 * @param {number} hue -  Hue as degrees 0..360
 * @param {number} white -  Whiteness in reference range [0,100]
 * @param {number} black -  Blackness in reference range [0,100]
 * @return {number[]} Array of RGB components 0..1
 */
function hwbToRgb(hue, white, black) {
    white /= 100;
    black /= 100;
    if (white + black >= 1) {
        let gray = white / (white + black);
        return [gray, gray, gray];
    }
    let rgb = hslToRgb(hue, 100, 50);
    for (let i = 0; i < 3; i++) {
        rgb[i] *= (1 - white - black);
        rgb[i] += white;
    }
    return rgb;
}

8.2. 将 sRGB 颜色转换为 HWB

反向转换的过程类似。

/**
 * @param {number} red - Red component 0..1
 * @param {number} green - Green component 0..1
 * @param {number} blue - Blue component 0..1
 * @return {number} Hue as degrees 0..360
 */
function rgbToHue(red, green, blue) {
    // Similar to rgbToHsl, except that saturation and lightness are not calculated, and
    // potential negative saturation is ignored.
    let max = Math.max(red, green, blue);
    let min = Math.min(red, green, blue);
    let hue = NaN;
    let d = max - min;

    if (d !== 0) {
        switch (max) {
            case red:   hue = (green - blue) / d + (green < blue ? 6 : 0); break;
            case green: hue = (blue - red) / d + 2; break;
            case blue:  hue = (red - green) / d + 4;
        }

        hue *= 60;
    }

    if (hue >= 360) {
        hue -= 360;
    }

    return hue;
}

/**
 * @param {number} red - Red component 0..1
 * @param {number} green - Green component 0..1
 * @param {number} blue - Blue component 0..1
 * @return {number[]} Array of HWB values: Hue as degrees 0..360, Whiteness and Blackness in reference range [0,100]
 */
function rgbToHwb(red, green, blue) {
    let epsilon = 1 / 100000;  // account for multiply by 100
    var hue = rgbToHue(red, green, blue);
    var white = Math.min(red, green, blue);
    var black = 1 - Math.max(red, green, blue);
    if (white + black >= 1 - epsilon) {
        hue = NaN;
    }
    return([hue, white*100, black*100]);
}

8.3. HWB 颜色示例

本节不是规范性内容。

9. 设备无关颜色：CIE Lab 和 LCH，Oklab 和 OKLCh

9.1. CIE Lab 和 LCH

本节不具规范性。

颜色的物理测量通常表示为 CIE L*a*b* [CIELAB] 色彩空间， 该空间由 CIE 于 1976 年创建，通常简称为 Lab。 从一个设备转换到另一个设备的颜色也可以使用 Lab 作为中间步骤。 Lab 是基于人类视觉实验得出的， 代表了人类可见的所有颜色范围。

Lab 是一个具有中央亮度（L）轴的直角坐标系统。 该值通常表示为无单位的数字； 为了与 CSS 其他部分兼容，也可以写为百分比。 100% 表示 L 值为 100，而不是 1.0。 L=0% 或 0 是深黑色（完全没有光） 而 L=100% 或 100 是漫反射白。

有用的是，L=50% 或 50 是中灰色，且设计上， L 的等增量在视觉上是均匀间隔的： Lab 色彩空间旨在实现感知上的均匀性。

a 和 b 轴传递色相； a 轴正值表示紫红色， 而负值则是互补色，绿色。 类似地，b 轴正值表示黄色， 负值表示互补色蓝色/紫色。 去饱和的颜色具有较小的 a 和 b 值， 并靠近 L 轴； 饱和的颜色则远离 L 轴。

光源是 D50 白光，这是一种标准化的日光光谱，色温为 5000K， 由完美漫反射体反射；它近似于晴天阳光的颜色。 D50 也是 ICC 颜色相互转换中配置文件连接空间使用的白点， 是提供 Lab 编辑功能的图像编辑器中使用的白点， 也是物理测量设备（如分光光度计和分光辐射计） 在报告 Lab 测量颜色时使用的值。

使用其他白点指定颜色的转换被称为 色度适应变换， 其模拟了人类视觉系统在适应新的照明条件时的变化。 线性布拉德福德算法 [ICC]（原布拉德福德算法的简化版 [Bradford-CAT]） 是行业标准的色度适应变换， 计算非常简单，因为它只是一个矩阵乘法。

CIE LCH 与 Lab 具有相同的 L 轴， 但使用极坐标 C（色度）和 H（色相）， 形成了一个极坐标的柱面坐标系统。 C 是从 L 轴的几何距离， H 是从 a 轴正向到 b 轴正向的角度。

注：Lab 和 LCH 的 L 轴 不要与 HSL 的 L 轴混淆。 例如，在 HSL 中，sRGB 颜色蓝色（#00F）和黄色（#FF0） 具有相同的 L 值（50%），即使在视觉上，蓝色要暗得多。 在 Lab 中这就非常清晰： sRGB 蓝色为 lab(29.567% 68.298 -112.0294) 而 sRGB 黄色为 lab(97.607% -15.753 93.388)。 在 Lab 和 LCH 中，如果两个颜色具有相同的 L 值， 那么它们在视觉亮度上是相同的。 HSL 和相关的极坐标 RGB 模型是为了试图 提供类似于 LCH 给 Lab 的可用性好处的 RGB， 但其准确性显著低于 Lab 和 LCH。

尽管 CIE Lab 和 LCH 得到了广泛使用， 但它们也存在一些问题，尤其是：

色相线性度

在蓝色区域（LCH 色相介于 270° 和 330° 之间）， 视觉色相偏离了 LCH 的预测。 如果绘制一组相同色相且色度不同的蓝色， 这些颜色应该形成一条从中性轴延伸的直线， 但实际上形成了曲线。 换句话说， 随着一个饱和的蓝色的色度逐渐减少， 它会变得显著偏紫。

色相均匀性

虽然 LCH 中的色相通常是均匀间隔的， （且远优于 HSL 或 HWB）， 但均匀性并不完美。

高色度差异的过度预测

对于高色度的颜色， 色度的变化不如中性色更明显。

这些缺陷影响了，例如， 创建均匀间隔的渐变， 将一个色彩空间映射到一个较小的色彩空间， 以及计算两个颜色之间的视觉差异。

为弥补这一点， 预测两个颜色之间视觉差异的公式 （Delta E） 随时间的推移变得更加准确 （但也更复杂）。 当前的行业标准公式， Delta E 2000， 对于缓解 Lab 和 LCH 的某些问题效果良好。 § 20.2 ΔE2000 中给出了示例实现。

但是这对色相曲率问题没有帮助。

9.2. Oklab 和 OKLCh

本节不具规范性。

最近，Oklab，一种改进的类 Lab 空间被开发出来 [Oklab]。 对应的极坐标形式称为 OKLCh。 它是通过对大量视觉上相似的颜色数据集进行数值优化而产生的， 与 CIE LCH 相比，其色相线性度、色相均匀性和色度均匀性都有所提高。

与 CIE Lab 一样，Oklab 有一个中心的亮度 L 轴， 通常表示为范围 [0,1] 的无单位数值； 为了与 CSS 其他部分兼容， 也可以写为百分比。100% 表示 L 值为 1.0。 L=0% 或 0.0 表示深黑色（完全没有光），而 L=100% 或 1.0 表示漫反射白。

注： 与 CIE Lab 不同，CIE Lab 假设适应漫反射白色， 而 Oklab 假设适应被定义的颜色， 这旨在使其具有比例不变性。

与 CIE Lab 一样，a 和 b 轴传递色相； a 轴正值表示紫红色， 负值表示互补色，绿色。 类似地，b 轴正值表示黄色， 负值表示互补的蓝色/紫色。

光源是 D65，与大多数 RGB 色彩空间使用的白点相同。

OKLCh 与 Oklab 具有相同的 L 轴， 但使用极坐标 C（色度）和 H（色相）。

注意：与 CIE LCH 中色度可以达到 200 或更高不同， OKLCh 色度范围约为 0.5。 CIE LCH 和 OKLCh 之间的色相角大致相似， 但不完全相同。

由于 Oklab 的感知均匀性优于 CIE Lab， 因此颜色差异可以通过 3D 空间中的距离（平方和的平方根）直接计算。 尽管计算简单， § 20.3 ΔEOK 中给出了示例实现。

9.3. 指定 Lab 和 LCH：lab() 和 lch() 函数表示法

CSS 允许直接以 Lab 和 LCH 表示颜色。

lab() = lab( [<percentage> | <number> | none]
      [ <percentage> | <number> | none]
      [ <percentage> | <number> | none]
      [ / [<alpha-value> | none] ]? )

在Lab中， 第一个参数指定了 CIE 亮度，即 L。 这是一个介于 0% 或 0 和 100% 或 100 之间的数值。 值小于 0% 或 0 时必须在解析值时夹紧为 0%； 值大于 100% 或 100 时在解析值时夹紧为 100%。

第二个和第三个参数是 Lab 色彩空间中 “a” 轴和 “b” 轴上的距离， 如前一节所述。 这些值是有符号的 （允许为正或负值）， 理论上不受限 （但实际应用中真实颜色不会超过 ±160）。

有一个可选的第四个 <alpha-value> 分量， 用斜杠分隔， 表示 alpha 分量。

如果 Lab 颜色的明度（经过钳制后）为 0%， 或 100%， 那么该颜色因显示设备的色域映射 会分别显示为黑色或白色。

 lab(29.2345% 39.3825 20.0664);
 lab(52.2345 40.1645 59.9971);
 lab(60.2345 -5.3654 58.956);
 lab(62.2345% -34.9638 47.7721);
 lab(67.5345 -8.6911 -41.6019);
 lab(29.69% 44.888% -29.04%)

lch() = lch( [<percentage> | <number> | none]
      [ <percentage> | <number> | none]
      [ <hue> | none]
      [ / [<alpha-value> | none] ]? )

在 CIE LCH 中，第一个参数表示 CIE 的亮度 L，与 lab() 的亮度参数相同。

第二个参数是色度 C（大致表示“颜色的浓度”）。 它的最小有效值为 0，而最大值在理论上是无限的（但实际上不超过 230）。 如果提供的值为负数，则在解析值阶段将其夹紧到 0。

第三个参数是色相角 H。 它的解释方式类似于 <hue> 参数在 hsl() 中的解释方式， 但在这里色相均匀地分布在角度上，而不是与角度相同的映射。 因此，0deg 沿正 "a" 轴方向（朝向紫红色），（同样适用于 360deg、720deg 等）； 90deg 沿正 "b" 轴方向（朝向芥黄色），180deg 沿负 "a" 轴方向 （朝向绿色青色），270deg 沿负 "b" 轴方向（朝向天蓝色）。

有一个可选的第四个 <alpha-value> 组件， 用斜线分隔，表示 alpha 组件。

如果 LCH 颜色的色度为 0%，则色相组件是 无效的。 如果 LCH 颜色的亮度（在夹紧后）为 0% 或 100%，则颜色将分别显示为黑色或白色， 这是由于显示器的色域映射。

 lch(29.2345% 44.2 27);
 lch(52.2345% 72.2 56.2);
 lch(60.2345 59.2 95.2);
 lch(62.2345% 59.2 126.2);
 lch(67.5345% 42.5 258.2);
 lch(29.69% 45.553% 327.1)

在lab或lch 中， 这些函数在此规范级别是全新的， 因此lab() 和 lch() 不 支持使用逗号分隔其所有参数的 旧颜色语法。 在这些函数中使用逗号是错误的。

9.4. 指定 Oklab 和 OKLCh：oklab() 和 oklch() 函数表示法

CSS 允许直接用 Oklab 和 OKLCh 表示颜色。

oklab() = oklab( [ <percentage> | <number> | none]
    [ <percentage> | <number> | none]
    [ <percentage> | <number> | none]
    [ / [<alpha-value> | none] ]? )

在 Oklab 中，第一个参数指定 Oklab 的亮度。 这是一个在 0% 或 0 和 100% 或 1.0 之间的数字。

小于 0% 或 0.0 的值必须在解析时被钳制到 0%； 大于 100% 或 1.0 的值在解析时被钳制到 100%。

第二个和第三个参数是沿 Oklab 颜色空间中的 "a" 和 "b" 轴的距离， 如前一节所述。 这些值是有符号的 （允许正值和负值） 理论上是无限的 （但实际上不超过 ±0.5）。

还有一个可选的第四个 <alpha-value> 组件， 用斜杠分隔， 表示alpha 组件。

如果 Oklab 颜色的亮度为 0% 或 0， 或者 100% 或 1.0， 则由于显示的色域映射， 颜色将分别显示为黑色或白色。

 oklab(40.101% 0.1147 0.0453);
 oklab(59.686% 0.1009 0.1192);
 oklab(0.65125 -0.0320 0.1274);
 oklab(66.016% -0.1084 0.1114);
 oklab(72.322% -0.0465 -0.1150);
 oklab(42.1% 41% -25%)

oklch() = oklch( [ <percentage> | <number> | none]
      [ <percentage> | <number> | none]
      [ <hue> | none]
      [ / [<alpha-value> | none] ]? )

在 OkLCh 中， 第一个参数指定 OkLCh 明度 L， 与 oklab() 的明度参数解释方式完全一致。

第二个参数是色度 C。 它的最小有效值是 0， 最大值理论上没有限制 （但实际上不会超过 0.5）。 如果提供的值为负数， 解析时会被钳制为 0。

第三个参数是色相角 H。 它的解释方式类似 <hue>， 以及 hsl() 和 lch() 的参数， 但色相与角度的映射方式不同。 0deg 指向正 "a" 轴（偏向紫红色）， （360deg、720deg 等也如此）； 90deg 指向正 "b" 轴（偏向芥末黄）， 180deg 指向负 "a" 轴（偏向青绿色）， 270deg 指向负 "b" 轴（偏向天蓝色）。

有一个可选的第四个 <alpha-value> 分量， 用斜杠分隔， 表示 alpha 分量。

如果 OkLCh 颜色的色度为 0% 或 0， 那么色相分量是无效分量。 如果 OkLCh 颜色的明度为 0% 或 0， 或 100% 或 1.0， 那么该颜色会因显示设备的色域映射 分别显示为黑色或白色。

 oklch(40.101% 0.12332 21.555);
 oklch(59.686% 0.15619 49.7694);
 oklch(0.65125 0.13138 104.097);
 oklch(0.66016 0.15546 134.231);
 oklch(72.322% 0.12403 247.996);
 oklch(42.1% 48.25% 328.4)

对于 oklab 和 oklch，它们都是本规范此级新增内容， 所以 oklab() 和 oklch() 不支持用逗号分隔所有参数的传统颜色语法。 在这些函数内部使用逗号会被视为错误。

9.5. Lab 或 Oklab 颜色转换为 LCH 或 OkLCh 颜色

转换为极坐标形式非常简单：

1. C = sqrt(a^2 + b^2)
2. 如果 (C > epsilon) H = atan2(b, a) 否则 H 缺省
3. L 保持一致

当 a 和 b 极小（色度接近零）时， 虽然视觉颜色不会发生改变，依旧位于中性轴， 但这些值稍作变动，就导致输出的色相角剧烈抖动，呈现几乎随机的结果。 在 CSS 中，这意味着该色相为无效分量， 并在转换到 LCH 或 OkLCh 时视为缺省分量； 而在非 CSS 场景下，这可能体现在输出缺省值（如 NaN）。

9.6. LCH 或 OkLCh 颜色转换为 Lab 或 Oklab 颜色

转换为直角坐标形式非常简单：

1. 如果 H 缺省，则 a = b = 0
2. 否则，
   1. a = C cos(H)
   2. b = C sin(H)
3. L 保持一致

10. 预定义的色彩空间

CSS 提供了几种预定义的色彩空间， 包括 display-p3 [Display-P3]， 这是一种典型的广色域空间，适用于当前的广色域显示器，prophoto-rgb，广泛用于摄影师， 以及 rec2020 [Rec.2020]， 这是一种广播行业标准， 超广色域空间，几乎可以表示所有可见的真实世界色彩。

10.1. 指定预定义颜色：color() 函数

color() 函数允许在特定的、指定的 色彩空间 中指定颜色 （而不是大多数其他颜色函数操作的隐含 sRGB 色彩空间）。 它的语法如下：

color() = color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<colorspace-params> = [ <predefined-rgb-params> | <xyz-params>]
<predefined-rgb-params> = <predefined-rgb> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = srgb | srgb-linear | display-p3 | display-p3-linear | a98-rgb | prophoto-rgb | rec2020
<xyz-params> = <xyz-space> [ <number> | <percentage> | none ]{3}
<xyz-space> = xyz | xyz-d50 | xyz-d65

color 函数接受指定颜色的参数，并在显式列出的色彩空间中指定。

它表示一个 无效颜色（如下所述）， 或者一个 有效颜色。

参数形式如下：

• 一个 <ident>，表示 预定义的色彩空间之一（例如 display-p3）。 具体的 预定义色彩空间 可能进一步限制是否可以使用 <number> 或 <percentage> 或两者。

  如果 <ident> 指定的名称不是一个有效的色彩空间 （即不是 预定义色彩空间 之一）， 那么该参数表示一个 无效颜色。

• 色彩空间接受的三个参数值（如 RGB 或 XYZ 值）。

超出色域的颜色具有小于 0 或 0%，或者大于 1 或 100% 的分量值。 这些并不是无效的，且会保留用于中间计算； 但是在显示时，它们会使用相对比色意图进行 CSS 色域映射， 使得值（在显示色彩空间中）在实际值时落入 0/0% 到 1/100% 的范围内。

• 一个可选的斜线分隔的 <alpha-value>。

使用 color() 没有 Web 兼容性问题， 因为它是在这个规范级别中新引入的，因此 color() 不 支持使用逗号分隔所有参数的 旧色彩语法。 在这个函数中使用逗号是错误的。

如果颜色是 无效颜色 或者 是 超出色域 的颜色， 那么该颜色 无法显示。

如果指定的颜色 可以显示， （即它不是 无效颜色 并且不是 超出色域）， 那么这就是 color() 函数的实际值。

如果指定的颜色 是一个 有效颜色 但 无法显示， 那么实际值是从指定的颜色派生的，并经过 CSS 色域映射 用于显示。

如果颜色是 无效颜色， 那么使用的值是 不透明黑色。

color(rec2020 0.42053 0.979780 0.00579);

lch(85.9017% 166.116 138.207);

color(display-p3 -0.350289 1.00707 -0.144209);

color(profoto-rgb 0.4835 0.9167 0.2188)

10.2. 预定义的 sRGB 颜色空间：sRGB 关键字

下面定义的 sRGB 预定义颜色空间 与用于传统 sRGB 颜色（如 rgb()）的相同。

srgb

srgb [SRGB] 色彩空间接受三个数字参数，分别表示颜色的红色、绿色和蓝色分量。 色域内的颜色，其三个分量均在 [0, 1] 范围内。 白点是 D65。

[SRGB] 指定了两种观看条件：编码和典型。[ICC] 建议使用编码条件进行颜色转换和最佳观看，这些值如下表所示。

sRGB 是 CSS 的默认色彩空间，用于所有旧版颜色函数。

它具有以下特性：

	x	y
红色色度	0.640	0.330
绿色色度	0.300	0.600
蓝色色度	0.150	0.060
白色色度	D65
传递函数	见下文
白色亮度	80.0 cd/m2
黑色亮度	0.20 cd/m2
图像状态	显示参考
百分比	允许用于 R、G 和 B
百分比参考范围	对于 R,G,B：0% = 0.0，100% = 1.0

let sign = c < 0? -1 : 1;
let abs = Math.abs(c);

if (abs <= 0.04045) {
  cl = c / 12.92;
}
else {
  cl = sign * (Math.pow((abs + 0.055) / 1.055, 2.4));
}

c 是经过伽马编码的红色、绿色或蓝色分量。 cl 是相应的线性光分量。

10.3. 预定义的线性光 sRGB 颜色空间：srgb-linear 关键字

sRGB-linear 预定义颜色空间 与 srgb 相同，除了传递函数为线性光（无伽马编码）。

srgb-linear

srgb-linear [SRGB] 色彩空间接受三个数字参数， 分别表示颜色的红色、绿色和蓝色分量。 色域内的颜色，其三个分量均在 [0, 1] 范围内。 白点是 D65。

它具有以下特性：

	x	y
红色色度	0.640	0.330
绿色色度	0.300	0.600
蓝色色度	0.150	0.060
白色色度	D65
传递函数	统一，见下文
白色亮度	80.0 cd/m2
黑色亮度	0.20 cd/m2
图像状态	显示参考
百分比	允许用于 R, G 和 B
百分比参考范围	对于 R, G, B: 0% = 0.0, 100% = 1.0

cl = c;

c 是红、绿或蓝分量。 cl 是相应的线性光分量，且与 c 相同。

为避免带状伪影，需要更高的精度用于 srgb-linear 相较于 srgb。

例如，这些是相同的颜色：

 color(srgb 0.691 0.139 0.259)
 color(srgb-linear 0.435 0.017 0.055)

10.4. 预定义的 Display P3 颜色空间：display-p3 关键字

display-p3

display-p3 [Display-P3] 色彩空间接受三个数字参数， 分别表示颜色的红色、绿色和蓝色分量。 色域内的颜色，其三个分量均在 [0, 1] 范围内。 它使用与 [DCI-P3] 相同的主色度， 但使用 D65 白点，以及与 sRGB 相同的传递曲线。

现代显示器、电视、笔记本屏幕和手机屏幕能够显示全部或几乎全部的 display-p3 色域。

它具有以下特性：

	x	y
红色色度	0.680	0.320
绿色色度	0.265	0.690
蓝色色度	0.150	0.060
白色色度	D65
传递函数	与 srgb 相同
白色亮度	80.0 cd/m2
黑色亮度	0.80 cd/m2
图像状态	显示参考
百分比	允许用于 R, G 和 B
百分比参考范围	对于 R, G, B: 0% = 0.0, 100% = 1.0