【CSS in Depth 2 精译_080】 13.1：CSS 渐变效果（中）——不同色彩空间的颜色插值算法在 CSS 渐变中的应用

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

• 第四部分 视觉增强技术 ✔️
• 【第 13 章 渐变、阴影与混合模式】 ✔️
  • 13.1 渐变 ✔️
    • 13.1.1 使用多个颜色节点（上）
    • 13.1.2 颜色插值方法（中） ✔️
    • 13.1.3 径向渐变（下）
    • 13.1.4 锥形渐变（下）

《CSS in Depth》新版封面

译者按
本篇又是第二版全新增补的崭新内容，充分体现了新版 CSS 颜色语法在渐变设置中的灵活应用。时隔不到半年，书中提到的浏览器兼容问题已经成为了历史，足见这些新特性的受欢迎程度。本书虽未涉及色彩空间的底层插值算法理论（实际也用不上），但作者聚焦实战的讲解思路和业内最佳实践的倾囊相授，已经足以应对今后绝大多数的 CSS 渐变应用场景，并助您在团队中脱颖而出。

13.1.2 颜色插值方法 Color interpolation

在第 11 章中，我们学习了 CSS 颜色的各种表示方法以及色彩空间方面的知识。就在前不久，浏览器对渐变效果的计算都还仅限于 sRGB 色彩空间；如今，使用其他色彩空间来设置渐变已经成为了人们新的选择。在色彩渐变过程中，浏览器对于中间色的计算结果很可能会因为所选色彩空间的不同而存在显著差异。因为在不同的色彩空间中，色彩的几何排布情况各不相同，从而导致一个色彩空间中两个颜色点之间的颜色与另一个色彩空间截然不同。

图 13.6 给出了两个示例渐变效果。它们都是从左侧的黄色过渡到右侧的蓝色，但由于分属不同的色彩空间，用到的插值算法也不同，从而导致了风格迥异的中间渐变色效果。

【图 13.6 色彩空间截然不同的两种渐变效果可能存在显著差异】

在本例中，sRGB 色彩空间下的渐变设置会在其中心区域穿过某个灰色区间，这在 RGB 相关的颜色理论支撑下是解释得通的。黄色 yellow 的 RGB 颜色值为 rgb(255 255 0)，而蓝色 blue 的值为 rgb(0 0 255)。如果每个参数维度都按线性插值计算，则会在渐变的中心位置得到一个红、绿、蓝分量皆为 127.5 的过渡色，即本例中的灰色，有时也被称为 “灰色死区（gray dead zone ¹）”。在 sRGB 色彩空间下，位于色轮（color wheel ²）对侧或大致对侧的任意两种颜色在设置渐变效果时都会看到类似的结果，其渐变色必将穿过色轮中间的灰色地带。

另一方面，黄色和蓝色在 OKLCH 色彩空间下可以分别表示为 oklch(97% 0.21 110deg) 和 oklch(45% 0.31 264deg)。此时的渐变计算主要是将色调的角度由 110 度变为 264 度，渐变色依次穿过绿色（green）、青色（teal）及蓝绿色（cyan）。与 sRGB 时直接穿过色轮的中心区域不同，OKLCH 色彩空间下的颜色渐变会绕道而行，留下沿途经过的各种中间色。

警告

在 CSS 渐变中指定色彩空间仍是一个相对较新的功能特性。截至 2024 年年中，Firefox 尚未提供相应支持。因此在启用该特性时，还应该准备一个回退版的渐变设置，以适应不支持该特性的应用场景。

译注

截至 2024 年 12 月 16 日，根据 Can I Use 网站最新的统计数据，Firefox 等主流浏览器厂家已经全面支持渐变的色彩空间插值算法，目前的综合普及率已达 91.53%（线性、径向、锥形及其重复渐变版本的统计结果均保持一致）：

【补图1：各主流浏览器厂家已全面支持 CSS 渐变的色彩空间插值算法（截至 2024 年 12 月 16 日）】

在渐变中手动指定颜色空间的具体写法如代码清单 13.7 所示。这里为 Firefox 及其他老版本浏览器预备了一个回退方案。注意观察，我们在 linear-gradient() 函数的第一个参数中添加了一个关键词 in oklch。根据下列代码同步更新样式表：

