4个新CSS颜色功能的预览

本文探讨了 CSS 颜色领域的最新变化和未来可能出现的变化，内容之多令人惊讶。定义颜色的新方法和即将出现的方法，数量之多甚至超过了现有方法。让我们快速浏览一下。

首先，需要强调的是，这些内容非常复杂。我本人也难以完全理解。但以下是一些要点：

• 在所有即将到来的变化之前，我们只有 RGB 作为颜色模型，所有内容都以此为基础。
• 我们有不同的“颜色空间”来以不同的方式处理它（例如，rgb() 函数将 RGB 颜色模型映射为具有线性坐标的立方体，hsl() 函数将 RGB 颜色模型映射为圆柱体），但它们都属于 sRGB 色域。
• 随着即将到来的变化，我们将获得新的颜色模型，并且 (!) 我们将获得以不同方式映射该颜色模型的新函数。所以我认为这是一种双重甚至三重打击。

我无法向您详细解释所有细节——我写这篇文章是因为我相信很多人和我一样，想知道为什么我们应该关心这些，而这是我试图理解为什么我应该关心所有这些。

Display-P3 开启了更多以前无法表达的鲜艳色彩。

body {
  background: color(display-p3 1 0.08 0); /* 超级红色！*/
}

事实证明，现代显示器可以显示更多颜色，特别是额外的鲜艳颜色，但我们只是没有办法使用经典的 CSS 颜色语法（如 HEX、RGB 和 HSL）来定义这些颜色。非常奇怪，对吧？！但是如果您使用 Display-P3，您可以更广泛地访问这些鲜艳的色彩。

开发公司 Panic 很早就注意到了这一点，并开始将这些颜色用作“秘密武器”：

? 除了 WebGL 之外，p3 颜色现在也是 Panic 网站秘密武器堆栈的重要组成部分。嘘，别告诉任何人，你应该在 iMac Pro 屏幕上查看此页面！https://www.php.cn/link/f08c64512c2ce6b9642b58563e9c029b

— Panic (@panic) 2019 年 5 月 24 日

Jen Simmons 还介绍了如何使用它们，包括针对不支持的浏览器的后备方案：

Display P3 颜色。在浏览器中设计。太棒了。

让我向您展示如何切换到 P3，找到一种颜色，然后为旧版浏览器找到一种后备颜色。所有操作都在 Safari Web Inspector 中进行。（打开声音收听我的解释！）pic.twitter.com/AaKhrn2s3e

— Jen Simmons (@jensimmons) 2022 年 1 月 5 日

资源

• 使用 Display-P3 的 CSS 宽色域颜色（WebKit 博客）
• 网络上不断扩展的色彩色域（Ollie Williams）

HWB 更“人性化”，但这有点值得商榷，它仍然基于 sRGB。

我以前不知道 hwb() 是什么——感谢 Stefan Judis 的博客文章。

我通常认为 HSL 是“人性化”的 CSS 颜色格式（并且适合程序控制），因为，嗯，操作 360° 的色相和 0-100% 的饱和度和亮度有一定的明显意义。

但在 hwb() 中，我们有色相(我认为与 HSL 相同)，然后是白度和黑度。Stefan：

向颜色添加白色和黑色会影响其饱和度。假设您向颜色添加相同数量的白色和黑色，颜色色调保持不变，但颜色会失去饱和度。这适用于高达 50% 的白色和 50% 的黑色 (hwb(0deg 50% 50%))，这会导致非彩色颜色。

Stefan 对这是否比 HSL 更容易理解表示怀疑，我倾向于同意。我可能只需要更多地习惯它，但它似乎比简单地改变亮度或饱和度更抽象。

HWB 仅限于与所有旧颜色格式相同的色域 (sRGB)。这里没有解锁新的颜色。

资源

• HWB 颜色选择器
• hwb() – 人性化的颜色表示法？（Stefan Judis）

LAB 就像一个更广泛色域的 rgb()

div {
  background: lab(150% -400 400);
}

当我四处询问时，我喜欢 Eric Portis 对 LAB 的解释：

LAB 就像 RGB 一样，它有三个线性分量。数字越低表示该事物越少，数字越大表示该事物越多。因此，您可以使用 LAB 指定有史以来最亮、最绿的绿色，它对每个人来说都将非常明亮和绿色，但在色域更广的显示器上会更亮更绿。

因此，我们获得了所有额外的颜色，这很棒，但 sRGB 有另一个问题（除了颜色表达有限之外），那就是它不是感知上统一的。Brian Kardell：

sRGB 空间并非感知上统一。相同的数学移动在颜色空间中的不同位置具有不同程度的感知效果。如果您想阅读设计师对此的体验，这里有一个有趣的例子，它很好地说明了努力做得好的过程。

这里的经典例子是，在 HSL 中，具有完全相同“亮度”的颜色实际上感觉完全不同。

HSL 与 LAB:: 亮度?

来自我们棘手的颜色投票的相同颜色，但这次我显示了相同颜色的 LAB 版本。请注意 LAB 的亮度值与我们投票的结果有多接近！

? 颜色空间并非都相同！https://www.php.cn/link/ff15242553d87dd31723dcd88a087382 pic.twitter.com/xkEguq3KZG

— Adam Argyle (@argyleink) 2019 年 12 月 3 日

但在 LAB 中，显然它是感知上统一的，这意味着以编程方式操作颜色是一项更合理的任务。另一个好处是 LAB 颜色被指定为设备无关的。Michelle Barker：

LAB 和 LCH 在规范中被定义为设备无关的颜色。LAB 是一个可以在 Photoshop 等软件中访问的颜色空间，如果您希望屏幕上的颜色与例如印在 T 恤上的颜色相同，则建议使用它。

