Copyright © 2025 the Contributors to the Design Tokens Resolver Module 2025.10 Specification, published by the Design Tokens Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available.
本文档描述了设计令牌颜色值和不透明度的技术规范。
本规范由 Design Tokens 社区组发布。它不是 W3C 标准，也没有列入 W3C 标准进程。 请注意，根据 W3C 社区最终规范协议 (FSA) ，还适用其他条件。 了解更多关于 W3C 社区及业务组的信息。
本节描述了本文件在发布时的状态。其他文档可能会取代本文件。W3C 社区组报告的当前列表及本报告的最新修订版可在 W3C 社区组报告索引页面找到： https://www.w3.org/community/reports/
本文档由 DTCG 以 候选推荐（Candidate Recommendation） 的形式发布，符合 W3C 流程中定义的标准。对本草案的贡献受 社区贡献者许可协议（CLA）的约束，具体要求见 W3C 社区组流程。
虽然这不是 W3C 推荐标准，但该分类旨在明确：经过充分的共识建设后，本规范面向实现使用。
本规范被视为稳定。后续更新将通过更新的规范发布。
关于本规范的讨论建议优先使用 GitHub Issues。
本规范中标记为非规范性的部分，以及所有编写指南、图示、示例和注释，均为非规范性内容。除此以外的所有内容均为规范性内容。
本文档中的关键词 MAY、MUST 和 MUST NOT 的解释方式与 BCP 14 [RFC2119] [RFC8174] 一致，并且仅当这些词以全大写形式，如此处所示，出现时才应用上述解释方式。
颜色令牌可用于表示不同色彩空间下的颜色。在令牌中表示的颜色可以通过转换工具被转换为其它色彩空间。
一般来说，本模块参考了CSS Color Module Level 4中关于概念和术语的定义。CSS Color Module Level 4 是 W3C 工作草案，尚未最终定稿，内容可能会变更，也可能不是所有浏览器或平台都支持。
本节概述了规范中所用术语，并说明其与颜色科学和色度学的关系。
色彩空间
色彩空间是一套对颜色进行特定组织的体系，有助于在物理或数字环境中实现颜色的再现。它定义了可以表示和操作的颜色范围。
颜色模型
颜色模型是在特定色彩空间内对颜色的数学表达。它定义了如何以数值方式（通常为分量）来表示颜色。
色域
色域表示在某一特定色彩空间中能够表示的所有颜色的完整范围。它界定了该空间可实现的色彩再现极限。
分量
分量指在特定色彩空间中定义颜色的单一数值。例如，在 RGB 色彩空间中，分量为红、绿、蓝。
色相
色相是指颜色的属性，使其能被归类为红色、绿色、蓝色等。在许多色彩空间中，色相以色轮上的角度表示。不同色彩空间可能会将颜色定位在色轮的不同位置。
饱和度
饱和度是指颜色相对于自身亮度的鲜艳程度。它描述了颜色中灰色的多少。完全饱和的颜色无灰色，去饱和的颜色则更多偏向灰色。饱和度与色度及明度密切相关，尤其是在 HSL 或 HSV 等模型中。颜色可以高度饱和，但根据其明度，视觉上也可能很亮或很暗。
明度
明度是颜色的感知亮度，描述了颜色看起来有多亮或多暗。
色度
色度指的是颜色相对于同样受光照明的白色的鲜艳程度。它衡量了颜色的纯度或强度。在 CIE LCH 颜色模型（明度、色度、色相）中，色度与明度无关，用以描述颜色在色轴方向上离中性灰的距离。
Alpha
Alpha 是表示颜色透明度的一个分量。它定义了颜色的不透明或透明程度，最小值（通常为 0）表示完全透明，最大值（通常为 1）表示完全不透明。
表示一种颜色。
对于颜色令牌，$type 属性 MUST 必须设置为字符串 color。
接着可以使用 $value 属性来指定颜色的详细信息，$value 对象包含以下属性：
colorSpace（必填）：一个字符串，用于指定色彩空间或颜色模型。关于支持的色彩空间，请参见下方的支持的色彩空间章节。components（必填）：一个数组，表示颜色的分量。分量的数量取决于色彩空间。数组的每个元素 MUST 必须是：alpha（可选）：一个数字，表示该颜色的 alpha（透明度）值。该值介于
0 与 1 之间，其中 0 为完全透明，1 为完全不透明。若省略，则该颜色的 alpha 值
MUST 必须视为 1（完全不透明）。
hex（可选）：一个字符串，表示颜色的回退值。回退颜色 MUST 必须使用6 位 CSS 十六进制颜色表示法，以避免与提供的 alpha
值产生冲突。在某些色彩空间中指定颜色时，数值 0 可能存在歧义。例如，在 HSL 色彩空间中，色相为 0 的颜色是红色；尽管单个颜色如
hsl(0, 0, 50) 并不会呈现为红色，但在与其他颜色进行插值时，它可能被视为完全去饱和的红色。因此，在某些色彩空间中，使用
0 并不足以表示某一分量没有取值。
CSS Color
Module Level 4 引入了 none 关键字，用于表示某个分量缺失或不适用。例如，在 HSL
色彩空间中，none
可用于表示该颜色没有角度值；其色相值为 none 的颜色 MAY 可能与色相角度为
0 的颜色呈现不同效果，或在插值时产生不同结果。
none 关键字 MAY 可以在 components
数组中使用，以表示某个分量不适用或未指定。
与下例（将色相指定为 0）进行对比：
虽然两个示例都会呈现为白色，但第一个示例更明确地表明色相不适用。这在颜色插值或颜色混合时很重要，使用分量为 0 或
none 的颜色可能会得到不同结果。
以下值可用于 colorSpace 属性。components 数组会随色彩空间而变化。
| 色彩空间 | 键 | 取值 | |
|---|---|---|---|
| sRGB | "srgb" |
Red | [0 - 1] |
| Green | [0 - 1] | ||
| Blue | [0 - 1] | ||
| sRGB 线性 | "srgb-linear" |
Red | [0 - 1] |
| Green | [0 - 1] | ||
| Blue | [0 - 1] | ||
| HSL | "hsl" |
Hue | [0 - 360) |
| Saturation | [0 - 100] | ||
| Lightness | [0 - 100] | ||
| HWB | "hwb" |
Hue | [0 - 360) |
| Whiteness | [0 - 100] | ||
| Blackness | [0 - 100] | ||
| CIELAB | "lab" |
Lightness | [0 - 100] |
| A | [-Infinity - Infinity]* | ||
| B | [-Infinity - Infinity]* | ||
| LCH | "lch" |
Lightness | [0 - 100] |
| Chroma | [0 - Infinity]** | ||
| Hue | [0 - 360) | ||
| OKLAB | "oklab" |
Lightness | [0 - 1] |
| A | [-Infinity - Infinity]† | ||
| B | [-Infinity - Infinity]† | ||
| OKLCH | "oklch" |
Lightness | [0 - 1] |
| Chroma | [0 - Infinity]‡ | ||
| Hue | [0 - 360) | ||
| Display P3 | "display-p3" |
Red | [0 - 1] |
| Green | [0 - 1] | ||
| Blue | [0 - 1] | ||
| A98 RGB | "a98-rgb" |
Red | [0 - 1] |
| Green | [0 - 1] | ||
| Blue | [0 - 1] | ||
| ProPhoto RGB | "prophoto-rgb" |
Red | [0 - 1] |
| Green | [0 - 1] | ||
| Blue | [0 - 1] | ||
| Rec 2020 | "rec2020" |
Red | [0 - 1] |
| Green | [0 - 1] | ||
| Blue | [0 - 1] | ||
| XYZ-D65 | "xyz-d65" |
X | [0 - 1] |
| Y | [0 - 1] | ||
| Z | [0 - 1] | ||
| XYZ-D50 | "xyz-d50" |
X | [0 - 1] |
| Y | [0 - 1] | ||
| Z | [0 - 1] | ||
在 CSS Color Module 4 之前，sRGB 是所有 CSS 颜色的标准色彩空间。它是 web 上使用最广泛的色彩空间，也是大多数设计工具的默认色彩空间。
[Red, Green, Blue]
0 与 1 之间的数字，表示颜色的红色分量。0 与 1 之间的数字，表示颜色的绿色分量。0 与 1 之间的数字，表示颜色的蓝色分量。关于 sRGB 色彩空间的更多信息，参见多媒体系统与设备——颜色测量与管理——第 2-1 部分：颜色管理——默认 RGB 色彩空间——sRGB。
sRGB 线性是 sRGB 的线性化版本。一些设计工具使用它来表示线性色彩空间中的颜色。
[Red, Green, Blue]
0 与 1 之间的数字，表示颜色的红色分量。0 与 1 之间的数字，表示颜色的绿色分量。0 与 1 之间的数字，表示颜色的蓝色分量。关于 sRGB 线性色彩空间的更多信息，参见多媒体系统与设备——颜色测量与管理——第 2-1 部分：颜色管理——默认 RGB 色彩空间——sRGB。
HSL 是一种颜色模型，它是 sRGB 的极坐标变换，最早在 CSS Color Level 3 中得到支持。
[Hue, Saturation, Lightness]
0 到（不包含）360 的数字，表示颜色在色轮上的色相角度。0 与 100 之间的数字，表示颜色饱和度的百分比。0 与 100 之间的数字，表示明度的百分比。关于 HSL 色彩空间的更多信息，参见HSL: light vs saturation。
另一种颜色模型，也是 sRGB 的极坐标变换。
[Hue, Whiteness, Blackness]
0 到（不包含）360 的数字，表示颜色在色轮上的角度。0 与 100 之间的数字，表示颜色中的白色百分比。0 与 100 之间的数字，表示颜色中的黑色百分比。关于 HWB 色彩空间的更多信息，参见HWB — A More Intuitive Hue-Based Color Model。
CIELAB 是一种旨在感知上均匀的色彩空间。
[L, A, B]
0 与 100 之间的数字，表示颜色的明度百分比。A 和 B 理论上不受限，但实际不超过 -160 到 160。
关于 CIELAB 色彩空间的更多信息，参见ISO/CIE 11664-4:2019(E): Colorimetry — 第 4 部分：CIE 1976 L*a*b* 颜色空间。
LCH 是 CIELAB 的柱坐标表示。
[L, C, Hue]
0 与 100 之间的数字，表示颜色的明度百分比。0 到（不包含）360 的数字，表示颜色在色轮上的角度。C 的最小值为 0，表示中性颜色（灰色），其最大值理论上不受限，但实际不超过 230。
关于 LCH 色彩空间的更多信息，参见CSS Color Module Level 4 中的 CIELAB 与 LCH 章节。
OKLAB 是一种感知上均匀的色彩空间，设计上比 CIELAB 更准确。
[L, A, B]
0 与 1 之间的数字，表示颜色的明度。与 CIELAB 类似，A 和 B 理论上不受限，但实际不超过 -0.5 到 0.5。
关于 OKLAB 色彩空间的更多信息，参见OKLAB: A Perceptually Uniform Color Space。
OKLCH 是 OKLAB 的柱坐标颜色模型。
[L, Chroma, Hue]
0 与 1 之间的数字，表示颜色的明度。0 到（不包含）360 的数字，表示颜色在色轮上的角度。与 LCH 类似，Chroma 的最小值为 0，表示中性颜色（灰色），其最大值理论上不受限，但实际不超过 0.5。
关于 OKLCH 色彩空间的更多信息，参见OKLAB: A Perceptually Uniform Color Space。
Display P3 是一种色彩空间，用于具备宽色域的显示设备。它基于数字影院中使用的 P3 色彩空间。
[Red, Green, Blue]
0 与 1 之间的数字，表示颜色的红色分量。0 与 1 之间的数字，表示颜色的绿色分量。0 与 1 之间的数字，表示颜色的蓝色分量。关于 Display P3 色彩空间的更多信息，参见Display P3 的定义。
A98 RGB 是一种用于宽色域显示设备的色彩空间，基于 Adobe RGB 色彩空间。
[Red, Green, Blue]
0 与 1 之间的数字，表示颜色的红色分量。0 与 1 之间的数字，表示颜色的绿色分量。0 与 1 之间的数字，表示颜色的蓝色分量。要了解更多 A98 色彩空间的信息，参见维基百科上的 Adobe RGB 色彩空间条目。
ProPhoto RGB 是一种用于宽色域显示设备的色彩空间，基于 ProPhoto RGB 色彩空间。
[Red, Green, Blue]
0 与 1 之间的数字，表示颜色的红色分量。0 与 1 之间的数字，表示颜色的绿色分量。0 与 1 之间的数字，表示颜色的蓝色分量。关于 ProPhoto RGB 色彩空间的更多信息，参见Design and Optimization of the ProPhoto RGB Color Encodings 。
Rec 2020 是一种用于宽色域显示设备的色彩空间，基于 Rec 2020 色彩空间。
[Red, Green, Blue]
0 与 1 之间的数字，表示颜色的红色分量。0 与 1 之间的数字，表示颜色的绿色分量。0 与 1 之间的数字，表示颜色的蓝色分量。关于 Rec 2020 色彩空间的更多信息，参见Recommendation ITU-R BT.2020-2：超高清电视系统的参数值（用于制作与国际节目交换）。
XYZ-D65 是一种能够表示人眼可感知全部颜色的色彩空间。它是一个基础色彩空间——所有其它色彩空间都可以转换到 XYZ 或从 XYZ 转换而来。它基于 CIE 1931 色彩空间，并使用 D65 光源。XYZ 在设计工具中并不常用，但在颜色转换中非常有用。
[X, Y, Z]
0 与 1 之间的数字，表示颜色的 X 分量。0 与 1 之间的数字，表示颜色的 Y 分量。0 与 1 之间的数字，表示颜色的 Z 分量。关于 XYZ-D65 色彩空间的更多信息，参见Colorimetry（第四版），CIE 015:2018。
XYZ-D50 与 XYZ-D65 类似，但使用 D50 光源。
[X, Y, Z]
0 与 1 之间的数字，表示颜色的 X 分量。0 与 1 之间的数字，表示颜色的 Y 分量。0 与 1 之间的数字，表示颜色的 Z 分量。关于 XYZ-D50 色彩空间的更多信息，参见Colorimetry（第四版），CIE 015:2018。
本规范的未来版本可能会根据设计工具的采用与支持情况，添加对额外色彩空间的支持。
本节为非规范性内容。
色域映射是将颜色从一种 颜色空间 转换到另一种的过程。
当源颜色空间的色域比目标颜色空间大时，需要进行色域映射。这种情况会在将颜色从宽色域颜色空间（例如 Display-P3）转换为较小色域的颜色空间（例如 sRGB）时发生。色域映射确保颜色在目标颜色空间中被准确表示，即使某些颜色不能被精确表示。
在进行颜色转换时，翻译工具 MAY 可根据用例使用最适合的色域映射算法。例如，如果目标是保留颜色的外观，可以使用感知（perceptual）色域映射算法。如果目标是保留精确的颜色值，可以使用饱和度（saturation）或相对色度（relative colorimetric）色域映射算法。
令牌的作者应当注意，色域映射算法的选择会显著影响目标颜色空间中颜色的外观。如果需要在颜色空间之间转换颜色，重要的是验证翻译工具的输出，以确保颜色被准确且一致地表示。
本节为非规范性内容。
在许多情况下，颜色可以通过插值或混合来创建新颜色。例如，在创建渐变时，颜色通常在两个或多个关键颜色之间进行插值。
插值可以在不同的 颜色空间 中进行，所选颜色空间会影响结果颜色的外观。翻译工具 MAY 可根据颜色空间和所需效果使用不同的插值方法。作者应注意在不同颜色空间中插值的含义，并验证插值得到的颜色以确保它们满足设计需求。
本节为非规范性内容。
本规范中将继续参考的设计令牌有3个主要类别。
基础令牌是最低级别的令牌。
设计令牌的值 MAY 可以是对另一个令牌的 引用。相同的值 MAY 可以有多个名称或别名。
组件特定的令牌在组件级别提供设计决策，并有助于在令牌架构中实现关注点分离。
在设计令牌命名方面有许多选择，尤其是颜色类型令牌。我们识别出两种最常见的实现方式：描述性（descriptive）和数字式（numerical）。
对于 基础令牌，以下是它们在每个版本中可能的表示方式：
描述性名称通常更具情感性和人性化，因为它们通常与人们接触的具象事物相关，例如草或西瓜。
| 优点 | 缺点 |
|---|---|
| 对某些人更易识别，且可用于区分品牌颜色与产品颜色 | 更难判断颜色的尺度（例如：哪些更浅或更暗？它们如何配对？） |
| 非英语使用者可能不易识别名称。对于跨语言团队，这可能不是一个好选择 |
数字令牌通常遵循某种刻度，以帮助区分颜色的进展。例如，在使用有序刻度时，color.blue.500 可能是基础颜色，其中最浅的颜色值为
color.blue.100，最暗的值可能是
color.blue.900，这些值之间按100的增量排列。我们建议不要使用连续编号（例如：1、2、3、4），以便在将来需要在两个现有颜色之间插入新的颜色时具有可扩展性。
数字令牌名称也可以在需要时提供更高的细化。例如，在创建中性调色板令牌（例如灰色）时，最浅的值可能以25为增量递增，而随后以100为增量。
数字令牌也可以通过 有界刻度 来命名。这些令牌使用基于实际颜色的区分值，例如在 HSL 中使用亮度值来区分色调的深浅。
令牌名称 MAY 也可以由工具生成，用户指定基础名称，工具会根据基础值的变化附加刻度编号。
| 优点 | 缺点 |
|---|---|
| 便于在不同令牌之间建立映射以进行颜色对比。例如，所有 100-400 的令牌可与 500-900 的令牌配对，以创建可访问的颜色组合。 | 不易记忆，令牌之间的差异不太明显 |
| 如果使用有界刻度，令牌名称可以指示底层值的一些信息 |
对于 别名令牌，我们建议通过在名称中优先使用类别 + 属性来对具有相似用途的令牌进行分组。例如，所有背景颜色别名令牌通常会以
color.background.XXX 开头。
我们建议避免使用缩写。例如，使用 “background” 而不是 “bg”，以提高可读性。
下面是别名令牌可能的表示方式：
颜色别名令牌也可以按概念分组，例如：
组件特定的名称应以所支持的组件开头，并与组件代码相邻放置。它们通常引用别名令牌，有助于在保持关注点分离的同时在组件之间使用一致的样式。
本规范未列出任何问题。
Referenced in: