CSS 颜色模块第 4 级

1. 简介

本节不具有规范性。

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

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

特别是，它允许在 sRGB 之外的 颜色空间 中指定颜色；此前，即使显示设备支持，也无法在 CSS 中使用 sRGB 色域之外更饱和的颜色。

提供了 草案实施报告。

1.1. 值定义

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

除了定义中列出的属性特定值外，本规范中定义的所有属性也都接受 CSS 全局关键字 作为其属性值。为了可读性，未明确重复列出。

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.6295 0.9657 0.3633);

加法颜色空间意味着坐标系在光强度上是线性的。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 网络内容无障碍指南 [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 合成。

<opacity-value>

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

超出范围 [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 属性。

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

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

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

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

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

3.4. 带标签图像的颜色空间

带标签图像是根据图像格式定义，显式分配了颜色配置文件的图像。这通常通过包含国际色彩联盟 (ICC) 配置文件 [ICC] 来完成。

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

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

例如，PNG 规定了一种方法（sRGB 数据块），在不包含 sRGB ICC 配置文件的情况下，显式将图像标记为处于 sRGB 颜色空间中。

同样，PNG 规定了一种紧凑的方法（cICP 数据块），在不包含 ICC 配置文件的情况下，显式将图像标记为各种 SDR 或 HDR 颜色空间之一，例如 Display P3 或 BT.2100 HLG。

带标签的 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 以下，它是建议 ITU-R BT.601 [ITU-R-BT.601]

• 在 720p 时，它是 SMPTE ST 296（与 709 相同的比色法） [SMPTE296]

• 在 1080p 时，它是建议 ITU-R BT.709 [ITU-R-BT.709]

• 在 4k (UHDTV) 及以上，对于 SDR 视频，它是 ITU-R BT.2020 [Rec.2020]

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

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

CSS 有几种指定颜色值的语法

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

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

• 常量 命名颜色 关键字

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

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

Level 4 中可用的颜色函数是

• rgb() 及其 rgba() 别名，它们（像 十六进制颜色表示法 一样）直接通过红/绿/蓝/Alpha 分量指定 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-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> 分量是最容易变为 无力（powerless） 的分量；任何足够接近中心消色差轴的颜色，其色相分量都是 无力 的。

4.4. “缺失”的颜色分量与 none 关键字

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

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

也可以通过在颜色函数中为某个分量提供关键字 none 来显式指定缺失分量。所有颜色函数（使用 旧版颜色语法 的函数除外）都允许将其任何分量指定为 none。

这应当谨慎使用，且仅在确实需要其特定效果时使用。

关于在结合两种颜色（如颜色插值）的情况下处理 缺失分量，请参阅 § 13.2 使用缺失分量进行插值。

对于所有其他目的，缺失分量的行为表现为该分量在对应单位下的零值：0、0% 或 0deg。这包括直接渲染颜色、将其转换为其他颜色空间、对颜色分量值进行计算等。

如果一个具有 缺失分量 的颜色被序列化或以其他方式直接呈现给作者，那么对于 旧版颜色语法，它会将该分量表示为零值；否则，它会将该分量表示为 none 关键字。

4.4.1. “无力”的颜色分量

各个颜色语法可以指定在某些情况下，其语法的给定分量成为 无力颜色分量。这表示该分量的值不会影响渲染后的颜色；你赋予它的任何值都会导致屏幕上显示相同的颜色。

例如，在 hsl() 中，当饱和度分量为 0% 时，色相分量即为 无力 的；0% 的饱和度表示一种没有任何色相的灰度颜色，因此 0deg 和 180deg，或任何其他角度，都会得到完全相同的结果。

如果手动指定了 无力分量，它会照常起作用；它是 无力 的这一事实没有任何影响。

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

在执行到 柱面极坐标颜色 空间的颜色空间转换时，用户代理 应当 将色相分量视为 无力 的，如果其彩度（或在该颜色空间中的其他色彩度量，例如 hsl 中的饱和度）小于该颜色空间指定的 epsilon (ε)。例如，一个转换为 oklch() 的灰色颜色，由于数值误差，可能会有一个 极小 的彩度，而不是精确的 0%；结果导致色相分量是 无力 的。

4.5. 解析 <color> 值

注意：该算法并不打算用于解析 CSS 样式表中或通过 CSSOM 接口指定的 CSS <color> 值，而是用于其他地方，例如 HTML 属性或 Canvas 接口。

5. sRGB 颜色

sRGB 颜色空间中的 CSS 颜色由三个值（红、绿、蓝）的三元组表示，用于标识 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 颜色调整 1 § 5.2 强制颜色模式调色板。<system-color> 关键字公开了这些用户选择的颜色，以便页面的其余部分可以与此受限调色板集成。

当 forced-colors 媒体特性 处于活动状态 时，作者 应当 在 CSS 颜色调整 1 § 3.1 受强制颜色模式影响的属性 中列出的属性之外的属性中使用 <system-color> 关键字作为颜色值，以确保整个页面的易读性和一致性，并避免用户强制选择的颜色与页面选择的颜色发生不协调的混合。

当 <system-color> 关键字的值来自浏览器（而不是操作系统默认值或用户选择）时，浏览器应确保 匹配的前景/背景对 至少达到 WCAG AA 对比度。然而，用户偏好（对于更高或更低的对比度），无论是设置为浏览器偏好、用户样式表，还是通过更改操作系统默认值，都必须优先于此要求。

作者 可以 在任何时候使用这些关键字，但 应当 注意使用 匹配的背景-前景对 中的颜色以确保适当的对比度，因为跨非匹配对（例如 Canvas 和 ButtonText）的任何特定对比度关系都无法保证。

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

AccentColor

 强调用户界面控件的背景。

AccentColorText

 强调用户界面控件的文本。

ActiveText

 活动链接中的文本。对于浅色背景，传统上为红色。

ButtonBorder

 按钮的基本边框颜色。

ButtonFace

 按钮的表面背景颜色。

ButtonText

 按钮上的文本。

Canvas

 应用程序内容或文档的背景。

CanvasText

 应用程序内容或文档中的文本。

字段

 输入字段的背景。

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 在任何背景上都是可读的，尽管可能对比度较低。

为了保持与小部件 强调色（accent color） 样式的一致性，AccentColor 从 accent-color 获取其值，除非启用了 强制颜色模式。AccentColorText 从 AccentColor 的对比前景颜色中获取其值，如小部件 强调色 样式所述。

较早版本的 CSS 定义了额外的 <system-color>，此后已被弃用。这些已记录在 附录 A：已弃用的 CSS 系统颜色 中。

注意：<system-color> 会带来一些隐私和安全风险，如 § 22 隐私考虑 和 § 21 安全考虑 中所述。

为了减轻指纹识别等隐私和安全风险，用户代理可以选择为系统颜色的使用值返回固定值，这些值不反映用户做出的定制或主题选择。

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 的生成更容易。但后来所有的表示属性都从连字符形式更改为 camelCase（驼峰式），因为 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，则色相分量即为 无力 的。

HSL 相对于 RGB 的优势在于它更直观：人们可以猜测他们想要的颜色，然后进行微调。

hsl(120deg 100% 50%) lime green
hsl(120deg 100% 25%) dark green
hsl(120deg 100% 75%) light green
hsl(120deg 75% 85%)  pastel green

HSL 相对于 OkLCh 的一个缺点是色相操作会改变视觉明度，且色相在空间中的分布并不均匀。

因此，在 HSL 中创建匹配的颜色集更容易（通过保持色相不变并改变饱和度和明度），相比于操作 sRGB 分量值；然而，由于明度只是经过伽马校正的红、绿和蓝分量的平均值，它并不对应于跨色相的视觉明度感知。

HSL 中的色相角在感知上是不均匀的；颜色在某些区域显得密集，而在另一些区域则分布稀疏。

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

7.1. 将 HSL 颜色转换为 sRGB

将 HSL 颜色转换为 sRGB 的数学过程非常直接。以下是转换算法的一个 JavaScript 示例实现。它返回一个包含三个数字的数组，分别代表颜色的红、绿、蓝分量；对于 sRGB 色域内的颜色，其取值范围为 [0, 1]。

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

/**
 * @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（Hue-Whiteness-Blackness，色相-白度-黑度）[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%（全黑度）。

超出这些范围的值并非无效；超出 [0, 360) 范围的色相角将被规范化到该范围内，白度和黑度之和达到 100% 或以上的值将产生如下所述的非彩色。

所产生的颜色在概念上可以看作是选定色相的颜料、白色颜料和黑色颜料的混合物，各自的相对量由百分比决定。

如果白度+黑度之和大于或等于 100%，则定义为非彩色，即灰色调；当转换为 sRGB 时，R、G 和 B 的值是相同的，且值为 白度 / (白度 + 黑度)。

非彩色的 HWB 颜色不再包含任何选定色相的痕迹。在这种情况下，色相分量是无作用的（powerless）。

第四个参数指定颜色的 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 颜色时的测量白点。

从使用其他白点指定的颜色进行转换称为色适应变换（chromatic adaptation transform），它模拟了当我们适应新照明条件时人类视觉系统的变化。线性 Bradford 算法 [ICC]（原始 Bradford 算法 [Bradford-CAT] 的简化版本）是工业标准的色适应变换，由于只是简单的矩阵乘法，计算起来非常容易。

CIE LCH 具有与 Lab 相同的 L 轴，但使用极坐标 C（色度，Chroma）和 H（色相，Hue），使其成为一个极坐标柱面坐标系。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 模型的发展旨在为 RGB 提供类似于 LCH 给 Lab 带来的易用性好处，但其准确性明显较低。

尽管 CIE Lab 和 LCH 的应用广泛，但已知存在一些问题。特别是：

色相线性

在蓝色区域（LCH 色相在 270° 和 330° 之间），视觉色相与 LCH 的预测结果存在偏差。绘制一组具有相同色相但色度不同的蓝色，本应位于从中性轴出发的一条直线上，却形成了一条曲线。换句话说，当饱和蓝色的色度逐渐降低时，它会明显地变得偏紫。

色相均匀性

虽然 LCH 中的色相总体上是均匀分布的（远优于 HSL 或 HWB），但均匀性并不完美。

高色度差异的过度预测

对于高色度颜色，色度变化比对中性颜色更容易被察觉。

这些缺陷影响了诸如创建均匀间隔的渐变、将颜色从一个色空间映射到更小的色空间以及计算两种颜色之间的视觉差异等应用。

为了弥补这一点，用于预测两种颜色之间视觉差异（delta E）的公式随着时间的推移变得更加精确（但也变得更加复杂，难以计算）。目前的工业标准公式 delta E 2000 在缓解部分 Lab 和 LCH 问题方面效果良好。示例实现见 § 20.1 ΔE2000。

然而，这并不能解决色相弯曲问题。

9.2. Oklab 和 OkLCh

本节不具有规范性。

最近，开发了一种改进的类 Lab 空间 Oklab [Oklab]。相应的极坐标形式称为 OkLCh。它通过对大量视觉相似颜色数据集进行数值优化而产生，与 CIE LCH 相比，改善了色相线性、色相均匀性和色度均匀性。

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

注意：与假设适应漫反射白的 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.2 Δ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> 分量，由斜杠分隔，代表透明度分量。

如果 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。它的解释类似于 hsl() 的 <hue> 参数，但由于它们在感知上是均匀分布的，因此不会以相同的方式将色相映射到角度。相反，0deg 指向正“a”轴（朝向紫红色）（360deg、720deg 等也是如此）；90deg 指向正“b”轴（朝向芥末黄），180deg 指向负“a”轴（朝向绿青色），270deg 指向负“b”轴（朝向天蓝色）。

有一个可选的第四个 <alpha-value> 分量，由斜杠分隔，代表透明度分量。

如果 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 不存在 Web 兼容性问题，它们是本规范版本中新增的内容，因此 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> 分量，由斜杠分隔，代表透明度分量。

如果 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。它的解释类似于 hsl() 和 lch() 的 <hue> 参数，但不会以相同的方式将色相映射到角度。0deg 指向正“a”轴（朝向紫红色）（360deg、720deg 等也是如此）；90deg 指向正“b”轴（朝向芥末黄），180deg 指向负“a”轴（朝向绿青色），270deg 指向负“b”轴（朝向天蓝色）。

有一个可选的第四个 <alpha-value> 分量，由斜杠分隔，代表透明度分量。

如果 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 不存在 Web 兼容性问题，它们是本规范版本中新增的内容，因此 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%。这些并非无效，并保留用于中间计算；相反，为了显示，它们会在实际值确定时，使用相对色度意图（relative colorimetric intent）进行CSS 色域映射，将值（在显示器色空间中）带入 0/0% 到 1/100% 的范围内。

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

color() 不存在 Web 兼容性问题，它是本规范版本中新增的内容，因此 color() 不支持使用逗号分隔所有参数的旧版颜色语法。在此函数中使用逗号是错误的。

既是无效颜色又是色域外的颜色无法显示。

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

如果指定的颜色是有效颜色但无法显示，则其实际值源自指定的颜色，并为显示进行CSS 色域映射。

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