代码清单 13.7 指定色彩空间为 OKLCH 的 CSS 渐变写法示例

.fade {height: 200px;width: 400px;background-image: linear-gradient(90deg, yellow, blue); /* 老版本浏览器的回退方案 */background-image: linear-gradient(90deg in oklch, yellow, blue); /* 指明色彩空间为 OKLCH 时的渐变写法 */
}

在确保您当前的浏览器支持 OKLCH 色彩空间的情况下，可以利用浏览器的开发者工具 DevTools，通过禁用或启用第二个 background-image 规则集来查看二者的显著区别。

在指定某个具体色彩空间时，必须使用关键字 in，然后再跟上所需的色彩空间名称。也可以指定其他 CSS 支持的色彩空间名称，如极坐标色彩空间中的 hsl、hwb、lch 与 oklch，以及矩形色彩空间下的 srgb、srgb-linear、lab、oklab、xyz、xyz-d50 或者 xzy-d65（注意，不是每个色彩空间都有对应的 CSS 颜色语法函数）。如果不指定色彩空间，默认按 sRGB 进行插值运算。

由于每种色彩空间渲染出的渐变效果各不相同，因此当需要设置特定的渐变效果时，多尝试几种色彩空间不失为寻求最优方案的一个有效途径。通常情况下，如果渐变涉及的两种色调存在明显差异，此时指定某个极坐标色彩空间（如 oklch 或 hsl）效果可能会更好一些；若要从更鲜艳的色彩过渡到中性色调（如灰色、黑色、白色或透明色等），则最好选用矩形色彩空间（如 srgb）。

注意

CSS 渐变中涉及的颜色插值算法与第 11 章中讲过的 color-mix() 函数中的用法相同。例如，声明 color-mix(in srgb, white 20% blue) 的渲染效果，从数学的角度看，与 srgb 色域下由白到蓝渐变、且距白色节点 20% 处的渐变色相比，效果是一样的。

另外，谷歌的 Chrome 团队还针对当前所有可用的色彩空间在 Code Pen 网站上制作了几个渐变效果的演示案例，具体的渲染效果详见：https://codepen.io/keithjgrant/full/GRzjGqL。您不妨快速浏览一遍，了解各个色彩空间在渐变设置中的差异。值得注意的是，在这些演示案例中个别示例还暴露了一些浏览器的 Bug，这个问题稍后再做处理。

13.1.2.1 极坐标色彩空间下的高级设置 More options in polar color spaces

在极坐标色彩空间下，色调是一个可以循环取值的参数（circular value）。因此，在设置两个不同色调的渐变效果时，渐变运算可以分别沿着色轮的两个不同方向进行。例如，由红色渐变为黄色，通常会出现橙色的渐变色。此时采用的是较短的渐变路径，也是 CSS 渐变默认的方向。

然而上述渐变也可以沿色轮中较长的路径进行，使其依次经过品红（magenta）、紫色（purple）、蓝色（blue）、蓝绿色（teal）以及绿色（green）。若两种颜色在色轮上的距离较近，那么沿较长路径定义的渐变效果将渲染出一道绚丽彩虹色。您甚至可以将两个颜色节点指定为同一颜色，从而得到长路径下的完整彩虹效果，如图 13.7 所示的色轮路径示意图。

【图 13.7 极坐标色彩空间下的渐变设置可以沿着色轮的两条长短不一的路径分别进行】

渐变路径的变更可以通过在渐变函数中添加关键字 long hue 实现。根据代码清单 13.8 同步更新本地样式表，并查看最终的渐变效果。

代码清单 13.8 long hue 在渐变函数中的示例应用

.fade {height: 200px;width: 400px;background-image: linear-gradient(90deg, yellow, blue);background-image: linear-gradient(90deg in oklch longer hue, /* 令渐变沿较长的色调路径进行 */yellow,blue);
}

在渐变函数中，第一个参数很可能因为声明了这些配置项而书写得较长，例如上述代码。此时应该像示例代码那样，将样式声明分为多行进行书写。

CSS 提供了四个不同的关键字来设置渐变的色调方向，它们仅在极坐标色彩空间（polar color space）下有效：

