CSS 中颜色的未来

过去

我们一直都知道，显示器上呈现的色彩并不能涵盖人眼所能感知的全部色彩宽度和广度。艺术创作总是受限于当时的技术——很久以前，色彩的选择受限于各种染料或颜料的生产成本。正因如此，紫色在许多西方文化中都与皇室联系在一起；紫色染料曾经非常昂贵，所以穿紫色衣服可谓是炫耀！同样，早期的计算机也仅限于黑色背景上显示绿色文本，因为单色显示器使用荧光粉，而绿色荧光粉最亮，余辉时间也最长（这有助于掩盖低刷新率）。哎呀，如果你从事网页设计或开发已有一段时间，你可能还记得90年代我们被限制使用的216种“网页安全”颜色列表！

现在

同样，我们现在习惯于编写 RGB 颜色的方式与其创建时间的限制有很大关系。例如，您是否知道 RGB 颜色在 0 到 255 的范围内定义的原因是颜色存储在三个字节的数据中（一个用于红色，一个用于绿色，一个用于蓝色）？所以，如果我们把事情全部带回到二进制，我们会看到00000000 - 00000000 - 00000000纯黑色的代码和11111111 - 11111111 - 11111111纯白色的代码 - 基本上全部关闭或全部打开。当我们从二进制转换为十进制时，1111111转换为255。所以，当我们定义 RGB 颜色时，我们实际上是在告诉 RGB 显示器中的每个子像素我们希望它采用什么二进制值......但用十进制值简写来写它们要快得多，也容易得多。很酷，对吧？就像，我们抽象地知道最终它们都是 1 和 0，但我认为以这种方式看到帷幕拉开会很有趣。

图片来自https://www.quora.com/Why-in-RGB-the-biggest-number-for-any-particular-color-is-255#:~:text=The reason it is 255,lowest%2C 255 is the highest。

回到未来

如今，我们正见证着从 LCD 屏幕到 OLED 屏幕的转变，这为我们带来了一系列全新的可显示色彩。这种新色彩集被称为P3，它比我们当前的 RGB 色彩集大约大 50%——这非常棒，对吧？这意味着我们将能够使用更明亮、更鲜艳的色彩进行设计。但是，我们也知道这不会是最后一种色彩集；人眼能够看到的色彩甚至比我们目前在 OLED 屏幕上所能呈现的还要多。P3 之后的色彩集被称为 Rec. 2020，它是您目前可以在超高清显示器上看到的（例如，当您看到标榜为“4K UHD”的电视时）——尽管其中一些仍然只支持完整 Rec. 2020 范围的 90-97%。

需要牢记的是，P3 是我们开发者可用的下一个（但不是最后一个）颜色集，这意味着我们必须定义一种能够与我们一起成长的颜色语法……遗憾的是，RGB 模型的局限性太大，无法用于 P3 颜色。我们一直以来所说的 RGB 颜色，未来将被称为 sRGB；S 代表“标准”。您可能还会开始看到“广色域”颜色支持的提法，这只是“能够支持比 sRGB 显示器更多颜色”的简写。

可以自动从 sRGB 转换为 P3（或反向转换），但当通过算法进行转换时，颜色可能会略微偏离设计师的预期。这意味着我们需要一种新的方式，让开发者和设计师能够定义 CSS 中的颜色——一种不像rgb()、hsl()或十六进制那样局限于 sRGB 颜色模型的方式。CSS 颜色模块 4 级提供了一些定义 P3 颜色的选项。

在 CSS 中编写 P3 颜色的选项

color(display-p3 0 0 0)

在这个语法中，我们首先指定颜色显示类型，就我们的目的而言，应该是 ，display-p3但也可以是srgb或rec2020。然后，这三个数字有点像我们过去定义 sRGB 颜色的更新版本：每个数字仍然代表红、绿、蓝（按此顺序），但最大值不再是 255，而是在 0 到 1 的范围内变化，其中 1 等于 100%（与我们定义不透明度的方式相同）。因此，如果我们想要一种 100% 纯红色的颜色，我们可以这样写color(display-p3 1 0 0)。

这种方法很棒，因为它的语法与我们熟悉的语法非常相似——开发人员学习起来没有太大的难度。然而，有人认为它实际上用处不大，因为 RGB 定义颜色的方法不够直观。这倒是真的；除非你是颜色和代码方面的专家，否则单凭代码很难对 RGB 定义的颜色进行微调。例如，如果你有一种颜色，该color(display-p3 0.6 0.44 0.89)如何让它变暗？该如何让它变亮？你几乎总是需要回到某种颜色选择工具，在那里调整颜色，然后导出一个新的 RBG 颜色值复制到代码中。这有点麻烦。这就引出了……

