CSS颜色模块第5级

W3C 工作草案,

关于本文档的更多信息
本版本:
https://www.w3.org/TR/2026/WD-css-color-5-20260413/
最新发布版本:
https://www.w3.org/TR/css-color-5/
编辑草稿:
https://drafts.csswg.org/css-color-5/
以往版本:
历史记录:
https://www.w3.org/standards/history/css-color-5/
反馈:
CSSWG问题仓库
编辑者:
Chris Lilley (W3C)
Una Kravets (谷歌)
Lea Verou (受邀 专家)
前编辑者:
Adam Argyle (谷歌)
建议为本规范编辑:
GitHub 编辑器
差异规范:
是
测试套件:
https://wpt.fyi/results/css/css-color/

Copyright © 2026 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.

摘要

本模块扩展了 CSS Color [css-color-4]，新增了颜色修改函数、自定义颜色空间（ICC 配置文件）、contrast-color()、light-dark() 和 device-cmyk()。

CSS 是一种用于描述结构化文档（如 HTML 和 XML）在屏幕、纸张等上的渲染方式的语言。

本文档状态

本节描述了本文档在发布日期时的状态。 当前 W3C 发布内容列表以及本技术报告的最新修订版 可在 W3C 标准与草案索引内查找。

本文档由 CSS 工作组 作为工作草案，采用推荐标准通道发布。 工作草案的发布 不代表 W3C 及其成员的认可。

这是一个草稿文件 可能随时被更新、替换或废弃。 除非作为进展中的工作，否则不适宜引用本文件。

请通过在 GitHub 上提交 issue（推荐）的方式反馈， 在标题中写上规范代码 “css-color”，例如：“[css-color] ……注释摘要……”。 所有问题和评论都会归档。 或者，也可将反馈发送到（已归档）公共邮件列表 www-style@w3.org。

本文档适用 2025年8月18日W3C流程文件。

本文件由遵循 W3C 专利政策 的团队制作。 W3C 维护有一份 与团队交付成果相关的专利披露公开列表； 该页面还说明了如何披露专利。 个人如实际知晓某专利且认为 包含基本权利要求， 必须遵循 W3C 专利政策第6节 披露相关信息。

1. 简介

本节不具规范性。

本模块新增了 contrast-color()、 color-mix() 和 light-dark() 这几个新函数， 并通过 相对颜色语法 扩展了已有函数。

它还扩展了 color() 函数， 使其不仅能使用预定义的颜色空间， 还可以使用 CSS 中通过 ICC 配置文件定义的自定义颜色空间 （包括校准 CMYK）。

同时还新增了 device-cmyk， 即未校准的 cmyk 颜色的表示方式。

2. <color> 语法

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

<color> = <color-base> | currentColor | <system-color> | 
      <contrast-color()> | <device-cmyk()>  | <light-dark-color>

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

绝对色 指的是其计算值有确定、色度学意义的 <color>。 即它的值不是：

这些值也不能用在 <color-mix()> 或相对颜色语法里。

解析为 sRGB 的颜色有：

支持传统颜色语法 的函数有：

<hsl()>、<hsla()>、<hwb()>、<lch()> 以及 <oklch()> 这些 颜色函数 是用圆柱极坐标色彩表示方式，并用 <hue> 角度； 其他 颜色函数 则采用 直角正交色彩 表示方式。

3. 混合颜色：color-mix() 函数

Web开发者、设计工具和设计系统开发者 经常使用颜色函数来帮助扩展组件色彩关系的设计。 随着支持多平台和多用户偏好的设计系统使用的增加， 例如 UI 的深色模式能力提升， 自动计算配色，无需手动指定颜色， 能让方案统一输出，从一处自动生成所有色板，变得更为实用。

LC color picker
chloropleth map of the US

上图为 CIE LCH 空间下的颜色选择器。 用一组颜色定义色标， 在色度-明度平面（色相恒定）上绘制。 下图为该色标在分级地图上的运用实例。

目前通常使用 Sass、对 HSL 进行 calc() 或 PostCSS 预处理实现。 但预处理器无法处理运行时动态变化的颜色； 现有方案都局限于 sRGB 色域， 并受到 HSL 感知效果的限制 （色轮某些部位颜色聚集， 且某些视觉亮度差异极大的颜色，如黄与蓝，HSL 明度值却可相同）。

为此，color-mix() 函数可以接收 一个或多个 <color> 规格， 并在指定的 <color-space> 和比例下混合输出。

color-mix() = color-mix( <color-interpolation-method>? , [ <color> && <percentage [0,100]>? ]#)
测试

3.1. 混合用的颜色空间

如果未指定颜色插值方法，则默认使用 Oklab。 否则使用指定的颜色空间进行混合。

例如，以下两个写法是完全等价的： 
color-mix(in oklab, firebrick, goldenrod)
color-mix(firebrick, goldenrod)

3.2. 百分比归一化

百分比必须在 0% ~ 100% 范围内。 不允许负百分比。 百分比通过混合百分比归一化进行归一化。

测试
下列写法都等价： 
color-mix(in lch, purple 50%, plum 50%)
color-mix(in lch, purple 50%, plum)
color-mix(in lch, purple, plum 50%)
color-mix(in lch, purple, plum)
color-mix(in lch, plum, purple)
color-mix(in lch, purple 80%, plum 80%)

所有这些写法都会得到 purple 和 plum 各占一半的 lch 混合色： lch(51.51% 52.21 325.8)，即 rgb(68.51% 36.01% 68.29%)。

但下例则不同，其中 alpha 小于 1：

color-mix(in lch, purple 30%, plum 30%)

该例结果为 lch(51.51% 52.21 325.8 / 0.6)，即 rgb(68.51% 36.01% 68.29% / 0.6)。

3.3. color-mix 的结果计算

color-mix() 计算流程：

  1. 对传入函数的 混合项 列表， 归一化混合百分比， 启用“强制归一化”标志， 最终令 items 和 leftover 得到结果。

  2. 如果 leftover 为 100%， 返回指定插值 <color-space> 下的 透明黑。

  3. 令 alpha mult 为 1 - leftover， 并将 leftover 视为 0 到 1 间的数字。

  4. 如果 items 长度为 1， 则 color 设为唯一混合项的颜色， 并转换到指定插值 <color-space>。

    否则：

    1. 把 items 反转成 栈 item stack。 （即原队列第一个为栈顶。）

    2. 当 item stack 长度大于等于 2 时：

      1. 从 item stack 弹出 两项，分别为 a 和 b。 combined percentage 设为 a 与 b 百分比之和。

      2. 按照 CSS Color 4 §  12. 色彩插值， 以 progress 百分比 (b 百分比) / combined percentage) 插值 a 与 b 的色值。 若指定插值空间为 圆柱极坐标色彩空间， 则 <hue-interpolation-method> 控制 色相插值，方法见 CSS Color 4 § 12.4 色相插值。 若未指定 <hue-interpolation-method> ，默认使用 shorter。

      3. 新建 混合项，颜色为插值结果， 百分比为 combined percentage， 推入 item stack。

    3. color 设为 item stack 最后仅存混合项的颜色。

  5. 把 color 的 alpha 分量乘以 alpha mult。

  6. 返回 color。

注意： 在 圆柱极坐标色彩 空间下， 混合顺序会影响结果， 因为“顺时针还是逆时针”绕色环方向取决于前面混合产生的结果。 本算法按指定顺序逐个混色， 每次用中间结果与后一个混合。 若用正交色彩空间， 顺序不影响结果， 可以简化处理流程。

测试
下例混合 40% peru 和 60% palegoldenrod： 
color-mix(in lch, peru 40%, palegoldenrod)

混色空间为lch。 下图为俯瞰中性色轴 L 的可视化：

两个颜色混合及其输出。 我们沿 CIE L 轴朝 ab 平面俯视。 有两条轴，标记 a 和 b， 在原点交叉，也即图中心。
在 CIE LCH 下混合 peru 和 palegoldenrod。 peru 的色相角以正 a 轴为零为 63.677 度， palegoldenrod 的色相为 98.834 度。 peru 的色度， 即离中心中性轴距离为54.011， palegoldenrod 的色度为 31.406。 所有混合点都位于曲线上。下图为 40%/60% 混合。

计算流程如下：

下例为 teal 和 olive 的混合， 用 lch 空间混合， 每个 lch 分量分别占 teal 的 65% 和 olive 的 35%。

注意： 色相和色度分量插值 可保持中间色与端点色一样饱和。

color-mix(in lch, teal 65%, olive);

两个颜色混合及其输出。 沿 CIE L 轴向 ab 平面俯视。 有两轴，a 和 b，在原点交叉。

teal 与 olive 的 LCH 混合。 teal 的色相为 196.4524 度， olive 为 99.5746 度； teal 的色度为 31.6903， olive 的色度为 56.8124。 混合点位于虚线曲线。当前为 65%/35% 混合。

计算如下：

此例中两个百分比分别为零，和也为零： 
color-mix(in oklch, teal 0%, olive 0%);

因此在oklch 空间下的结果是透明黑：
oklch(0% 0 none / 0)

此例混合了三个颜色， 未指定百分比， 因此每种颜色都占三分之一权重： 
color-mix(in oklab, teal, olive, blue);

计算如下：

3.4. 混合颜色空间对 color-mix 的影响

所选的混色空间会对最终结果产生很大影响。