资源

• lab() (MDN)
• 使用 RGB、HSL、HWB、LAB 和 LCH 的现代 CSS 颜色的指南（Michelle Barker）

LCH 就像一个更广泛色域的 hsl()

还记得我说过 HSL 是“人性化”的，因为它比 RGB 更容易理解吗？更改色相、饱和度和亮度很有逻辑意义。lch() 类似于此，我们有亮度、彩度和色相。回到我和 Eric Portis 的谈话：

LCH 更像 HSL：一个极坐标空间。H = 色相 = 一个圆。因此，进行数学运算以选择互补色（或您追求的任何变换）变得微不足道（只需添加 180——或任何其他值！）

我想您会选择 LCH，只是因为您喜欢它的语法，或者因为它使您尝试执行的一些复杂程序化操作更容易——并且您知道它可以免费表达 50% 以上的颜色。

我们在这里也获得了感知上的统一性。Lea Verou 似乎很兴奋亮度实际上会有意义：

在 HSL 中，亮度毫无意义。颜色可以具有相同的亮度值，但感知亮度却大相径庭。[…] 使用 LCH，任何具有相同亮度的颜色在感知上都同样明亮，任何具有相同彩度的颜色在感知上都同样饱和。

新模型的另一个好处是，我们可以摆脱 CSS 颜色渐变中的“灰色死区”。我认为由于这种感知统一性，两种丰富的颜色不会变得古怪并在非丰富区域自行渐变。

这是一个小小的个人预测：我会说 lch() 可能会成为设计师的最爱。很快就会有很多新的颜色选择，而且总是选择不同的颜色太困难和奇怪了。LCH 似乎在心理上最有效。

资源

• lch() (MDN)
• CSS 中的 LCH 颜色：什么、为什么以及如何？（Lea Verou）

“确定”

LAB 及其朋友看起来如此新颖，因为它对 CSS 来说是新的……但 LAB 是在 1940 年代发明的。在与 Adam Argyle 的谈话中，他使用了一个令人难忘的短语：所有颜色空间都有一个阿喀琉斯之踵。也就是说，他们有点不擅长的事情。对于 sRGB 来说，是灰色死区问题以及有限的色域。LAB 很好，但它肯定有其自身的弱点。例如，LAB 中的蓝色到白色的渐变会相当笨拙地穿过紫色区域。

2020 年 12 月，Björn Ottosson 说：“嘿，一个新的颜色空间刚刚出现”，现在 OKLAB 出现了。显然，CSS 决策者认为该颜色空间的价值足够高，因此 oklab() 和 oklch() 已经规范化。我想我们应该关心，因为它们通常更好，但不要引用我说的话。

为什么 Display P3 使用 color() 函数而其他函数不使用？

我真的不知道。我认为 CSS color() 函数比较新，这就是 Safari 最初将其放入其中的方式。我不知道 Display P3 是否会获得其专用的函数，或者我们是否都应该开始使用 CSS color()，或者是什么。

/* 这是使用 Display P3 的方法 */
color(display-p3 1 0.08 0);

/* 但这不起作用 */
color(oklch 42.1% 0.192 328.6);

/* 你必须这样做 ?‍♀️ */
oklch(42.1% 0.192 328.6);

/* 但你可以在渐变中使用颜色空间... */
background-image: linear-gradient(
    to right
    in oklch,
    lch(50% 100 100),
    lch(50% 100 250)
  );

相对颜色语法非常有用。

有一种非常酷的功能叫做“相对颜色语法”，您可以基本上解构 CSS 颜色，同时将其移动到另一种格式。假设您拥有（显然）最著名的 CSS HEX 颜色，雾狗，并且您想将其转换为 HSL：

body {
  background: hsl(from #f06d06 h s l);
}

也许这并不立即有用，但是，嘿，现在我们可以向它添加 alpha 了！实际上没有其他方法可以将 alpha 应用于现有的 HEX 颜色，所以这非常重要：

body {
  background: hsl(from #f06d06 h s l / 0.5);
}

但我也可以修改它。假设我想在添加不透明度之前稍微饱和雾狗，因为较低的不透明度会自然地使其变暗，我想抵消这一点。我可以在那里隐含的变量上使用 calc()：

body {
  background: hsl(from #f06d06 h calc(s   20%) l / 0.5);
}

这太酷了。我相信我们会看到一些令人惊叹的事情由此而来。它当然不限于 HSL。我只是使用 HSL，因为我现在觉得它很舒服。如果我想，我可以从命名颜色红色开始，并在 LCH 中修改它：

body {
  background: lch(from red l calc(c   15) h / 0.25);
}

当与自定义属性一起自由组合时，这些内容将非常有用。

不再有专门用于 alpha 的特殊函数了。

需要明确的是：CSS 颜色函数中 alpha 值前面没有逗号——而是一个正斜杠：

/* 旧的！*/
rgb(255, 0, 0);
rgba(255, 0, 0, 0.5);

/* 新的！*/
rgb(255 0 0);
rgb(255 0 0 / 0.5);
hsl(0deg 40% 40%)
hsl(0deg 40% 40% / 90%) /* 可以是百分比而不是 0.9 或其他值 */

/* 新的颜色内容只有单个基本函数，没有 alpha 次要函数 */
lab(49% 39 80)
lab(49% 39 80 / 0.25)

/* Display P3，使用颜色函数，基本上与正斜杠的工作方式相同 */
color(display-p3 1 0.08 0 / 0.25);

你甚至可以定义你自己的 CSS 颜色空间。

但我真的无法考虑这个问题。这让我震惊，对不起。

以上是4个新CSS颜色功能的预览的详细内容。更多信息请关注PHP中文网其他相关文章！