CSS Color 4 为 Web 提供了广色域颜色工具和功能：更多的颜色、操作函数和更好的渐变效果。
25 年来，sRGB（标准红绿蓝）一直是 CSS 渐变和颜色的唯一色域，其中包含 rgb()、hsl() 和十六进制颜色等颜色空间。这是显示屏中最常见的色域功能，也是很常见的标准。我们已经习惯于在其中指定颜色。
随着显示屏能够显示各种颜色的能力，CSS 需要通过某种方式来指定这些更广泛范围内的颜色。当前的颜色格式没有适用于广色域的语言。
如果 CSS 从未更新过，它将永远困在 90 年代的颜色范围内，被迫永远无法与图片和视频中的广色域产品保持一致。捕获，仅显示人眼能看到的 30% 的颜色。感谢 CSS Color Level 4 帮助我们逃脱，主要由 Lea Verou 和 Chris Liley 撰写。
Chrome 支持 CSS 颜色 4 色域和颜色空间。CSS 现在可以支持高清显示屏，指定高清色域的颜色，同时提供具有专精领域认证的颜色空间。
亲自试用
本指南包含三个部分。请继续阅读，记住颜色到哪里了。然后，了解颜色的方向以及如何通过迁移到高清颜色来管理未来颜色。
概览
在受支持的浏览器中，可供选择的颜色增加了 50%。如果您认为自己有 1, 600 万种颜色听起来似乎有点多，请等一等，看看这些新空间可以显示多少种颜色。此外，请考虑所有因位深不足而导致的带状梯度问题，这些问题也会得到解决。
除了更多颜色（可以说是显示屏能够呈现的最鲜明的色彩）之外，新的颜色空间还为管理和创建颜色系统提供了独特的工具和方法。例如，以前我们有 HSL 及其“lightness”渠道，它是 Web 开发者的最佳选择。现在，在 CSS 中，我们采用了 LCH 的“感知亮度”。
此外，渐变和混合进行了一些升级：支持颜色空间、色调插值选项以及减少条带。
下图显示了部分混合升级。
https://codepen.io/web-dot-dev/pen/poZgXQb
颜色和网络的问题在于，CSS 尚不具备高清显示能力，而大多数人口袋里、放在口袋里或安装在墙上的显示屏都具备广色域、高清色彩。显示屏的颜色功能增长速度快于 CSS，现在 CSS 来追赶他们的步伐了。
不只是“更多颜色”。学完这些文档后，您将能够指定更多颜色、增强渐变效果，以及为每个任务选择最佳颜色空间和色域。
什么是色域？
色域表示内容的大小。短语“百万色”是关于显示屏的色域或颜色范围的说明。在下图中，我们比较了三种色域，色域越大，提供的颜色就越多。
色域也可以有名称。比如篮球、棒球、通风口咖啡杯和大杯；尺寸名称有助于人们进行沟通。了解这些色域名称有助于您沟通并快速理解一系列颜色。
本文将回顾之前的色域。您可以在使用更多颜色和新空间中了解七种新色域。
人物色域
色域通常与人眼视觉色域进行比较，即我们认为人眼可以看到的全色颜色。HVS 通常用色度图来描绘，如下所示：
最外层的形状是我们所看到的人类形状，内三角形是 rgb() 函数范围，也称为 sRGB 颜色空间。
正如您在上方看到的三角形，通过比较色域大小，您是否能在下方找到三角形。这是业界传达色域并进行比较的方法。
什么是颜色空间？
颜色空间是色域的排列，用于建立形状和访问颜色的方法。很多形状都是简单的 3D 形状，例如立方体或圆柱体。这种颜色排列方式决定了哪些颜色相邻，以及访问和插值颜色如何工作。
RGB 类似于矩形颜色空间，它通过指定 3 个轴上的坐标来获取颜色。HSL 是圆柱形颜色空间，其中颜色通过色调角度和 2 个轴上的坐标进行访问
级别 4 规范引入了 12 个用于查询颜色的新的颜色空间。这些是对之前提供的 4 种颜色空间的补充：
色域和颜色空间摘要
颜色空间是颜色的映射，其中色域是一系列颜色。不妨将色域视为粒子的总数量，将颜色空间视为用于容纳该范围粒子的瓶子。
下面是 Alexey Ardov 提供的交互式可视化内容，演示了颜色空间。在此演示中指引、拖动和缩放。更改颜色空间以查看其他空间的可视化效果。
- 使用色域介绍一系列颜色，例如低色域或窄色域与高色域或广色域。
- 使用颜色空间可以介绍颜色排列方式、用于指定颜色的语法、操纵颜色以及对颜色进行插值。
经典颜色空间回顾 {#classic-color-spaces}
CSS 颜色 4 概述了 CSS 和颜色方面的许多新功能和工具。首先，我们来回顾一下推出这些新功能之前的颜色阶段。
自 2000 年代以来，您已经能够对任何接受颜色作为值的任何 CSS 属性使用以下内容：十六进制（十六进制数）、rgb()、rgba()、按名称（如 hotpink）或关键字（如 currentColor）。
CSS 可在 2010 年左右使用 hsl() 颜色，具体取决于您的浏览器。然后在 2017 年推出包含 alpha 的十六进制值。最近，hwb() 才开始获得浏览器支持。
所有这些经典颜色空间都会引用同一色域 sRGB 内的颜色。
HEX
十六进制颜色空间使用十六进制数字指定 R、G、B 和 A。以下代码示例展示了此语法指定红色、绿色和蓝色以及不透明度的所有方式。
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RGB
RGB 颜色空间功能可直接访问红色、绿色和蓝色通道。它允许指定 0 到 255 之间的数量，或指定为 0 到 100 之间的百分比。 该语法在规范中的一些语法规范化之前就存在，因此您会看到逗号和无逗号语法。今后，将不再需要英文逗号。
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
HSL
HSL（色相饱和度和亮度）是首批使自己面向人类语言和沟通的颜色空间之一，它提供了 sRGB 色域中的所有颜色，同时不需要您的大脑知道红色、绿色和蓝色如何相互作用。与 RGB 一样，其语法中原本也包含英文逗号，但以后便不再需要英文逗号。
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
HWB
另一个面向人类描述颜色的 sRGB 色域颜色空间是 HWB（色相、白度、黑度）。作者可以选择色调并混合使用白色或黑色以找到想要的颜色。
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
后续步骤
了解新的颜色空间、语法和工具，然后了解如何迁移到高清色彩。
虽然网络上的非 sRGB 颜色空间尚处于早期阶段，但随着时间的推移，我们会发现设计师和开发者对此类空间的使用有所增加。例如，了解要在哪种颜色空间上构建设计系统是成为创作者工具条的绝佳工具。每种颜色空间都有独特的功能，以及将其被添加到 CSS 规范的原因，可以从小着手，并根据需要添加。
资源
阅读更多关于 5 级颜色的文章。
此外，您还可以通过网络找到更多阅读资源：
- W3C 的 CSS 颜色模块级别 4
W3C 的 CSS 颜色模块级别 5
和工具：