当前内容所在位置（可进入专栏查看其他译好的章节内容）

• 第四部分 视觉增强技术 ✔️
• 【第 11 章 颜色与对比】 ✔️
  • 11.1 通过对比进行交流
    • 11.1.1 模式的建立
    • 11.1.2 还原设计稿
  • 11.2 颜色的定义
    • 11.2.1 色域与色彩空间 ✔️
    • 11.2.2 深入理解颜色表示法

《CSS in Depth》新版封面

译者按
本篇为 11.2 节的中篇内容，介绍了色域和色彩空间的相关知识，也是新版中全新增补的内容。虽然不可能将色域和色彩空间的所有内容逐一介绍一遍，毕竟其中涉及的知识点太过庞杂；但有了这些基础的知识储备，后续 CSS 的设计与实现会更加游刃有余。

11.2.1 色域与色彩空间 Gamuts and color spaces

在本节开头介绍的调色板中，颜色都是用十六进制的数值表示的。这是一种简洁明了的表示法，也是 Web 开发者从 Web 早期就开始使用的一种表示法；但该表示法也存在一些不足。

十六进制颜色值十分晦涩（cryptic），毕竟人们很难一目了然地知晓颜色值 #076448 究竟代表什么颜色。此外，十六进制表示法也只能在有限的 色域（gamut） 范围内描述颜色。

色域的定义

色域（gamut） （译注：读作 /'ɡæmət/ ）是指某个颜色范围。它通常用于表征某设备上可以显示多少种颜色，或者该设备通过特定的颜色表示法（如十六进制表示法）可以描述多少种颜色。

颜色问题曾一度是 CSS 中相对简单的一个子领域，但随着显示器和智能手机的不断推陈出新，新一代硬件所支持的色域范围也在不断扩展。在对比 CSS 提供的各种颜色表示法时，如果能了解一些色域相关的基础知识，无疑将大有裨益。

就在十年前，大多数消费类电子产品的色域范围还仅仅停留在 标准 RGB（Standard RGB） 阶段，其缩写即为 sRGB。该色域覆盖了人们在屏幕上可以看到的熟悉的色彩范围，但也仅仅是肉眼可以感知的所有色彩中的一部分。而现在市面上的高端设备都支持显示范围更广的色域标准，即 Display P3 色域 ¹。P3 色域所涵盖的色彩范围比 sRGB 色域扩大了约 25%，它也是目前绝大多数智能手机和高端笔记本电脑支持的色域标准。时至今日，少数显示器还支持显示范围更宽的色域标准，即 Rec2020 色域 ²。该色域覆盖了约 75% 的可见色彩。

一种常见的用以展示每种色域标准对应的色彩范围的可视化方法，如图 11.9 所示。从图中不难看出，在 sRGB 色域范围之外还存在大量的可见色彩。

【图 11.9 不同色域标准所代表的色彩范围对比图】

CSS 之前的颜色表示法只能表达 sRGB 色域标准内的颜色。即便硬件显示器支持更多色彩，如果不使用更新的颜色语法，也无法启用更广泛的色域范围。这也是 CSS 在过去几年中采用新的颜色标准的一个主要原因。

说明

可以使用媒体查询来检测用户浏览器和硬件的色域支持情况。例如，@media (color-gamut: p3) 规则下的样式声明仅在浏览器支持 P3 色域时生效。其他的合法值还可以是 srgb 和 rec2020。

色域描述的是可用颜色空间的范围；而 色彩空间（color space） 则说的是该颜色的特定排列组合（arrangement）。它通常被映射到三维空间中，旨在帮助人们更直观地理解色彩，并且能从概念上深化理解。对于同一个色域标准，如果映射方式不同，对应的色彩空间也各不相同。

译注：辨析 色域 与 色彩空间

关于 色域 和 色彩空间，二者既相互关联又存在细微差别，作者这里并未详细展开。鉴于准确理解这两个概念对于色彩管理、图像处理和渲染技术都起着至关重要的作用，这里略作补充说明。

一、关于 色域（gamut）:

• 定义：通常指的是 色域 的 实际颜色范围。它是指某个设备、颜色模型或色彩系统所能够显示、打印或表示的所有颜色的集合。
• 本质：更多强调的是颜色的 范围 本身，即某个设备或色彩空间可以显示的颜色的 范围和边界。通常用 二维 或 三维 的色彩模型图形来表示。
• 示例：
  • 显示器的色域：表示屏幕可以显示的颜色集合。比如，sRGB 色域表示屏幕可以显示的颜色范围，Adobe RGB 色域则表示更广泛的颜色范围。
  • 打印机的色域：打印机能打印的颜色范围，通常比显示器的色域要小。