本例为在三种不同的颜色空间下， 白色与黑色的 50% 混合。 
color-mix(in lch, white, black);
color-mix(in xyz, white, black);
color-mix(in srgb, white, black);

计算如下：

LCH 混合结果 L 为 50%， 正好是预期的标准灰色 （Lab 混合亦同，因为 LCH 和 Lab 明度轴一致）。

XYZ 混合得到的结果太亮； XYZ 虽为线性光，但感知非均匀。 sRGB 混合结果也略偏亮； sRGB 既非感知均匀，也非线性光。

本例混合了一种红色和天蓝色， 在 xyz 颜色空间下， 红色占 75.23% （即蓝色占 24.77%）。 
color-mix(in xyz, rgb(82.02% 30.21% 35.02%) 75.23%, rgb(5.64% 55.94% 85.31%));

计算如下：

本例为白色与蓝色在三种不同颜色空间下的 50% 混合。

color-mix(in lch, white, blue);
color-mix(in oklch, white, blue);
color-mix(in srgb, white, blue);

计算如下：

本例为两种颜色在 hsl 颜色空间下混合， 其中有一种颜色超出了 sRGB 色域。 
color-mix(in hsl, color(display-p3 0 1 0) 80%, yellow);

计算如下：

device-cmyk() 可用于 color-mix()， 但结果依赖于实现选择如何获得计算值。 
color-mix(in lab, device-cmyk(0.091777 0.043303 0.312816 0.000000) 100%, yellow);

由于第一个颜色为100%， 第二个颜色为0%，完全不影响混合结果。 因此结果即为第一个颜色在 CIE Lab 空间的计算值。

为了可视化结果， 假设该设备 CMYK 实际为 SWOP 2006 coated 印刷色。

如果实现用 ICC 配置文件获取 lab() 颜色， 本例假设采用 FOGRA39 Coated 配置：

若另一个实现用 简单颜色转换算法， 得到 sRGB 结果：

3.5. 非1透明度对 color-mix 的影响

到目前为止，所有 color-mix() 示例 都使用了完全不透明的颜色。 为了简化示例， 省略了预乘和反预乘步骤， 因为这些步骤只需乘以1除以1，结果没变化。

一般情况下， 颜色可能存在非1的 alpha 分量， 此时预乘、插值、反预乘 这些步骤都不能省略。

本例为 25% 半透明红 和 75% 半透明绿 在 sRGB 下混合。 展示了正确（预乘）和错误（未预乘） 的计算过程。 
color-mix(in srgb, rgb(100% 0% 0% / 0.7) 25%, rgb(0% 100% 0% / 0.2));

计算如下：

错误计算如下：

二者差异极大，正确与错误结果的 ΔE2000 可达 30.7！

当百分比归一化后生成 alpha 乘数时， 只需在末尾多一步即可完成计算。

本例与上例类似， 25% 半透明红 和 75% 半透明绿 在 sRGB 下混合。

但本例中百分比写作 第一色 20%，第二色 60%。 总计 80%，alpha 乘数为 0.8。

混合百分比需乘以 100/80：
20% * 100/80 = 25%
60% * 100/80 = 75%
得到与上例相同的最终权重。

color-mix(in srgb, rgb(100% 0% 0% / 0.7) 20%, rgb(0% 100% 0% / 0.2) 60%);

计算如下：

注意： 不要用归一化后的 alpha 直接反预乘。 那样只有在混合权重不缩放到100%时才正确， 本算法权重总要归一化，所以那样会被重复修正。

4. 相对色彩

4.1. 相对色彩处理模型

本规范此前版本的颜色函数， 只能通过直接指定全部色彩分量的方式，仅指定绝对色。

新增的 相对色彩 语法 扩展了 现代颜色语法， 允许用颜色函数对已有颜色做修改： 如果指定了 原色， 那么每个色彩分量 （若有 alpha 分量也可控制）， 可以直接指定， 也可从原色中取 （也可以配合 数学函数做运算）。

原色与相对色不必使用相同的颜色函数。

必需转换： 所有运算都在 相对色函数的颜色空间下进行； 若 原始指定颜色空间 与 原色 用的颜色空间不同， 需要先转换进目标函数， 让每个分量都有意义， 分量关键字 所指向的分量属于相对色的色彩空间， 而不是 原色的空间。

若相对色未指定 alpha， 则 alpha 默认为 原色的值 （不再默认 100%，而像绝对语法那样）。

使用相对色彩语法时， 颜色分量的值， 无论直接指定还是由空间转换得来， 不会被限定在参考区间，而是原样保留。 这使得若目标空间支持，可保留超出色域的值。

但使用相对色彩语法时， alpha 分量的值， 无论直接指定还是由空间转换得来， 会被限定在参考区间。

缺失分量的处理方式与 CSS Color 4 § 12.2 缺失分量插值一致： 会先在原色空间与函数目标空间查找对应分量 并传递为缺失分量。

绝大部分 相对色彩语法的用法 都会用 分量关键字 填对应参数，也可用于其它位置。

注意若分量关键字出现在非常规位置； 若百分比最终要转成数值， 那么这些数不会被“魔法比例缩放”， 直接套用可能产生误差。

不支持相对 device-cmyk() 语法。

4.2. 相对颜色语法

下面列出了各函数为兼容 相对颜色 所做的精确定义更改， 但它们都遵循一个通用结构：

这些 分量关键字 返回一个 <number>，或 none； 若它们原本是以 <percentage> 或 <angle> 指定， 则该 <percentage> 会被解析为 <number>， 而 <angle> 会被解析为以度为单位的 <number> （这是其 规范单位），范围为 [0, 360]。

测试
例如，如果某颜色以 <percentage> 指定， 则同一色彩空间的相对颜色语法（RCS）会使用解析后的 <number> 形式： 
html { --bluegreen:  oklab(54.3% -22.5% -5%); }
.overlay {
  background:  oklab(from var(--bluegreen) calc(1.0 - l) calc(a * 0.8) b);
}

在此例中，指定的百分比被解析为数值， 得到 oklab(0.543 -0.09 -0.02)。 得到的 RCS 颜色的 l = 1 - 0.543 = 0.457， a = -0.09 * 0.8 = -0.072， b 保持为 -0.02： oklab(0.457 -0.072 -0.02)。

例如，如果原色的色相以 <angle> 用度指定， 则同一色彩空间的 RCS 会使用解析后的 <number> 形式： 
html { --base:  oklch(52.6% 0.115 44.6deg) }
.summary {
  background:  oklch(from var(--base) l c  calc(h + 90));
}

在此例中，得到的 RCS 颜色为 oklch(0.526 0.115 134.6)。

若原色的色相 <angle> 使用其他单位指定（例如弧度或圈数）， 解析得到的 <number> 仍然会是以度为单位的数值。

通过在 分量关键字 中 使用 数学函数， 可以对 原色 做更高级的操作。 
html { --color: green; }
.foo {
  --darker-accent:  lch(from var(--color) calc(l / 2) c h);
}

在此例中，原色 的亮度被减半而变暗， 其余颜色属性保持不变。

另请注意，原色 是一个颜色关键字 （因此为 sRGB）， 但由于它被用在 lch() 函数中， 它会被自动解释为 LCH 颜色。

例如，如果主题颜色被指定为不透明， 但某个实例需要它部分透明： 
html { --bg-color:  blue; }
.overlay {
  background:  rgb(from var(--bg-color) r g b / 80%);
}

在此例中，原色 的 r、g、b 分量不变， 通过关键字从 原色 获取它们的值， 但不透明度被设为 80%，使其略显透明， 无论 原色 的不透明度如何。

例如，一个 Display P3 颜色即使超出 sRGB 色域，也可以被表示出来， 因为它不会被裁剪（clamp）。 
--vivid-yellow:  color(display-p3 1 1 0); 
--paler-yellow:  color(from var(--vivid-yellow) srgb r g calc(b + 0.5));

此处 --vivid-yellow 在被转换为 sRGB 后为 rgb(100% 100% -34.63%)， 负的 blue 分量不会被限定（clamp）。 RCS 计算的结果为 rgb(100% 100% 15.37%)

例如，试图将原色的 alpha 为 0.7 倍增为 1.4 时， 结果的 alpha 为 1 而不是 1.4。 
--tan:  oklch(78% 0.06 75 / 0.7);
--deeper-tan:  oklch(from var(--tan) l c h / calc(alpha * 2));
例如，要粗略地将颜色转换为灰度： 
--blue-into-gray: rgb(from var(--color)
                    calc(r * .3 + g * .59 + b * .11)
                    calc(r * .3 + g * .59 + b * .11)
                    calc(r * .3 + g * .59 + b * .11));

使用此方法， red 会变为 rgb(76.5 76.5 76.5)， lime 会变为 rgb(150.45 150.45 150.45)， 而 blue 会变为 rgb(150.45 150.45 150.45)。 一个较为中等的颜色，例如 darkolivegreen， 其 RGB 值为 rgb(85 107 47)， 会变为 rgb(93.8 93.8 93.8)。

（粗略原因有二： 首先，尽管这看似亮度计算， 但红绿蓝值在这里是在伽玛编码空间中处理的，而非线性光空间； 其次，所用的权重系数是过时的 NTSC 颜色空间的，而非 sRGB。）

（另注：此示例仅用于说明语法； 更简单且更准确的灰度化方法是使用 oklch() 函数， 因为该色彩空间对人类感知更准确： oklch(from var(--color) l 0 h) 保持亮度不变， 但将色度归零，从而决定颜色的“鲜艳度”。）

例如，

color: color(from color(srgb 0 0 0 / 60%) srgb alpha 0.6 0.6 / 0.9);

alpha 分量解析为一个 <number>， 得到 0.6；因此得到的颜色为 color(srgb 0.6 0.6 0.6 / 0.9)。

然而，在下面第二个例子中，alpha 同样解析为 0.6， 但由于 rgb() 语法中颜色分量的范围为 0 到 255， 最终颜色会非常不同： 

color: rgb(from rgb(0 0 0 / 60%) alpha 153 153 / 0.9);

其结果为 rgb(0.6 153 153 / 0.9) 而不是 rgb(153 153 153 / 0.9)。

在此例中，无色的原色缺少色相； 相应的 相对颜色 也缺少色相， 这会影响使用该颜色的渐变。 
html { --bg:  hsl(none 3% 50%); }
.foo {
  --darker-bg:  oklch(from var(--bg) calc(l * 0.8) c h);
}
.bar {
  background: linear-gradient(in Oklab to right,   var(--darker-bg),   #4C3);
}

当 --bg 转换为 OkLCh 时的值为 oklch(0.592 0.009 17.42) 但类比的色相分量会被传递（carried forward）， 得到 oklch(0.592 0.009 none)。 这些值随后用于相对函数，得到更暗的颜色 oklch(0.474 0.009 none)。

渐变中的浅绿色为 oklch(0.743 0.222 141.6)， 因此在插值时另一颜色会采用该色相， 变为 oklch(0.474 0.009 141.6)。

因此，该渐变会保持恒定的偏绿色相。

如果实现未执行此传递操作， 则灰色的 --darker-bg 将得到色相 0， 导致渐变起始处出现不希望的偏红色调。

正确（上）与不正确（下，偏红）的渐变。

不过，如果对缺失值进行计算，none 会被视作 0。

4.3. 相对 sRGB 颜色

sRGB 颜色的含义在 CSS Color 4 § 5 sRGB Colors 中定义。

现代颜色语法 中 rgb() 与 rgba() 函数的文法扩展如下：

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

在 相对颜色 语法的 rgb() 或 rgba() 函数中， 允许的 分量关键字 有：

测试
要在 sRGB 色彩空间中操作颜色分量： 
rgb(from  indianred 255 g b)

这会取 indianred 的 sRGB 值（205 92 92）并将红分量替换为 255，得到 rgb(255 92 92)。

相对 sRGB 颜色语法仅适用于非传统的 RGB 语法形式。

例如，尝试对 rgba 使用带逗号的 传统颜色语法 是不正确的： 
rgba(from  darkblue 16, 32, b, 0.5 )
应改为使用： 
rgb(from  darkblue 16 32 b / 0.5 )

这会取 darkblue 的 sRGB 值（0 0 139）并替换红、绿及 alpha 分量，得到 rgb(16 32 139 / 0.5)

4.4. 相对 HSL 颜色

HSL 颜色的含义在 CSS Color 4 § 7 HSL Colors: hsl() and hsla() functions 中定义。

The grammar of the modern color syntax hsl() and hsla() functions is extended as follows:

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

在 相对颜色 语法的 hsl() 或 hsla() 函数中， 允许的 分量关键字 有：

Tests
这会在色相角上加上 180 度，从而得到互补色。 
--accent:  lightseagreen;
--complement:   hsl(from var(--accent) calc(h + 180) s l);
lightseagreen 的值为 hsl(177deg 70% 41%)，因此 --complement 为 hsl(357deg 70% 41%)

相对 HSL 颜色语法仅适用于非传统的 HSL 语法形式。

4.5. 相对 HWB 颜色

HWB 颜色的含义在 CSS Color 4 § 8 HWB Colors: hwb() function 中定义。

The grammar of the hwb() function is extended as follows:

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

在 相对颜色 语法的 hwb() 函数中，允许的 分量关键字 有：

Tests

4.6. 相对 Lab 颜色

Lab 颜色的含义在 CSS Color 4 § 9.1 CIE Lab and LCH 中定义。

The grammar of the lab() function is extended as follows:

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

在 相对颜色 语法的 lab() 函数中，允许的 分量关键字 有：

多种调整基础颜色透明度的方式：

注意所有这些调整都是无损的，因为不会发生色域裁剪（gamut clipping），因为 lab() 覆盖了所有可见颜色。 对于基于 sRGB 的函数（例如 'rgb()', 'hsl()', 或 'hwb()'）的 alpha 调整并非如此， 因为它们还需要先转换到 sRGB 来计算 HSL 或 HWB，然后才能调整 alpha。

将颜色完全去饱和为灰色，同时保持完全相同的明度： 
--mycolor:  orchid;
// orchid is lab(62.753 52.460 -34.103)
--mygray:  lab(from var(--mycolor) l 0 0)
// mygray is lab(62.753 0 0) which is rgb(59.515% 59.515% 59.515%)

4.7. 相对 Oklab 颜色

Oklab 颜色的含义在 CSS Color 4 § 9.2 Oklab and OkLCh 中定义。

The grammar of the oklab() function is extended as follows:

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

在 相对颜色 语法的 oklab() 函数中，允许的 分量关键字 有：

4.8. 相对 LCH 颜色

LCH 颜色的含义在 CSS Color 4 § 9.1 CIE Lab and LCH 中定义。

The grammar of the lch() function is extended as follows:

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

在 相对颜色 语法的 lch() 函数中，允许的 分量关键字 有：

Tests
lch(from peru calc(l * 0.8) c h) 产生一个比 peru 暗 20% 的颜色（peru 为 lch(62.2532% 54.0114 63.6769)），其色度和色相保持不变。 结果为 lch(49.80256 54.0114 63.6769)
这会在色相角上加上 180 度，从而得到互补色。 
--accent:  lightseagreen;
--complement:   lch(from var(--accent) l c calc(h + 180));
lightseagreen 为 lch(65.4937 39.4484 190.1013)，因此 --complement 为 lch(65.4937 39.4484 370.1013)
将颜色完全去饱和为灰色，同时保持完全相同的明度： 
--mycolor:  orchid;
// orchid is lch(62.753 62.571 326.973)
--mygray:  lch(from var(--mycolor) l 0 h)
// mygray is lch(62.753 0 326.973) which is rgb(59.515% 59.515% 59.515%)

但现在（因为保留了色相）再把色度恢复（re-saturating）：

--mymuted:  lch(from var(--mygray) l 30 h);
// mymuted is lch(62.753 30 326.973) which is rgb(72.710% 53.293% 71.224%)

然而，与 HSL 不同，LCH 中的操作并不保证总是在色域内（in-gamut）。

在这个例子中，目标是产生一个具有相同明度和色度的新颜色，但色相相差 120 度的三元色。 原色在 RGB 色域内，但在 LCH 中旋转色相会产生一个超出色域的颜色。 
--mycolor:  lch(60% 90 320);
lch(from var(--mycolor) l c calc(h - 120));

这会得到一个非常高色度的蓝绿色， lch(60% 90 200) 它是 color(srgb -0.6 0.698 0.772) 因此对于 sRGB 来说超出色域（红分量为负）。 实际上，它对 display-p3 也是超出色域： color(display-p3 -0.46 0.68 0.758) 甚至对 rec2020 也是超出色域： color(rec2020 -0.14 0.623 0.729)。

sRGB 色域内最接近的颜色为 lch(60.71% 37.56 201.1) 对应 rgb(0% 64.2% 66.3%)。 色度的差异巨大（变为 37.5 而非 90）。

CIE CH 平面示意图，显示相对颜色操作。 图中标注了 a 和 b 轴，并在中间交叉。 我们沿中央的明度轴向下观察。 sRGB 色域的最大范围显示为一个不规则的凸多边形。

该图显示了 CIE ab 平面上的 sRGB 色域。 小圆点表示主色和次色。 原色（大圆）在 sRGB 色域内； 但当在 LCH 中将色相旋转 -120° 时，它变为 超出色域（以灰色填充并用红色边框显示）。 进行色域映射后的结果颜色具有明显更低的色度。

在 HSL 中执行相同操作将返回一个在色域内的结果。 但在其他方面并不令人满意：

--mycolor:  lch(60% 90 320);
hsl(from var(--mycolor) calc(h - 120) s l);

在 HSL 中，--mycolor 为 hsl(289.18 93.136% 65.531%) ，减去 120 度得到 hsl(169.18 93.136% 65.531%)。 将该结果转换回 LCH lch(89.0345% 49.3503 178.714) 我们看到，由于在 HSL 中的色相旋转， 明度从 60% 跃升到 89%， 色度从 90 降到 49， 色相实际上改变了 141 度，而不是 120 度。

4.9. 相对 OkLCh 颜色

OkLCh 颜色的含义定义于 CSS Color 4 § 9.2 Oklab and OkLCh。

oklch() 函数的文法扩展如下：

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

在 相对颜色 语法中使用 oklch() 函数时，允许的 分量关键字 如下：

Tests

由于 OkLCh 既感知均匀又能保持色度，且其坐标轴与颜色的直观属性对应， 因此 OkLCh 是进行颜色操作的良好选择。

In this example, the aim is again to produce a new color with the same Lightness and Chroma, but the triad (hue differs by 120 degrees). In this example, we will do the manipulation in OkLCh. The origin color is inside the RGB gamut, but rotating the hue in OkLCh again produces an out of gamut color. 
--mycolor:  lch(60% 90 320);
oklch(from var(--mycolor) l c calc(h - 120));

--mycolor 是 oklch(0.69012 0.25077 319.893)。 将色相减去 120 度会得到一个高色度的蓝绿色， oklch(0.69012 0.25077 199.893)， 该颜色超出 sRGB 色域， 表示为 color(srgb -0.6018 0.7621 0.8448)， 由于红色分量为负值可见其超出色域。 通过降低 OkLCh 的色度以使其入色域， 得到 oklch(0.69012 0.1173 199.893)。 OkLCh 的色度由 0.251 降至 0.117。

4.10. 相对 Alpha 颜色

相对 alpha 颜色以某一原色为参照，仅修改 alpha 通道。alpha 通道的含义见 CSS Color 4 § 4.2 以颜色表示透明度：<alpha-value> 语法。

alpha() 函数（本级别新增）的文法如下：

alpha() = alpha([from <color>]
          [ / [<alpha-value> | none] ]? )

在 相对颜色 语法中使用 alpha() 函数时，允许的 分量关键字 为：

原色的颜色分量保持不变，仅修改或替换 alpha 分量。 此函数的结果位于原色的颜色空间中。

Tests
例如，此处结果与原色相同， 但 alpha 被改为 80% 
--mycolor:  oklch(60% 0.25 315 / 0.3);
 alpha(from var(--mycolor) / 80%);
例如，此处结果与原色相同， 但 alpha 被修改为原色的一半 
--mycolor:  oklch(60% 0.25 315 / 0.8);
 alpha(from var(--mycolor) / calc(alpha * 0.5));

5. 指定预定义和自定义色彩空间：color() 函数

color() 函数允许在特定、显式列出的 色彩空间 中指定颜色 （而不是大多数其他颜色函数所隐含的 sRGB 色彩空间）。

在本级别中，color() 函数被扩展为允许自定义色彩空间， 除了来自 CSS Color 4 § 10 预定义色彩空间 的预定义空间之外。

它还扩展为允许使用相对颜色（而不仅仅是绝对颜色）。

其语法现在如下：

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

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

它表示下述两类之一：一个如下面所述的 无效颜色， 或者一个 有效颜色。

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

一种颜色可以是 有效颜色， 但仍可能超出输出设备（屏幕、投影仪或打印机）可产生的颜色范围。 对于该色彩空间，它被称为 超出色域。

超出色域的颜色具有小于 0 或 0% 的分量值，或大于 1 或 100% 的分量值。 这些并非无效；相反，在显示时它们会在计算值阶段使用相对色度意图被 色域映射， 将值带回到 0/0% 到 1/100% 的范围内。

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

5.1. 相对颜色函数的颜色

在使用 <custom-params> 的 相对颜色 语法的 color() 函数中，允许的 分量关键字 的名称和数量由下列项决定：

在使用 <predefined-rgb-params> 的 相对颜色 语法的 color() 函数中，允许的 分量关键字 为：

在使用 <xyz-params> 的 相对颜色 语法的 color() 函数中，允许的 分量关键字 为：

在使用 <predefined-rgb-params> 或 <xyz-params> 的 相对颜色 语法的 color() 函数中，额外允许的一个 分量关键字 为：

参数具有如下形式：

Tests
例如，在 CIE XYZ D65 色彩空间中使用相对颜色语法 可生成一个具有相同色度但亮度恰好为基色一半的颜色： 
--base:  color(display-p3 0.7 0.5 0.1);
--dark:  color(from var(--base) xyz-d65 calc(x/2) calc(y/2) calc(z/2));

原色为 color(xyz-d65 0.281 0.253 0.044)， 因此相对颜色为 color(xyz-d65 0.14 0.126 0.022)。

5.2. 自定义色彩空间

CSS 允许通过引用色彩配置文件来指定颜色。 例如，这可以用于校准过的 CMYK 打印机、RGB 色彩空间，或任何已被表征的其他彩色或单色输出设备。

本例指定了四个已校准的颜色： 其中两个是自定义空间 （用于 SWOP 涂层 CMYK 印刷机， 以及用于广色域七色印刷机）， 另外两个是预定义空间 （ProPhoto RGB 和 display-p3 RGB 空间）。 在每种情况下，数值参数的范围都是 0.0 到 1.0 （而不是例如 0 到 255）。 
color: color(--swopc 0.0134 0.8078 0.7451 0.3019);
color: color(--indigo 0.0941 0.6274 0.3372 0.1647 0 0.0706 0.1216);
color: color(prophoto-rgb 0.9137 0.5882 0.4784);
color: color(display-p3 0.3804 0.9921 0.1412);

未使用预定义色彩空间的颜色（参见 CSS Color 4 § 10 预定义色彩空间） 可通过使用 <dashed-ident> 与众不同， 并且还需要在样式表的某处有一个匹配的 @color-profile at-rule， 以将名称与配置文件数据相关联。

Tests 
@color-profile --swopc {
  src: url('http://example.org/swop-coated.icc');}
@color-profile --indigo {
  src: url('http://example.org/indigo-seven.icc');}

5.3. 指定色彩配置文件：@color-profile at-rule

@color-profile 规则定义并命名一个 色彩配置文件， 该配置文件随后可以在 color() 函数中用于指定颜色。

其定义如下：

@color-profile = @color-profile [<dashed-ident> | device-cmyk] { <declaration-list> }
Tests

该 <dashed-ident> 提供了 色彩配置文件 的名称， 用于在 CSS 样式表中引用。 或者，关键字 device-cmyk 表示如果该色彩配置文件有效， 将用于解析以 device-cmyk 指定的颜色。

@color-profile 规则接受本规范中定义的描述符。

Name: src
For: @color-profile
Value: <url>
Initial: n/a

描述符 src 指定用于检索色彩配置文件信息的 URL。

如果定义了多个具有相同名称的 @color-profile 规则， 则按文档顺序最后出现的规则生效，之前的都会被忽略。

检索到的 ICC 配置文件在以下情况下被视为有效

如果该配置文件无效，则引用该配置文件的所有 CSS 颜色均为 无效颜色。

要 获取外部色彩配置文件，给定一个 @color-profile 规则 rule， 按照 获取样式资源 的流程使用 rule 的 URL， 并将 ruleOrDeclaration 设为 rule， destination 设为 "color-profile"， CORS 模式为 "cors"， 并按以下步骤处理响应（给定 response |/res|）或 null、失败或字节流 byteStream： 若 byteStream 为字节流， 则应用从 |byteStream 解析出的色彩配置文件。

Note: ICC 配置文件的互联网媒体类型（“MIME 类型”） 为 application/vnd.iccprofile。

Name: rendering-intent
For: @color-profile
Value: relative-colorimetric | absolute-colorimetric | perceptual | saturation
Initial: relative-colorimetric

色彩配置文件 包含“渲染意图（rendering intents）”， 它们定义了如何将其颜色映射（gamut-map）到比其定义的色域更小的色域。 通常一个配置文件只包含单个意图， 但当存在多个时， rendering-intent 描述符用于选择其中一个。

四种可能的渲染意图见 [ICC]：

relative-colorimetric
媒介相关的色度比对（media-relative colorimetric）要求在相对于各自媒体白点的情况下，将落入目标媒体色域内的源颜色保持不变。落在目标媒体色域外的源颜色会使用多种不同方法映射到色域边界上的颜色。

媒体相关的色度比对渲染意图通常与黑点补偿（black point compensation）一起使用，在该方法中源媒体的黑点也被映射到目标媒体的黑点。该方法必须将源白点映射到目标白点。如果正在使用黑点补偿，源黑点也必须映射到目标黑点。应使用适配算法来调整白点变化。应保留源与目标色域内颜色的相对关系。目标色域外颜色的相对关系可能会被改变。

absolute-colorimetric
ICC 绝对色度比对（ICC-absolute colorimetric）要求在相对于采用的白点（一个理想的反射漫散体）情况下，将落入目标媒体色域内的源颜色保持不变。落在目标媒体色域外的源颜色会使用多种不同方法映射到色域边界上的颜色。该方法对于色域内颜色能产生最精确的颜色匹配，但如果目标媒体白点低于源媒体白点，会导致高光裁剪（highlight clipping）。因此建议仅在需要精确颜色匹配且对高光裁剪不敏感的应用中使用。

在转换颜色时，该方法必须禁用白点匹配和黑点匹配。一般来说，除测试目的外不推荐使用此选项。

perceptual
当源与目标之间存在显著差异（例如屏幕显示的图像在反射印刷上再现）时，该方法通常是图像的首选。它采用源图像的颜色并使用专有方法为目标媒介重新优化外观。此重新优化可能会改变源和目标色域内的颜色，虽然感知变换应保持原始作品的基本艺术意图。它不会尝试修正源图像中的错误。

Note: 对于 v2 ICC 配置文件，没有指定的感知参考媒介，这会导致互操作性问题。使用 v2 ICC 配置文件时，除非已核查要使用的特定源和目标配置文件能产生期望的结果，否则使用带黑点补偿的媒体相关色度比对渲染意图可能比感知渲染意图更安全。

该方法应在映射到目标设备色域时保持像素之间的相对颜色值。为避免色相偏移和不连续并尽可能保留场景的整体外观，该方法可能会改变原本已在目标设备色域内的像素值。

saturation
该选项旨在保留原始的相对饱和度（色度），并保持纯色的纯度。然而，它像感知意图一样存在互操作性问题，并且因为使用 v4 配置文件的参考媒介方案无法解决纯色保持的问题，所以并不总能解决问题。除非已核查要使用的特定源和目标配置文件能产生期望结果，否则不建议使用此渲染意图。该选项应保留原始像素的相对饱和度（色度）值。超出色域的颜色应被转换为具有相同饱和度但刚好落入色域内的颜色。
Name: components
For: @color-profile
Value: <ident>#
Initial: n/a

色彩配置文件可以定义包含不同数量分量的色彩空间。 例如，青（Cyan）、品红（Magenta）、黄（Yellow）和黑（Black）（CMYK）的配置文件 有四个分量， 名为 c, m, y 和 k。 而一个四分量的加法屏幕配置文件 可能使用名为 r, g, y 和 b 的四个分量。

此描述符的值为用逗号分隔的 <ident> 代币列表。 每个 <ident> 指定一个分量的名称， 顺序即为该分量在色彩配置文件中被使用的顺序， 代币总数即定义了分量的数量。

该描述符声明有四个分量，名为 cyan、magenta、yellow 和 black： 
components: cyan, magenta, yellow, black
而下述描述符采用更简洁的命名： 
components: c,m,y,k
该描述符声明存在七个分量 名为 cyan、magenta、yellow、black、orange、green 和 violet： 
components: cyan, magenta, yellow, black, orange, green, violet

如果某个分量的名称与 ASCII 不区分大小写 的 none 匹配，则该描述符无效， 因为这将与用于表示缺失值的标记冲突。

如果为分量选择的名称与 CSS Values 4 § 10.7.1 Numeric Constants: e, pi 中定义的 CSS 数值常量冲突， 该分量仍然有效， 但在 calc() 中，该分量将被数值常量遮蔽， 可能导致意外结果。

该描述符不明智地将一个分量命名为 pi， 导致在相对颜色语法中出现意外结果。 
@color-profile --unwise {
  src: url(https://example.com/unwise);
  components: mi, pi, ni;
}
--base: color(--unwise 35% 20% 8%);
--accent: color(from var(--base) mi calc(pi * 2) calc(ni / 2));

在这里，--accent 的分量值为 35%、 3.14159265358979 * 2 = 6.28318530717959、 4%。

5.4. CSS 与印刷：使用校准的 CMYK 及其他印刷色彩空间

@color-profile at-rule 并不限于 RGB 色彩空间。 虽然屏幕通常直接以 RGB 显示颜色， 打印机常用 CMYK 表示颜色。

使用青、品红、黄和黑（CMYK）的校准四色印刷， 或使用额外油墨（如橙、绿、紫）的高保真广色域印刷（CMYKOGV）， 也可以在 CSS 中实现， 前提是你有一个与所使用的油墨、纸张、总墨量限制和设备相对应的 ICC 配置文件。

例如，使用基于 FOGRA39 表征数据的 ISO 12647-2:2004 / Amd 1:2007 的胶印 在 115gsm 涂层纸上 并设置总墨量限制为 300% 总覆盖率 [FOGRA39]。 
@color-profile --fogra39 {
  src: url('https://example.org/Coated_Fogra39L_VIGC_300.icc');
}
.header {
  background-color:   color(--fogra39 0% 70% 20% 0%);
  }

此处 color() 函数首先指明我们为配置文件指定的名称， 然后给出青、品红、黄和黑的百分比。

在此配置文件中，这解析为颜色 lab(63.673303% 51.576902 5.811058) 即 rgb(93.124, 44.098% 57.491%)。

因为给定 CMYK 组合的实际颜色是已知的， 可以制作打印输出的屏幕软打样（soft-proof）。

另外，依赖于已知颜色的过程（抗锯齿、合成、在渐变中使用颜色等） 可以正常进行。

A grid of colored squares. There are six columns, labelled A to F, and four rows, labelled 1 to 4.

A color checker, used for ensuring color fidelity in the print and photographic industries. Averaged measured Lab values are available for each patch. The rectangles show the Lab values, converted to sRGB. The circles, which are barely visible, show the Lab values, passed through a FOGRA51 [FOGRA51] ICC profile to convert them to CMYK. The CMYK values are then passed through the same ICC profile in reverse, to yield new Lab values. These are then converted to sRGB for display.

The one patch with a more visible circle (third row, first patch) is because the color is slightly outside the gamut of the FOGRA51 CMYK space used.

The table below shows, for each patch, the DeltaE 2000 between the original Lab and the Lab value after round-tripping through CMYK. A DeltaE 2000 of 1 or more is just visible.

A B C D E F
1 0.06 0.07 0.03 0.04 0.06 0.17
2 0.03 0.75 0.05 0.06 0.03 0.02
3 1.9 0.04 0.06 0.05 0.02 0.05
4 0.03 0.08 0.03 0.03 0.04 0.80
该示例使用基于 CGATS/SWOP TR005 2007 表征数据的 ISO 12647-2:2004 胶印， 在 grade 5 纸张上 总墨量限制为 300%， 并使用中等的灰分替换（GCR）。 
@color-profile --swop5c {
  src: url('https://example.org/SWOP2006_Coated5v2.icc');
}
.header {
  background-color:   color(--swop5c 0% 70% 20% 0%);
}

在该配置文件中，这一 CMYK 数值 （与前例相同的百分比） 解析为颜色 lab(64.965217% 52.119710 5.406966) 即 rgb(94.903% 45.248% 59.104%)。

可以指定后备颜色（fallback colors）， 例如通过媒体查询， 在已知指定的 CMYK 颜色超出 sRGB 色域时使用。

本示例使用先前相同的 FOGRA39 设置， 但指定了一个超出 sRGB 色域的鲜绿色。 然而该颜色在 display-p3 色域内。 因此在广色域屏幕和印刷中按原样显示， 在 sRGB 屏幕上使用较不强烈的后备颜色。 
@media (color-gamut: srgb) {
  .header {
    background-color:   rgb(8.154% 60.9704% 37.184%);
    }
}
@media print, (color-gamut: p3){
  .header {
    background-color:   color(--fogra39 90% 0% 90% 0%);
    }
}

该 CMYK 颜色对应于 lab(56.596645% -58.995875 28.072154) 或 lch(56.596645% 65.33421077211648 154.5533771086801)。 在 sRGB 中这将是 rgb(-60.568% 62.558% 32.390%)，如其较大的负红分量所示， 属于超出色域。

将色度降低到结果进入色域后得到 lch(56.596645% 51 154.5533771086801) 即 rgb(8.154% 60.9704% 37.184%)， 该颜色已被手动指定为后备颜色。

对于广色域屏幕，该颜色位于 display-p3 色域内 （它是 display-p3(0.1658 0.6147 0.3533)）。

颜色并不限于四种油墨（CMYK）。例如，可以使用广色域的七色油墨集合。

此示例使用 FOGRA55 测试数据集的 beta 版本 [FOGRA55] 用于 CMYKOGV 七色印刷。 四种油墨——黑、青、品红和黄——与 FOGRA51 集相同， 并产生相同的结果。 另外三种油墨为：

测量条件为 M1， 表示在考虑纸张中光学增白剂的情况下进行测量， 光谱仪没有 UV 截断滤镜。

@color-profile --fogra55beta {
  src: url('https://example.org/2020_13.003_FOGRA55beta_CL_Profile.icc');
}
.dark_skin {
  background-color: 
  color(--fogra55beta 0.183596 0.464444 0.461729 0.612490 0.156903 0.000000 0.000000);
}
.light_skin {
  background-color: 
  color(--fogra55beta 0.070804 0.334971 0.321802 0.215606 0.103107 0.000000 0.000000);
}
.blue_sky {
  background-color: 
  color(--fogra55beta 0.572088 0.229346 0.081708 0.282044 0.000000 0.000000 0.168260);
}
.foliage {
  background-color: 
  color(--fogra55beta 0.314566 0.145687 0.661941 0.582879 0.000000 0.234362 0.000000);
}
.blue_flower {
  background-color: 
  color(--fogra55beta 0.375515 0.259934 0.034849 0.107161 0.000000 0.000000 0.308200);
}
.bluish_green {
  background-color: 
  color(--fogra55beta 0.397575 0.010047 0.223682 0.031140 0.000000 0.317066 0.000000);
}

5.5. 将 CMYK 颜色转换为 Lab

从校准的 CMYK 色彩空间转换到 Lab 通常通过在 ICC 配置文件中查找对应的 Lab 值来完成。

5.6. 将 Lab 颜色转换为 CMYK

对于印刷， 需要将 Lab 颜色转换为打印机的色彩空间。

这通常通过在 ICC 配置文件中查找对应的 CMYK 值来完成。

6. 未校准 CMYK 颜色：device-cmyk() 函数

有时，当某台打印机未经过校准，但通过实验或印刷色卡已知特定墨水组合的输出效果时， 以设备相关的方式表达 CMYK 颜色会很有用。

注意： 因为实际输出颜色可能未知， CSS 处理器可能会尝试进行近似。 这种近似结果在视觉上可能与实际打印结果相差很大。

device-cmyk() 函数允许作者以如下方式指定颜色：

device-cmyk() = <legacy-device-cmyk-syntax> | <modern-device-cmyk-syntax>
<legacy-device-cmyk-syntax> = device-cmyk( <number>#{4} )
<modern-device-cmyk-syntax> = device-cmyk( <cmyk-component>{4} [ / [ <alpha-value> | none ] ]? )
<cmyk-component> = <number> | <percentage> | none

device-cmyk() 函数的参数依次指定青色、品红、黄色和黑色分量， 范围为 0 到 1 或在现代语法中为 0% 到 100%。两种用法等价，可线性互换。 小于 0 或 0%、大于 1 或 100% 的值不是无效的； 而是在计算值阶段被截断到 0/0% 或 1/100%。

在现代语法中，第五个参数指定颜色的 alpha 分量。 它的解释和 rgb() 函数的第四个参数一致。 如果省略，默认为 100%。

出于历史原因， device-cmyk() 也支持传统颜色语法。

一般来说，基于打印的应用确实会把所用颜色存储为 CMYK，并以这种形式发送至打印机。 但这种颜色没有色度解释，因此无法用于渐变、合成、混合等操作。

因此，设备 CMYK 颜色必须转换为等效颜色。 这不像从 HSL 或 HWB 到 RGB 的转换那样简单； 精确转换依赖于输出设备的具体特性。

  1. 如果用户、作者或用户代理样式表中有一个 @color-profile 对 device-cmyk 的定义， 且 src 描述符指定的资源可获取， 并且资源为有效的 CMYK ICC 配置文件， 且用户代理能够处理 ICC 配置文件， 则 device-cmyk() 函数的计算值 必须是该 CMYK 颜色的 Lab 值。
  2. 否则， device-cmyk() 函数的计算值 必须是该 CMYK 颜色按下述朴素转换算法转为的 sRGB 值。
例如，在没有 @color-profile 的情况下， 使用朴素转换时，下列颜色等价。 
color:  device-cmyk(0 81% 81% 30%);
color:  rgb(178 34 34);
color:  firebrick;
若已按示例样式表指定 @color-profile， 则使用色度转换时，下列颜色等价。 
color:  device-cmyk(0 81% 81% 30%);
color:  lab(45.060% 45.477 35.459)
color:  rgb(70.690% 26.851% 19.724%);

朴素转换本质上是近似的， 因为它不了解墨水的色度、网点增大、RGB 空间的色度等因素。

一组有颜色方格的网格。有六列，标记为 A 到 F，四行，标记为 1 到 4。

色卡（color checker），用于印刷和摄影行业以确保色彩保真。 每个色块均有平均测量得出的 Lab 值。 矩形显示这些 Lab 值转换为 sRGB 的结果。 圆圈则显示 Lab 值经过 ICC 配置文件转换为 CMYK 后， 再朴素地转换为 sRGB 的结果。

下表显示，每个色块在经过 CMYK 回转后的 Lab 与原始 Lab 之间的 DeltaE 2000。 DeltaE 2000 达 1 或更大时肉眼就可以分辨； 达 5 或更大时已经是另一种颜色了。

A B C D E F
1 11.33 9.36 5.66 7.52 12.39 21.58
2 6.40 8.79 11.77 17.16 11.91 3.97
3 12.1 17.00 3.38 1.94 18.08 14.97
4 1.89 6.56 7.85 8.76 9.82 10.29

6.1. 朴素地在未校准 CMYK 与基于 sRGB 的颜色间转换

要朴素地将 CMYK 转换为 RGBA：

要朴素地将 RGBA 转换为 CMYK：

7. 响应所用 color-scheme：light-dark() 函数

系统颜色能够根据当前的color-scheme（配色方案）值做出响应。 light-dark()函数同样让作者可以实现这一能力。

该函数有两种形式：一种接受一对颜色， 另一种接受一对图片。 尝试传入一张图片和一种颜色会导致解析时错误。

light-dark() = <light-dark-color> | <light-dark-image>
<light-dark-color> = light-dark(<color>, <color>)
<light-dark-image> = light-dark( [ <image> | none ] , [ <image> | none ] )

对于颜色形式，当所用配色方案为浅色或未知时， 此函数的结果为第一个颜色的计算值； 若所用配色方案为深色，则为第二个颜色的计算值。

对于图片形式，该函数在所用配色方案为浅色或未知时，返回第一张图片； 若所用配色方案为深色，则返回第二张图片。 none 关键字会生成一张完全透明、没有自然尺寸的图片。

它等价于单一渐变终止色为transparent的线性渐变：

linear-gradient(transparent)
例如，若要让链接在浅色/深色模式下均保持良好对比度，可这样写： 
  a:link {
      color: light-dark(blue, #81D9FE);
      background-color: light-dark(white, black);
}

传统的蓝色链接文本 在白色背景下清晰可读 （WCAG 对比度 8.59:1，AAA 通过）， 但在黑色背景上不可读 （WCAG 对比度 2.44:1，AA 不通过）。 因此，深色模式下使用更亮的蓝色#81D9FE（ WCAG 对比度 13.28:1，AAA 通过）。

可读链接文本

不可读链接文本

可读链接文本

例如，给浅色/深色模式分别提供清晰可见的列表项目符号： 
ul.fancy {
    list-style-image: light-dark(
    url("icons/deep-maroon-ball.png"),
    url("icons/pale-yellow-star.png")
  );
}
例如，浅色模式下用一张光栅图片，深色模式下则用一张全透明图片。 
background-image: light-dark(url(my-light-image.png), none);
测试

8. 动态指定具有足够对比度的文本色：contrast-color() 函数

在动态创建颜色时，往往难以指定一个与之作为背景色时有足够对比度的文本色。 contrast-color() 函数可用作文本色，自动为指定背景色提供有保证色彩对比度的颜色。

注意： 可读性是一个复杂的话题，充足的色彩对比度只是其中一环。 一对有足够对比度的色并不保证文本容易辨认，还取决于字体、字号、周围颜色等诸多因素。

contrast-color() = contrast-color( <color> )

contrast-color() 会针对输入作为纯色背景时选出对文本最大色差的 白色 或 黑色。 若 白色 与 黑色产生相同的对比，则解析为 白色。

判断输出亮色还是暗色所用的具体色差算法在本级 UA 自行定义。

注意： 本规范的后续版本预计会引入 对比算法、用例以及返回颜色的更多控制。

建议用户代理不要仅用 WCAG 2.1 1.4.3 最低对比度算法决定亮色/暗色， 因为它存在若干已知问题。 但本函数返回的颜色仍应满足 WCAG 2.1 1.4.3 最低对比度 对于 AA 大号文本的要求，因为许多作者需要符合法律要求。

测试

9. 颜色插值

9.1. 插值色彩空间

<color-interpolation-method> ，如 CSS Color 4 § 12.1 插值色彩空间 中所定义，现扩展以允许使用 自定义色彩空间： 

<color-space> = <rectangular-color-space> | <polar-color-space> | <custom-color-space>
<rectangular-color-space> = srgb | srgb-linear | display-p3 | display-p3-linear | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | <xyz-space>
<polar-color-space> = hsl | hwb | lch | oklch
<custom-color-space> = <dashed-ident>
<hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue
<color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

<dashed-ident> 必须已经在合法 @color-profile 规则中声明， 否则 <color-interpolation-method> 无效。

10. 解析<color>值

10.1. 解析color-mix()值

如果所有<color>参数都解析为其各自色彩空间中的相应颜色， 那么计算值就是在指定混合色彩空间中混合出来的颜色， 并按照CSS Color 4 §  14. Resolving <color> Values 进行解析。 否则（如果函数内使用了currentColor）， 计算值则为color-mix()函数， 并且每个<color>参数都按照 CSS Color 4 §  14. Resolving <color> Values 进行解析， 以此传递继承到子元素。

Tests

10.2. 解析相对色彩语法值

如果所有<color>参数都解析为其各自色彩空间中的相应颜色， 则计算值为绝对<color>值， 在指定的RCS色彩空间中， 并按照CSS Color 4 §  14. Resolving <color> Values 进行解析。

Tests

否则（如果函数中使用了currentColor）， 计算值为相对色彩语法函数， 其中起始<color>参数按 CSS Color 4 §  14. Resolving <color> Values 进行解析， 以此传递继承到子元素。

Tests

10.3. 解析device-cmyk值

计算值与使用值 为指定的设备CMYK颜色， （各分量为<number>，而非 <percentage>） 并与指定的alpha分量配对 （作为<number>，不是<percentage>， 未指定时默认为不透明）。

实际值可能因操作而变化， 如果渲染至支持CMYK的设备， 可被渲染为CMYK颜色； 若与非CMYK颜色混合 或渲染到非CMYK设备， 必须按照§ 6 非校准CMYK颜色：device-cmyk()函数的规范进行转换。

例如， 
 device-cmyk(0% 70% 20% 0%)

对应的指定值与实际值为

 device-cmyk(0 0.7 0.2 0)

并且如果实现支持ICC配置文件 且系统已安装合适的配置文件， 则使用值为

 lab(63.673% 51.577 5.811)

注：与所有颜色一样，使用值无法在脚本中获取。

11. 序列化

本节扩展了CSS Color 4 §  15. Serializing <color> Values 以增加对 color-mix()、 device-cmyk()， 以及 相对色彩函数的结果的序列化支持。

本节中，规范使用的字符串和对应字符如下：

String Character
" " U+0020 空格
"," U+002C 逗号
"-" U+002D 连字符/减号
"." U+002E 句点
"/" U+002F 斜杠

字符串“.”应作为小数分隔符使用， 不论本地化设置， 且不应有千位分隔符。

与以往一样， 如果结果的alpha值恰好为1， 则在序列化时省略； 默认为1（完全不透明）。

11.1. color-mix()的序列化

color-mix() 函数声明值的序列化为字符串 "color-mix("， 后接如下内容，除非<color-space> 是 oklab （无论是显式指定还是默认）： 添加字符串 "in "， 然后是全小写的 <color-space>， 如果指定了 <hue-interpolation-method> 且不是 shorter hue， 则添加 " " 和小写的 <hue-interpolation-method>， 再加上 ", "， 然后依次序列化每个颜色参数（见下文），参数之间用 ", " 分隔， 最后加上 ")"。

每个颜色参数的序列化为 已序列化的 <color>， 如果该参数需要序列化百分比（见下文）， 则后面加 " " 和序列化的百分比。

每个颜色参数都是单独序列化的； 特别地， 相同颜色不会合并为同一个参数。

关于 color-mix() 函数声明值的 百分比序列化规则如下。 设 N 为颜色参数数量。

对于每个参数， 其 有效百分比 的定义如下：

如果所有 有效百分比 都已知且都等于 100% / N， 则所有参数都不序列化百分比。 否则，每个参数的百分比序列化如下：

注意： calc() 的值视为未知， 因此永远不会等于 100% / N， 并会阻止计算省略的 <percentage>。

例如，下列声明值的序列化结果为 
color-mix(in oklab, teal, peru 40%)
是字符串 "color-mix(teal 60%, peru 40%)"： 因为色彩空间为默认值（oklab）而被省略， 且所有百分比都被序列化 因为它们并非都等于 100%/2 = 50%。

下列声明值的序列化结果为

color-mix(in oklab, teal 50%, peru 50%)
是字符串 "color-mix(teal, peru)"： 两个百分比都等于 100%/2 = 50%，因此都被省略。

下列声明值的序列化结果为

color-mix(in oklab, teal 70%, peru 70%)
是字符串 "color-mix(teal 70%, peru 70%)"： 因为指定的百分比是 70%，而不是 50%， 所以不能省略， 即便计算时会归一化到各 50%。

下列声明值的序列化结果为

color-mix(in oklch longer hue, red, green, blue)
是字符串 "color-mix(in oklch longer hue, red, green, blue)"： 因为色彩空间（oklch） 不是默认值， 色相插值方法（longer）也不是默认值（shorter）， 且所有百分比都等于 100%/3，所以全部省略。

下列声明值的序列化结果为

color-mix(red 50%, green, blue)
是字符串 "color-mix(red 50%, green 25%, blue 25%)"： 百分比并不都等于 100%/3， 所以都要序列化， 省略的参数由 (100% − 50%) / 2 = 25% 补足。

color-mix() 函数结果的序列化 取决于混合中是否使用了关键词 currentColor。 如果用到了，序列化结果与声明值一致。 这样子元素的 color 属性不同值时可以得到正确的混合效果。 否则， 序列化结果为 <color>， 见 CSS Color 4 § 15. Serializing <color> Values。 具体使用的格式 由 "in" 指定的色彩空间决定：

混合色彩空间 格式
srgb color(srgb r g b)
srgb-linear color(srgb-linear r g b)
display-p3 color(display-p3 r g b)
a98-rgb color(a98-rgb r g b)
prophoto-rgb color(prophoto-rgb r g b)
rec2020 color(rec2020 r g b)
hsl color(srgb r g b)
hwb color(srgb r g b)
xyz-d65 color(xyz-d65 x y z)
xyz-d50 color(xyz-d50 x y z)
xyz color(xyz-d65 x y z) ¹
lab lab(l a b)
lch lch(l c h)
oklab oklab(l a b)
oklch oklch(l c h)
¹
因为 xyz 只是 xyz-d65 的别名
Tests

用于round-trip的最小精度同 CSS Color 4 §  15. Serializing <color> Values规定一致。

此颜色混合的结果 
color-mix(in lch, peru 40%, palegoldenrod)
序列化为字符串 "lch(79.7256 40.448 84.771)"， 而 
color-mix(in srgb, peru 40%, palegoldenrod)
的结果序列化为字符串 "color(srgb 0.8816 0.7545 0.4988)"。

11.2. 原始颜色的序列化

当颜色作为原始颜色， 用于另一个颜色函数的声明值组件中时， 该声明值的序列化方式为：

  1. 对于rgb()、rgba()、hsl()、hsla()

注：无论使用现代还是旧语法，序列化格式一致。

  1. 对于hwb()、lab()、lch()、oklab()、oklch()

  1. 对于color()

11.3. 相对色彩函数的序列化

相对颜色声明值的序列化为：

  1. 对于rgb()、rgba()、hsl()、hsla()

  1. 对于hwb()、lab()、lch()、oklab()、oklch()

  1. 对于color()

例如，以下声明值的序列化为 
OkLcH(from peru  l    c  h)

为字符串"oklch(from peru l c h)"

例如，以下声明值的序列化为 
rgb(from red calc(r / 2) g calc(30%));

是字符串"rgb(from red calc(0.5 * r) g calc(30%))"， 对应计算值的序列化为 "color(srgb 0.5 0 0.3)"。

例如，以下声明值的序列化为 
hsl(from hsl(none 10% 50%) h s l);

为字符串"hsl(from hsl(none 10% 50%) h s l)"， 对应计算值的序列化为 "color(srgb 0.55 0.45 0.45)"。

例如，以下声明值的序列化为 
hsl(from hsl(127.9 302% 25.33%) h s l);

为字符串"hsl(from hsl(127.9 302% 25.33%) h s l)"， 计算值为 "color(srgb -0.511666 1.018266 -0.310225)"。

假设如下HTML（注意该元素设置了color属性）： 
<div id="example" 
  style="background-color: rgb(from currentcolor r g calc(b / 2)); 
  color: blue;">
</div>

background-color声明值的序列化 为字符串"rgb(from currentcolor r g calc(b / 2))" 对应计算值为 "color(srgb 0 0 0.5)"

相对色彩函数结果的序列化 取决于currentColor是否为原始颜色。 是则结果按声明值序列化， 可确保子元素color属性不同值时仍然正确。 否则为解析值， 即<color>， 见CSS Color 4 §  15. Serializing <color> Values。

实际使用的序列化格式 取决于相对色彩的色彩空间：

混合色彩空间 形式
srgb color(srgb r g b)
srgb-linear color(srgb-linear r g b)
display-p3 color(display-p3 r g b)
a98-rgb color(a98-rgb r g b)
prophoto-rgb color(prophoto-rgb r g b)
rec2020 color(rec2020 r g b)
hsl color(srgb r g b)
hwb color(srgb r g b)
xyz-d65 color(xyz-d65 x y z)
xyz-d50 color(xyz-d50 x y z)
xyz color(xyz-d65 x y z)
lab lab(l a b)
lch lch(l c h)
oklab oklab(l a b)
oklch oklch(l c h)
Tests

最小round-trip精度 与CSS Color 4 § 15.5 Serializing values of the color() function 规定一致。

序列化 
lch(from peru calc(l * 0.8) calc(c * 0.7) calc(h + 180))
的结果是字符串 "lch(49.80224 37.80819 243.6803)"

11.4. 自定义色彩空间的序列化

color()各分量值保留的精度， 也就是序列化值中有效数字的位数， 本规范并未规定， 但对CMYK色彩空间，需至少保证8bit精度可round-trip； 通常应保证至少两位小数， 除非末尾的零被省略。

该颜色的序列化值为

@color-profile --swop5c {
    src: url('https://example.org/SWOP2006_Coated5v2.icc');
    }
    .header {
    background-color:    color(--swop5c  0% 70.0% 20.00% .0%);
    }

为字符串"color(--swop5c 0 0.7 0.2 0)"

11.5. device-cmyk值的序列化

device-cmyk()值的序列化结果 基于计算值， 使用device-cmyk()格式函数名为小写字母。

分量值以十进制序列化， 类型为<number>。 组件值之间用单个ASCII空格" "分隔。

任何分量值中末尾的零必须省略； 如果小数部分全为零， 小数点也要省略。

该颜色的序列化值为

  device-cmyk(0 81% 81% 30%)

为字符串"device-cmyk(0 0.81 0.81 0.3)"

device-cmyk()各分量值的精度， 也就是序列化有效数字的多少， 本规范未规定， 但必须满足8bit精度的round-trip； 通常应有至少两位小数， 除非末尾零被省略。 数值必须向上舍入，不可截断。

alpha值为1时不单独序列化。 非1的alpha值必须明确序列化， 且字符串" / " （ASCII空格+斜杠+空格） 用于分隔黑色("k")分量和alpha值。

12. API 接口

12.1. CSSColorProfileRule 接口

CSSColorProfileRule 接口表示一个 @color-profile 规则。

[Exposed=Window]
interface CSSColorProfileRule : CSSRule {
  readonly attribute CSSOMString name ;
  readonly attribute CSSOMString src ;
  readonly attribute CSSOMString renderingIntent ;
  readonly attribute CSSOMString components ;
};
name， 类型为 CSSOMString，只读
获取 name 属性时，必须返回 一个 CSSOMString 对象， 其内容为相关规则下色彩 配置文件定义的 name 的 序列化结果。
src， 类型为 CSSOMString，只读
renderingIntent， 类型为 CSSOMString，只读
components， 类型为 CSSOMString，只读
获取其他属性时， 必须返回一个 CSSOMString 对象， 其内容为相关规则下定义的对应描述符的序列化结果。 如果相关规则未指定该描述符， 属性必须返回空字符串。

13. 默认样式规则

以下样式表仅供参考，不具规范性。本样式表可被实现用作其 对 HTML 家族文档的默认样式部分。

/* traditional desktop user agent colors for hyperlinks */
:link { color: LinkText; }
:visited { color: VisitedText; }
:active { color: ActiveText; }

/* a reasonable, conservative default for device-cmyk */
@color-profile device-cmyk {
  src: url('https://drafts.csswg.org/css-color-4/ICCprofiles/Coated_Fogra39L_VIGC_300.icc');
}

14. 颜色转换示例代码

本节不具规范性。

device-cmyk 的朴素转换非常简单：

function naive(cmyk) {
  // naively convert an array of CMYK values
  // to sRGB
  let [cyan, magenta, yellow, black] = cmyk;
    let red = 1 - Math.min(1, cyan * (1 - black) + black);
    let green = 1 - Math.min(1, magenta * (1 - black) + black);
    let blue = 1 - Math.min(1, yellow * (1 - black) + black);
    return [red, green, blue];
}

15. 安全性注意事项

本规范为 CSS 新增了 ICC 配置文件的按需下载。 这些文件不包含可执行代码， 因此不会带来额外的安全风险。

16. 隐私注意事项

目前尚未有该规范的新隐私注意事项报告。

17. 无障碍性注意事项

本规范提供了一种保证文本和用户自定义颜色的背景（包括动态颜色） 具有足够对比度的方法。

18. 变更记录

18.1. 自2026年1月13日工作草案起

18.2. 自2025年3月18日工作草案起

18.3. 自2024年2月29日工作草案起

18.4. 自2022年6月28日工作草案起

18.5. 自2022年4月28日工作草案起

18.6. 自2021年12月15日工作草案起

18.7. 自2021年6月1日工作草案起

18.8. 自2020年6月10日FPWD起

18.9. 与 CSS Color 4 的变更

与 CSS Color 4 最大的不同是， CSS 颜色不再局限于 预定义的 RGB 空间（如 sRGB 或 display-p3）。

为支持这点，增加了众多新特性：

  1. color() 函数由 @color-profile at-rule 扩展，用于有色彩描述文件的设备相关颜色， 支持校准 CMYK。
  2. device-cmyk() 函数，用于在输出设备专用的 CMYK 色彩空间中指定未校准色。

此外新的 color-mix() 函数允许在指定色彩空间中混合两个颜色，产生新颜色。

一致性

文档惯例

一致性要求通过描述性断言与 RFC 2119 术语组合进行表达。规范性部分中的关键词 “MUST”（必须）、“MUST NOT”（不得）、“REQUIRED”（要求）、“SHALL”（应当）、“SHALL NOT”（不得）、“SHOULD”（建议）、“SHOULD NOT”（不建议）、“RECOMMENDED”（推荐）、“MAY”（可以）、“OPTIONAL”（可选），其解释方式如 RFC 2119 所述。 但为便于阅读，本规范未将这些单词全部大写。

除明确标记为非规范性内容、示例和注释的部分外，本文规范所有文本均为规范性内容。[RFC2119]

本规范中的示例以“例如”开头，或通过 class="example" 从规范性文本中区分，如下所示：

这是一个说明性示例。

说明性注释以“注意”开头，使用 class="note" 区分于规范性文本，如下所示：

注意，这是说明性注释。

提示是规范性片段，会作特殊提示，使用 <strong class="advisement"> 区分，如下所示： UA 必须提供可访问性替代方案。

测试

与本规范内容有关的测试可记录在类似本例的 “Tests” 块中。 此类块均为非规范性内容。

一致性类别

本规范定义了一致性的三类对象：

样式表
CSS 样式表。
渲染器
解释样式表语义并渲染相关文档的 UA。
编辑工具
编写样式表的 UA。

若样式表中所有采用本模块定义的语法的语句均符合泛 CSS 语法与本模块每项特性文法，则其符合本规范。

渲染器除了须按相关规范解释样式表外，还必须能正确解析并渲染本规范全部特性，方为符合本规范。不过，因设备能力限制导致 UA 未能正确渲染文档，不构成不符合规范。（例如，UA 并不要求在黑白显示器上渲染彩色。）

编辑工具，若其编写的样式表在语法上符合泛 CSS 语法和本模块每项特性文法，且满足本模块所述样式表的所有其它一致性要求，则视为符合本规范。

部分实现

为便于开发者利用前向兼容解析规则指定后备值，CSS 渲染器必须把所有不支持的 at-rule、属性、属性值、关键字和其它语法结构视为无效（并按需忽略）。尤其是，UA 不得在同一个多值属性声明中，有选择地忽略不支持的值而保留支持的部分：如果有任何值被视为无效（即所有不支持的值），CSS 要求整个声明被忽略。

不稳定与专有功能的实现

为避免与将来稳定的 CSS 特性冲突，CSSWG 建议遵循最佳实践实现 不稳定的特性与 CSS 专有扩展。

非实验实现

一旦规范进入候选推荐（CR）阶段，就可以出现非实验性实现，实现者应发布未加前缀且能证明符合规范的 CR 级特性的实现。

为了建立并保证各实现间 CSS 的互操作性，CSS 工作组要求非实验性 CSS 渲染器在发布任意无前缀实现前，向 W3C 提交实现报告（如有必要，还应交实现报告用到的测试用例）。提交 W3C 的测试用例可由 CSS 工作组审查和修正。

有关提交测试用例及实现报告的进一步信息可在 CSS 工作组网站 https://www.w3.org/Style/CSS/Test/ 查询。如有疑问请发邮件至 public-css-testsuite@w3.org 邮箱。

索引

本文规范定义的术语

引用规范定义的术语

参考文献

规范性引用

[CSS-CASCADE-5]
Elika Etemad；Miriam Suzanne；Tab Atkins Jr.。CSS 层叠与继承 5 级。2022年1月13日。CR。URL: https://www.w3.org/TR/css-cascade-5/
[CSS-COLOR-4]
Tab Atkins Jr.；Chris Lilley；Lea Verou。CSS 颜色模块 4 级。2026年3月31日。CRD。URL: https://www.w3.org/TR/css-color-4/
[CSS-COLOR-ADJUST-1]
Elika Etemad 等。CSS 颜色调整模块 1 级。2025年12月16日。CR。URL: https://www.w3.org/TR/css-color-adjust-1/
[CSS-IMAGES-3]
Tab Atkins Jr.；Elika Etemad；Lea Verou。CSS 图片模块 3 级。2023年12月18日。CRD。URL: https://www.w3.org/TR/css-images-3/
[CSS-SYNTAX-3]
Tab Atkins Jr.；Simon Sapin。CSS 语法模块 3 级。2021年12月24日。CRD。URL: https://www.w3.org/TR/css-syntax-3/
[CSS-VALUES-4]
Tab Atkins Jr.；Elika Etemad。CSS值与单位模块 4 级。2024年3月12日。WD。URL: https://www.w3.org/TR/css-values-4/
[CSS-VALUES-5]
Tab Atkins Jr.；Elika Etemad；Miriam Suzanne。CSS值与单位模块 5 级。2024年11月11日。WD。URL: https://www.w3.org/TR/css-values-5/
[CSSOM-1]
Daniel Glazman；Emilio Cobos Álvarez。CSS对象模型（CSSOM）。2021年8月26日。WD。URL: https://www.w3.org/TR/cssom-1/
[FETCH]
Anne van Kesteren。Fetch 标准。现行标准。URL: https://fetch.spec.whatwg.org/
[ICC]
ICC.1:2022（配置文件版本 4.4.0.0）。2022年5月。URL: http://www.color.org/specification/ICC.1-2022-05.pdf
[INFRA]
Anne van Kesteren；Domenic Denicola。Infra 标准。现行标准。URL: https://infra.spec.whatwg.org/
[RFC2119]
S. Bradner。用于 RFC 中指示需求级别的关键词。1997年3月。最佳当前实践。URL: https://datatracker.ietf.org/doc/html/rfc2119
[WEBIDL]
Edgar Chen；Timothy Gu。Web IDL 标准。现行标准。URL: https://webidl.spec.whatwg.org/

说明性引用

[FOGRA39]
ISO 12647-2:2004 / Amd 1, 按照 ISO 12647-2 的胶印商业和专色印刷，纸张类型 1 或 2（光面或亚光铜版，115g/m²），线数 60/cm. 2006 年. URL: https://www.color.org/chardata/FOGRA39.xalter
[FOGRA51]
ISO 12647-2:2013，半色调分色、打样与正式印刷生产过程控制第二部分：胶印，纸张PS 1，高级铜版，115g/m²，中等底材荧光. 2015 年. URL: https://registry.color.org/cmyk-registry/fogra51
[FOGRA55]
基于 CMYKOGV 的色域交换空间. 2021 年. URL: https://fogra.org/en/research/prepress-technology/multiprimary-printing-13003

属性索引

无属性定义。

@color-profile 描述符

名称 值 初始值
components <ident># n/a
rendering-intent relative-colorimetric | absolute-colorimetric | perceptual | saturation relative-colorimetric
src <url> n/a

IDL 索引

[Exposed=Window]
interface CSSColorProfileRule : CSSRule {
  readonly attribute CSSOMString name ;
  readonly attribute CSSOMString src ;
  readonly attribute CSSOMString renderingIntent ;
  readonly attribute CSSOMString components ;
};