lab(0% 0 0)

该lab()语法是一种基于亮度和颜色通道定义颜色的方法。实际上，L 的含义就是lab：亮度！亮度、颜色通道 A 和颜色通道 B。亮度的定义范围是 0-100%，其中 0 表示完全暗，100% 表示最亮。颜色通道的工作方式与我们习惯的略有不同；它们将颜色定义为介于光谱两端之间的值，范围从 -128 到 127（剧透一下，整个光谱共有 255 个值）。通道 A 作用于红色和绿色之间的光谱，通道 B 作用于蓝色和黄色之间的光谱。在这两种情况下，0 都代表中间值——灰色。想象一个 X 形，一条横线从绿色到红色，另一条横线从蓝色到黄色。lab(50% -40 60)允许我们在图表上绘图，但也会在最开始添加一个新值，以 1-100% 的范围定义亮度。

图片来自https://www.colourphil.co.uk/lab_lch_colour_space.shtml

lch(0% 0 0)

语法lch()相似，但并不完全相同lab()——它甚至可能更易于使用。L 仍然代表亮度，比例尺的工作方式完全相同：0-100% 控制颜色的亮度。然而，接下来的两个值不同：C 代表色度 (chroma)，H 代表色调 (hue)。色度是颜色的饱和度或强度，0 代表灰色，230（“最大值”）代表最高鲜艳度。从技术上讲，这个上限是无限的，但实际上（目前）你永远不会看到它超过 230。你可能已经猜到了，色调就是颜色本身。它的工作范围是 0 到 360（代表色轮），每个数字代表可用光谱中的一种色调。这种方法很棒，因为它是一种非常直观的色彩处理方法。 L 和 C 值与我们通过 Instagram 滤镜或颜色选择器 UI 工具等熟悉的“亮度”和“饱和度”控制功能有着非常好的对应性。如果你想稍微尝试一下，这个 LCH 颜色选择器可以帮你直观地了解它的工作原理。

图片来自https://www.colourphil.co.uk/lab_lch_colour_space.shtml

哦，如果您对 Alpha 值（又称透明度）感到好奇，它的工作方式与以前相同（范围从 0 到 1），并且可以通过在括号内的值后添加斜杠来将其附加到这三种新 CSS 语法中的任何一种的末尾。例如，在 LCH 中定义的新颜色值如下所示：

color: lch(66% 132 359 / 65%); 

太好了，我什么时候可以开始？

和往常一样，未来技术的坏消息是……嗯，它基本上还在未来！这些技术最近才在 CSS 规范中最终确定，所以当 P3 颜色被广泛采用时，CSS 已经支持它了。目前大多数浏览器都不支持 P3 颜色。以下是截至 2022 年 1 月 1 日目前支持的浏览器的简要概述。

可以说，它已经正式上线了……但还没到手。话虽如此，Safari目前已完全支持这项技术，所以如果你想尝试一下这种新的配色方案，你可以使用一个浏览器来实现，无需开启任何实验性功能！事实上，Safari 的 Web Inspector 面板中甚至内置了一些非常棒的 P3 配色工具——Jen Simmons 制作了一个非常棒的简短概述视频，介绍了这些工具，如果你现在就想开始使用 P3 配色，我强烈建议你去看看。

使用以下方式设置回退color-gamut

如果您想开始使用 P3 颜色，另一件需要了解的重要事情是如何为尚不支持新颜色的用户设置回退方案。通过使用color-gamut媒体查询，您可以传入srgb、p3或来检查用户的浏览器和输出设备当前的颜色兼容性rec2020，然后根据状态有条件地渲染样式。因此，如果您想开始为未来的色谱编写代码，可以像这样设置一个优雅的降级：

@media (color-gamut: p3) { 
    body { color: lch(66% 132 359 / 65%) }
} 

@media (color-gamut: srgb) { 
    body { color: rgba(255 110 180 0.6) }
} 

@supports如果您愿意的话，您也可以使用 做基本相同的事情。

您准备好迎接色彩的未来了吗？

能够见证（并参与其中！）这些技术进步，是我作为一名开发者最喜欢的部分。有时，一切都发展得太快，令人沮丧，难以接受一两年前刚学到的东西很快就会过时……然而，与此同时，我也很幸运能够在一个不断发展、改进和扩展的领域工作。作为一个设计狂人，CSS 即将推出的全新色域支持让我特别兴奋——新的颜色定义方法都是很棒的选择，我很高兴能够用比以前更明亮、更鲜艳的色彩来创作设计。随着 Safari 引入 P3 颜色支持，预计在未来一年左右，现代浏览器将全面支持 P3 颜色。所以，做好准备吧；色彩的未来已来，而我们，将成为书写它的人！