二、关于 色彩空间（color space）:

• 定义：色彩空间 说的是一个描述颜色的数学模型或坐标系统。它定义了颜色通过数字或物理属性来进行描述的具体方法。一个色彩空间通常会包括一组颜色的表示方法、坐标轴、模型和映射规则，可能涉及色度（色调、饱和度）、亮度、RGB 值等方面。
• 本质：强调的是 颜色的表示方法和标准，即颜色的 定义。它包括了用于描述颜色的数学模型和标准，并规定了某个颜色与颜色模型中的某个点的映射关系。
• 示例：
  • RGB 色彩空间：表示由红、绿、蓝三原色组合而成的颜色模型，通常用于显示器和数字设备。
  • CMYK 色彩空间：常用于打印设备，代表青色（Cyan）、品红（Magenta）、黄色（Yellow）和黑色（Key）的组合。
  • XYZ 色彩空间：由CIE（国际照明委员会）定义的标准色彩空间，用于科学精确的色彩研究。

二者的主要区别：

特征	色域（gamut）	色彩空间（color space）
定义	指设备或色彩模型可以呈现的颜色的实际范围。	定义了颜色的数学模型、坐标系和表示方法。
焦点	强调 颜色的范围，即能显示或呈现的颜色数量。	强调 颜色的表示和定义，包括数值如何表示颜色。
表现形式	通常通过二维或三维的图形来展示，表示颜色的边界。	通过数学模型定义颜色的数值，例如 RGB、CMYK 值等。
应用范围	通常用于讨论显示设备、打印机、摄像机等的颜色表现范围。	用于描述具体的颜色模型和标准，适用于设备、图像、视频等领域。

大多数色彩空间都采用矩形或圆柱形排列。图 11.10 展示的是基于矩形的 RGB 色彩空间，其中红色、绿色、蓝色的颜色值分别被映射为直角坐标系下的 x 轴坐标、y 轴坐标以及 z 轴坐标。图 11.11 则展示的是基于圆柱形的 HSL 色彩空间。其中色调（hue）是通过围绕极坐标系下的中心轴、以圆形方式排列映射的。（以下图片均由 SharkD 提供，详见 https://en.wikipedia.org/wiki/HSL_and_HSV，图片已使用 CC BY-SA 3.0 许可协议）。

【图 11.10 RGB 矩形色彩空间示意图】

【图 11.11 HSL 极坐标色彩空间】

通常情况下，圆柱形色彩空间往往更加直观、也更容易上手。在 RGB 色彩空间中，要描述清楚增加蓝色并减少绿色对橙色产生的影响往往非常抽象；而增加颜色亮度或者转到不同的色调则让目标颜色效果更容易预测。接下来，就让我们深入考察一下 CSS 提供的各种色彩空间及其相关的表示方法。

（中篇完）

---

---

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

	第 1 版	第 2 版
读者评分	原版：4.7（亚马逊）；中文版：9.3（豆瓣）	原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暂无，待出版
原价	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暂无，待出版
现价	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暂无，待出版
原版国内预订	起步价 ￥461.00	起步价 ￥750.00

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：

• 第一章 层叠、优先级与继承（已完结）
  • 1.1 层叠
  • 1.2 继承
  • 1.3 特殊值
  • 1.4 简写属性
  • 1.5 CSS 渐进式增强技术
  • 1.6 本章小结
• 第二章 相对单位（已完结）
  • 2.1 相对单位的威力
  • 2.2 em 与 rem
  • 2.3 告别像素思维
  • 2.4 视口的相对单位
  • 2.5 无单位的数值与行高
  • 2.6 自定义属性
  • 2.7 本章小结
• 第三章 文档流与盒模型（已完结）
  • 3.1 常规文档流
  • 3.2 盒模型
  • 3.3 元素的高度
  • 3.4 负的外边距
  • 3.5 外边距折叠
  • 3.6 容器内的元素间距问题
  • 3.7 本章小结
• 第四章 Flexbox 布局（已完结）
  • 4.1 Flexbox 布局原理
  • 4.2 弹性子元素的大小
  • 4.3 弹性布局的方向
  • 4.4 对齐、间距等细节处
  • 4.5 本章小结
• 第五章 网格布局（已完结）
  • 5.1 构建基础网格
  • 5.2 网格结构剖析 （上）
    • 5.2.1 网格线的编号（下）
    • 5.2.2 网格与 Flexbox 配合（下）
  • 5.3 两种替代语法
    • 5.3.1 命名网格线
    • 5.3.2 命名网格区域
  • 5.4 显式网格与隐式网格（上）
    • 5.4.1 添加变化 （中）
    • 5.4.2 让网格元素填满网格轨道（下）
  • 5.5 子网格（全新增补内容）
  • 5.6 对齐相关的属性
  • 5.7 本章小结