• shorter hue —— 在两种色调间选择较短路径（默认值）；
• longer hue —— 在两种色调间选择较长路径；
• increasing hue —— 路径方向与色调角递增（即顺时针）的方向一致；
• decreasing hue —— 路径方向与色调角递减（即逆时针）的方向一致。

不妨尝试在渐变设置中使用上述关键词，并查看其相应的渲染效果。在本例中，increasing hue 等效于 shorter hue；decreasing hue 等效于 longer hue。究其原因，示例中的黄色和蓝色在色轮上的角度分别为 110 度和 164 度（这些数值是通过浏览器的开发者工具、将黄色 yellow 和蓝色 blue 分别转换为对应的 OKLCH 颜色值后得到的）。但如果使用了不同的颜色节点（color stops），情况则可能大不相同。

13.1.2.2 浏览器 Bug 与颜色问题 Browser bugs and color quirks

CSS 许多新推出的颜色特性对于浏览器而言都相对较新，并且其中也存在一些错误（bugs），尤其是在渐变中使用 OKLCH 或 HSL 色彩空间时：对于某些色调（特别是蓝色），如果其中一个颜色节点为白色、黑色、或透明，可能会出现意外状况。

例如，在 OKLCH 或 HSL 色彩空间下、由蓝色渐变到某种非饱和色（如白色或黑色）的过程中，都会产生绿色或紫色的渐变色，具体效果视非饱和色的颜色深度以及被测浏览器而定；再比如，在从红色渐变到某非饱和色的过程中，中间位置会生成橙色（orange）或酒红色（burgundy）的渐变色。希望这些问题都能在被波及浏览器的后续版本更新中得以修复。在将白色、黑色、灰色或透明色设为渐变效果的颜色节点时，目前避开上述问题的最佳方案，是使用 sRGB 或者其他矩形色彩空间。

如果实在要使用 OKLCH 或 HSL 色彩空间，上述问题也可以通过这样的方式来解决：采用同样的色彩空间来指定渐变需要的颜色；然后在保持相同色调的情况下，适度微调色度（或饱和度）参数，以此作为渐变中的其他颜色节点（color stop）。比如说，在 OKLCH 色彩空间下定义一个由蓝色 blue 到 oklch(100% 0.001 264deg) 的渐变效果，而非直接从蓝色 blue 渐变到白色 white。该方案的更多详细介绍，可以参考我写的这篇文章：https://mng.bz/2Kp0。

---

---

关于《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 本章小结
• 第 11 章 颜色与对比
  • 11.1 通过对比进行交流
    • 11.1.1 模式的建立
    • 11.1.2 还原设计稿
  • 11.2 颜色的定义
    • 11.2.1 色域与色彩空间
    • 11.2.2 CSS 颜色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）
  • 11.3 利用 OKLCH 处理颜色（上篇）
    • 11.3.4 从页面其他颜色衍生出新颜色（下篇）
  • 11.4 思考字体颜色的对比效果
  • 11.5 本章小结
• 第 12 章 CSS 排版与间距
  • 12.1 间距设置
    • 12.1.1 使用 em 还是 px
    • 12.1.2 对行高的深入思考
    • 12.1.3 行内元素的间距设置
  • 12.2 Web 字体
  • 12.3 谷歌字体
  • 12.4 @font-face 的工作原理
    • 12.4.1 字体格式与回退处理
    • 12.4.2 同一字型的多种变体形式
  • 12.5 性能因素考量
    • 12.5.1 font-display 属性解析
    • 12.5.2 可变字体的用法
  • 12.6 调整字间距，提升可读性
    • 12.6.1 正文的字间距
    • 12.6.2 标题、小元素和间距
  • 12.7 本章小结
• 附录
  • 附录A：CSS 选择器参考
  • 附录B：CSS 预处理器简介

---

1. 译注：关于 gray dead zone，CSS-TRICKS 网站也有一篇不错的文章探讨过这个问题，感兴趣的朋友不妨了解一下：https://css-tricks.com/the-gray-dead-zone-of-gradients/。 ↩︎

2. color wheel，即色轮、色彩轮，是一个用于表示颜色关系的圆形图形。它将颜色排列成一个闭合的环形，通常包括原色、间色和复合色。色轮是艺术、设计和色彩理论的重要工具。 ↩︎