• 第六章 定位与堆叠上下文（已完结）
  • 6.1 固定定位
    • 6.1.1 创建一个固定定位的模态对话框
    • 6.1.2 在模态对话框打开时防止屏幕滚动
    • 6.1.3 控制定位元素的大小
  • 6.2 绝对定位
    • 6.2.1 关闭按钮的绝对定位
    • 6.2.2 伪元素的定位问题
  • 6.3 相对定位
    • 6.3.1 创建下拉菜单（上）
    • 6.3.2 创建 CSS 三角形（下）
  • 6.4 堆叠上下文与 z-index
    • 6.4.1 理解渲染过程与堆叠顺序（上）
    • 6.4.2 用 z-index 控制堆叠顺序（上）
    • 6.4.3 深入理解堆叠上下文（下）
  • 6.5 粘性定位
  • 6.6 本章小结
• 第七章 响应式设计（已完结）
  • 7.1 移动端优先设计原则（上篇）
    • 7.1.1 创建移动端菜单（下篇）
    • 7.1.2 给视口添加 meta 标签（下篇）
  • 7.2 媒体查询（上篇）
    • 7.2.1 深入理解媒体查询的类型（上篇）
    • 7.2.2 页面断点的添加（中篇）
    • 7.2.3 响应式列的添加（下篇）
  • 7.3 流式布局
  • 7.4 响应式图片
  • 7.5 本章小结
• 第八章 层叠图层及其嵌套
  • 8.1 用 layer 图层来操控层叠规则（上篇）
    • 8.1.1 图层的定义（上篇）
    • 8.1.2 图层的顺序与优先级（下篇）
    • 8.1.3 revert-layer 关键字（下篇）
  • 8.2 层叠图层的推荐组织方案
  • 8.3 伪类 :is() 和 :where() 的用法
  • 8.4 CSS 嵌套的使用
    • 8.4.1 嵌套选择器的使用
    • 8.4.2 深入理解嵌套选择器
    • 8.4.3 媒体查询及其他 @规则 的嵌套
  • 8.5 本章小结
• 第九章 CSS 的模块化与作用域
  • 9.1 模块的定义
    • 9.1.1 模块和全局样式
    • 9.1.2 一个简单的 CSS 模块
    • 9.1.3 模块的变体
    • 9.1.4 多元素模块
  • 9.2 将模块组合为更大的结构
    • 9.2.1 模块中多个职责的拆分
    • 9.2.2 模块的命名
  • 9.3 CSS 的作用域
    • 9.3.1 CSS 作用域的就近原则
    • 9.3.2 划定作用域的边界
    • 9.3.3 CSS 中的隐式作用域
    • 9.3.4 关于 CSS 作用域与层叠图层
  • 9.4 CSS 模式库
  • 9.5 本章小结
• 第十章 CSS 容器查询
  • 10.1 容器查询的一个简单示例
    • 10.1.1 容器尺寸查询的用法
  • 10.2 深入理解容器
    • 10.2.1 容器的类型
    • 10.2.2 容器的名称
    • 10.2.3 容器与模块化 CSS
  • 10.3 与容器相关的单位
  • 10.4 容器样式查询的用法
    • 10.4.1 将模块与所在容器解耦
    • 10.4.2 减少重复代码
  • 10.5 本章小结
• 附录
  • 附录A：CSS 选择器参考
  • 附录B：CSS 预处理器简介

---

1. Display P3 色域是由 国际电视联合会（ITU） 和 国际标准化组织（ISO） 等机构制定的色域标准。它是基于 DCI-P3 色域的一个扩展，并且专为显示器和屏显技术（尤其是苹果公司的相关设备）进行了优化。苹果公司在 2015年 发布的 iMac 5K 中首次引入并推广了 Display P3 色域，标志着该色域标准的普及。 ↩︎

2. Rec. 2020（BT.2020）色域 是由 国际电信联盟（ITU） 的 无线电通信部门（ITU-R） 早在 2012年 制定并推行的色域标准。该标准是专为 4K 和 8K 超高清电视（UHDTV） 设计的，旨在为超高清电视和高动态范围（HDR）视频提供一种更广的色域，能够更精确地呈现色彩。该标准中的 2020 并非制定年份，而是代表该标准的编号，即 ITU-R 推荐标准第 2020 号。 ↩︎