使用更多色彩和新空间

本文档是高清 CSS 颜色指南的一部分。

CSS 颜色 4 列出了一些新增颜色 适用于 CSS 和颜色的各种功能和工具下面的 Codepen 显示了 和旧的颜色语法：

阅读经典颜色空间回顾。

级别 4 规范引入了 12， 用于查找颜色的新颜色空间（之前分享的 7 个新色域）：

• sRGB 线性
• LCH
• okLCH
• LAB
• okLAB
• Display p3
• Rec2020
• a98 RGB
• ProPhoto RGB
• XYZ
• XYZ d50
• XYZ d65

了解新的网页颜色空间

以下颜色空间可提供比 sRGB 更大的色域。通过 display-p3 颜色空间提供的颜色数量几乎是 RGB 的两倍，而 Rec2020 几乎是 display-p3 的两倍好多颜色！

color() 函数

新的 color() 函数可用于以 R、G 和 B 为单位指定颜色的任何颜色空间。 渠道。color() 首先接受一个颜色空间参数，然后是一系列 通道值。

您会发现许多新的颜色空间都使用此函数，因为 rgb、srgb、hsl、hwb 等专用函数发展成 长列表，更容易将颜色空间用作参数。

优点

• 用于访问使用 RGB 通道的颜色空间的标准化空间。
• 可以放大到任何基于广色域 RGB 的色彩空间。

缺点

• 不适用于 HSL、HWB、LCH、okLCH 或 okLAB

。

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

通过 color() 实现 sRGB

此颜色空间提供的功能与 rgb() 相同。此外，它还提供 介于 0 到 1 之间的小数，使用类似于 0% 到 100% 的小数。

优点

• 几乎所有显示屏都支持此颜色空间的范围。
• 设计工具支持。

缺点

• 在感知上不是线性（类似于 lch() 是）
• 无广色域色彩。
• 梯度通常会经过死区。

.valid-css-srgb-colors {
  --percents: color(srgb 34% 58% 73%);
  --decimals: color(srgb .34 .58 .73);

  --percents-with-opacity: color(srgb 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb none none none);
  --empty-channels-black2: color(srgb);
}

通过 color() {#Linear-srgb} 实现线性 sRGB

这种 RGB 的线性替代方案提供可预测的通道强度。

优点

• 直接访问 RGB 通道，可用于游戏引擎或灯光秀等活动。

缺点

• 非感知线性。
• 黑色和白色填充在边缘。

.valid-css-srgb-linear-colors {
  --percents: color(srgb-linear 34% 58% 73%);
  --decimals: color(srgb-linear .34 .58 .73);

  --percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb-linear none none none);
  --empty-channels-black2: color(srgb-linear);
}

我们稍后将详细讨论梯度， 但很快您就会明白，srgb 和 linear-srgb 从黑到白的 来说明它们之间的差异：

LCH

LCH 引入了访问 RGB 色域以外的颜色的语法。它也是 第一种是非常容易 颜色。这是因为任何CIE 空间颜色 （lch、oklch、lab、oklab）可代表 整个人类可见色谱。

此颜色空间是基于人类视觉而建模的， 语法来指定其中任何一种颜色以及其他颜色。LCH 通道是亮度， 色度和色相色调是一个角度，如 HSL 和 HWB 中的。亮度是一个值 介于 0 到 100 之间。这是一种特殊的“感知线性”以人为中心 亮度。色度与饱和度相似其范围为 0 到 230 在技术上是无界限的

优点

• 由于大部分是感知线性的，因此可预测的颜色操控（请参阅 oklch）。
• 使用的是熟悉的频道。
• 通常具有鲜艳的渐变效果。

缺点

• 轻松关闭全色域。
• 在极少数情况下，可能需要为渐变效果调整中间点，以防止色调偏移。

。

.valid-css-lch-colors {
  --percent-and-degrees: lch(58% 32 241deg);
  --just-the-degrees: lch(58 32 241deg);
  --minimal: lch(58 32 241);

  --percent-opacity: lch(58% 32 241 / 50%);
  --decimal-opacity: lch(58% 32 241 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lch(100 none none);
  --empty-channels-black: lch(none none none);
}

LAB

用于访问 CIE 色域的另一个颜色空间，同样具有 线性亮度 (L) 维度。实验中的 A 和 B 代表 人类色觉：红-绿和蓝-黄。当 A 为正值时 它会添加红色，并在值低于 0 时添加绿色。如果 B 是正数 它就会添加黄色，其中负值指向蓝色。

优点

• 感知一致的梯度。
• 高动态范围。

缺点

• 色调偏移的可能性。
• 读取值时难以手动编写或猜测颜色。

.valid-css-lab-colors {
  --percent-and-degrees: lab(58% -16 -30);
  --minimal: lab(58 -16 -30);

  --percent-opacity: lab(58% -16 -30 / 50%);
  --decimal-opacity: lab(58% -16 -30 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lab(100 none none);
  --empty-channels-black: lab(none none none);
}

OKLCH

此颜色空间可以更正 LCH。和 LCH 一样，(L) 继续表示感知线性的亮度，C 表示色度，H 表示色相。

如果您曾与这些客户合作 HSL 或 LCH。在色轮上选择 H 的角度、选择亮度或 但可以用色度代替饱和度 它们基本相同，只不过调整亮度和色度往往 或者成对出现，也可以很容易地 范围之外。

优点

• 使用蓝色和紫色色调时不会出现意外。
• 感知线性亮度。
• 使用的是熟悉的频道。
• 高动态范围。
• 具有现代风格的颜色选择器 - Evil Martians 出品。

缺点

• 轻松关闭全色域。
• 新颖，相对未曾探索。
• 颜色选择器很少。

.valid-css-oklch-colors {
  --percent-and-degrees: oklch(64% .1 233deg);
  --just-the-degrees: oklch(64 .1 233deg);
  --minimal: oklch(64 .1 233);

  --percent-opacity: oklch(64% .1 233 / 50%);
  --decimal-opacity: oklch(64% .1 233 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklch(100 none none);
  --empty-channels-black: oklch(none none none);
}

俄克拉姆

这部分内容可以纠正 LAB。 据称，该空间还针对图片处理质量进行了优化，适合 在 CSS 中，我们指的是渐变和颜色函数操控质量。

优点

• 动画和插值的默认空间。
• 感知线性亮度。
• 没有像 LAB 那样的色调偏移。
• 感知一致的梯度。

缺点

• 新颖，相对未曾探索。
• 颜色选择器很少。

.valid-css-oklab-colors {
  --percent-and-degrees: oklab(64% -.1 -.1);
  --minimal: oklab(64 -.1 -.1);

  --percent-opacity: oklab(64% -.1 -.1 / 50%);
  --decimal-opacity: oklab(64% -.1 -.1 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklab(100 none none);
  --empty-channels-black: oklab(none none none);
}

展示广告 P3

自 Apple 支持以来，Display P3 色域和颜色空间就越来越受欢迎了 自 2015 年以来一直使用 iMac 打造的。Apple 还自 2016 年起通过 CSS 在网页中支持 display-p3，其中 5 个 领先于其他任何浏览器。如果是来自 sRGB，就非常适合采用这种色彩 将样式移至更高的动态范围时，该空间会开始生效。

优点

• 提供出色的支持，被视为 HDR 显示屏的基准。
• 颜色比 sRGB 多 50%。
• 开发者工具提供了一个很棒的颜色选择器。

缺点

• 最终将被 Rec2020 和 CIE 空间超越。

.valid-css-display-p3-colors {
  --percents: color(display-p3 34% 58% 73%);
  --decimals: color(display-p3 .34 .58 .73);

  --percent-opacity: color(display-p3 34% 58% 73% / 50%);
  --decimal-opacity: color(display-p3 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(display-p3 none none none);
  --empty-channels-black2: color(display-p3);
}

Rec2020

Rec2020 是正在向 UHDTV（超高清电视）迁移的一部分， 提供各种颜色，用于 4k 和 8k 媒体。Rec2020 是另一个 基于 RGB 的色域，大于 display-p3，但不如同 。

优点

• 超高清色彩。

缺点

• 这一点在消费者中不那么常见。
• 不常见于手持设备或平板电脑上。

.valid-css-rec2020-colors {
  --percents: color(rec2020 34% 58% 73%);
  --decimals: color(rec2020 .34 .58 .73);

  --percent-opacity: color(rec2020 34% 58% 73% / 50%);
  --decimal-opacity: color(rec2020 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(rec2020 none none none);
  --empty-channels-black2: color(rec2020);
}

A98 RGB {#a98-rgb}

A98 RGB 是 Adobe 1998 RGB 的简称，由 Adobe 创建 CMYK 打印机打印的色彩。它提供的色彩比 sRGB 多，特别是 以青色和绿色色调呈现

优点

• 大于 sRGB 和 Display P3 颜色空间。

缺点

• 这并不是一个由数字设计师设计的常用领域。
• 很少有人从 CMYK 移植调色板。

.valid-css-a98-rgb-colors {
  --percents: color(a98-rgb 34% 58% 73%);
  --decimals: color(a98-rgb .34 .58 .73);

  --percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(a98-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(a98-rgb none none none);
  --empty-channels-black2: color(a98-rgb);
}

ProPhoto RGB

这一广色域空间由柯达设计，独具特色，提供超广色域主色 尽量减少色相偏移 调整亮度它还声称覆盖 真实的表面颜色 于 1980 年由 Michael Pointer 记载。

优点

• 更改亮度时色相偏移最小。
• 鲜艳的原色。

缺点

• 大约有 13% 的颜色 假想，也就是 而不在人类可见的范围内。

.valid-css-prophoto-rgb-colors {
  --percents: color(prophoto-rgb 34% 58% 73%);
  --decimals: color(prophoto-rgb .34 .58 .73);

  --percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(prophoto-rgb none none none);
  --empty-channels-black2: color(prophoto-rgb);
}

XYZ、XYZ-d50、XYZ-d65

CIE XYZ 颜色空间涵盖了使用 平均视力因此，它被用作其他颜色的标准参考 空格。Y 是亮度，X 和 Z 是给定 Y 内的可能色度 亮度。

d50 和 d65 之间的区别在于白点，其中 d50 使用 d50 d65 使用 d65 白点。

关键术语：白点是颜色空间的一个属性， 真正的白色。对于电子屏幕而言 也就是 6500 开尔文它颜色很重要 白点匹配的转换，以便色温（暖度或冷度） 不受影响

优点

• 线性光照访问具有便利的用例。
• 非常适合物理配色。

缺点

• 与 lch、oklch、lab 和 oklab 一样，在感知上不是线性的。

.valid-css-xyz-colors {
  --percents: color(xyz 22% 26% 53%);
  --decimals: color(xyz .22 .26 .53);

  --percent-opacity: color(xyz .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz none none none);
  --empty-channels-black2: color(xyz);
}

.valid-css-xyz-d50-colors {
  --percents: color(xyz-d50 22% 26% 53%);
  --decimals: color(xyz-d50 .22 .26 .53);

  --percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d50 none none none);
  --empty-channels-black2: color(xyz-d50);
}

.valid-css-xyz-d65-colors {
  --percents: color(xyz-d65 22% 26% 53%);
  --decimals: color(xyz-d65 .22 .26 .53);

  --percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d65 none none none);
  --empty-channels-black2: color(xyz-d65);
}

自定义颜色空间

CSS 颜色 5 规范还有一个 用于训练浏览器使用自定义颜色空间的路径。 这是 ICC 配置文件，用于告知浏览器 解析颜色。

@color-profile --foo {
  src: url(path/to/custom.icc);
}

加载完成后，您可以使用 color() 函数访问此自定义配置文件中的颜色 并为其指定渠道值

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

颜色插值

动画、渐变色和渐变色 混合颜色该过渡效果通常指定为起始颜色和 结束颜色，浏览器应将其插入在这些颜色和结束颜色之间。 这里的插值是指生成一系列中间颜色， 创建流畅的过渡，而不是瞬间完成。

使用渐变时，插值是形状沿线的一系列颜色。包含 动画呈现一系列颜色随时间变化的情况。

@keyframes bg {
  0%, 100% {
    background: orange;
  }
  25% {
    background: magenta;
  }
  50% {
    background: lime;
  }
  75% {
    background: cyan;
  }
}

.circle {
  animation: bg 5s ease-in-out infinite;
}

使用渐变时，中间颜色会一次性全部显示：

颜色插值功能的新变化

随着新的色域和颜色空间的增加， 插值选项。将颜色 in hsl 从蓝色转换为白色 会生成与 sRGB 完全不同的图片。

.classic-gradient-in-srgb {
  background: linear-gradient(to right, blue, white);
}

.new-gradient-in-hsl {
  background: linear-gradient(in hsl to right, blue, white);
}

那么如果你从某一空间中的一种颜色过渡到 完全不同的空间：

.gradient {
  /* oklab will be the common space */
  background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}

.lch {
  /* lch is specified */
  background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}

幸运的是，颜色 4 规范中针对浏览器提供了有关如何处理这些交叉 颜色空间插值。对于 .gradient，浏览器会注意到 颜色空间，并使用默认颜色空间 oklab。

您可能会认为浏览器会使用 lch 作为颜色空间，因为这是 第一种颜色，但它不是。这就是我要显示第二个比较梯度的原因 .lch。.lch 渐变是来自 lch 颜色空间的渐变。

采用 16 位色，减少条带

在这之前，所有颜色都以一个 32 位整数保存， 代表所有四个渠道红色、绿色、蓝色和 alpha 值。这是 8 位/ 和 2^ 24 种可能的颜色（忽略 alpha）。2 ^ 24 = 16,777,216， “数百万种颜色”

在此颜色生效之后，4 个 16 位浮点值，每个通道都有 而不是被合并在一起。数据总共为 64 位， 所产生的颜色超过数百万种。

必须完成这项工作才能支持高清颜色。这样就增加了 这也很有副作用 更多颜色供浏览器在渐变中使用。

渐变条纹是指没有足够的颜色来呈现平滑渐变的情况 和“条纹”所有颜色。使用 升级到更高分辨率的色彩

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

控制插值

两点之间的最短距离始终为直线。有颜色 则浏览器默认采用短路由。设想一种场景 其中 HSL 色柱中有两个点。梯度会获取 沿着两点之间的线条移动颜色台阶。

linear-gradient(to right, #94e99c, #e06242)

<ph type="x-smartling-placeholder">

</ph>

上面的渐变线从绿到红之间直线 并穿过颜色空间的中心虽然以上这些都是很好的做法 这有助于初步了解情况，但实际情况并非如此。这里是 并且中间不是白色的，就像这样

不过，渐变的中间区域已经失去了鲜艳效果。这是因为 最鲜艳的色彩位于颜色空间形状的边缘，而不是 插值在中心位置附近的位置。这通常称为 “死区”。那里 有几种方法可以解决或解决这个问题。

指定更多渐变分界点以避开死区

现在要避开死区的一项技巧是在 使插值保持在 颜色空间的鲜艳范围。从字面上说，它是一种变通方法， 增加停靠站有助于它避开死区

Erik Kennedy 创建了一款渐变工具，可计算其他颜色 这有助于您避开盲区，即使是 使用它，传递与第一个示例相同的颜色 但将颜色插值更改为 HSL 会生成以下内容：

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

<ph type="x-smartling-placeholder">

</ph>

有了引导式停靠点，插值将不再是直线，而是 看起来就会围绕着死区曲线，这有助于保持饱和度 更为鲜艳的渐变效果

虽然该工具做得不错，但如果您能获得类似或更高的 直接从 CSS 进行控制？

引导颜色插值

在颜色 4 中，能够控制色相插值策略 添加了一种规避 (:wink:) 死区的新方式。考虑色调 考虑一个 2 停止渐变，只改变角度，实现色调 从 140deg 切换为 240deg。

较短的色调插值与较长的色调插值

渐变效果默认采用 shorter 可以路由，除非 让它接受 longer 路线。色调 插值选项指示角度旋转，例如指示他人旋转角度 从左边而不是右边（嘿，Zoolander）：

在色相插值距离示例中，短路径和 并模拟长路径来说明不同之处。短距离有 因为两者经过的距离最短，所以两者之间的色相较弱 因为长距离经过了更多色相。

调高和调低色调插值

颜色 4 中还有另外两种色调插值策略，但它们仅适用于圆柱形。 颜色空间。继续使用前面示例中的两种颜色， 显示了增加和减少的工作原理。

上面的 Codepen 使用 ColorJS 演示 预期结果。为在不使用 JavaScript 库将为：

.longer-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

.decreasing-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

要结束色调插值， 这里有一个有趣的游乐场，您可以在其中更改 并观察色相插值选择的效果， 以及颜色空间如何改变渐变结果。效果可能会非常 different;在这里，你可以把这四项新技巧视为颜色工具条。

不同颜色空间中的渐变

每种颜色空间都有独特的形状和颜色排列方式，可生成 不同的渐变效果。在以下示例中，请查看 处理方式不同，尤其是在蓝到白时。请注意 中间变成紫色这就是插值期间的色相偏移

这些空间中的某些渐变比其他颜色更鲜艳，或者不便于呈现 穿越死区。 lab 等空间以针对饱和度进行优化的方式将颜色组合在一起，例如 而不是像 hwb() 这样专为人类书写颜色而优化的空间。

.hwb {
  background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}

以上演示虽然结果不易察觉，但显示出的一致性 内部插值。然而，实验的语法并不简单易懂， 来自 rgb 或 hsl 时非常不熟悉的负数。较好 我们可以使用 hwb 来实现熟悉的语法，但要求渐变为 完全在另一种颜色空间（如 oklab）中插入。

.hwb {
  background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}

本示例在 hwb 中使用相同的颜色，但指定了 插值到 hwb 或 oklab。hwb 非常适合用来实现高画质的色彩空间 但可能是死区或亮点（请参阅 ）。oklab 非常适合保持 饱和。这个功能很有趣，因为你可以尝试几种不同的颜色 看看您最喜欢哪个渐变。

这是一个 Codepen 实验成果，其中包括渐变和颜色空间、混合和 来探索各种可能性。即使从黑色过渡到 与白色不同的颜色空间！

色域取值范围限制

在某些情况下，颜色可能会要求色域以外的内容。 请考虑使用以下颜色：

rgb(300 255 255)

rgb 颜色空间中颜色通道的上限为 255，但在此处 300 已指定为红色。会出现什么情况？色域取值范围限制。

取值范围是指直接移除额外信息的情况。“300”变为“255” 颜色引擎。现在，颜色已限制在其空间内。

选择颜色空间

在了解这些颜色空间及其效果后，许多人 不知道如何选择供您选择。根据我的研究结果和 但并非所有任务都使用一个颜色空间。每个 都有可能产生预期结果的时刻。

如果只有一个最佳空间，那么就不会有那么多的新空间 推出。

不过，我可以确定的 CIE 空间（lab、oklab、lch 和 oklch）是我的 起点。如果结果不是我要找的，我会去 测试其他空间。对于混合颜色和创建渐变效果，我同意 默认规范选项为 oklab。对于颜色系统和整体界面颜色，我更喜欢 oklch。

下面是几篇文章，大家分享了他们对新款颜色的评价 策略。例如，Andrey Sitnik 已经全力以赴oklch，也许他们会说服您这样做：

1. CSS 中的 OKLCH：为什么我们弃用 RGB 和 HSL 安德烈·西特尼克
2. 颜色格式 作者：Josh W.Comeau
3. OK，OKLCH， 克里斯·科耶尔

后续步骤

现在，您已经熟悉了新的颜色空间和工具，您可以 转为高清颜色。

更加鲜明的色调、一致的处理和插值效果， 为用户提供更加丰富多彩的体验

阅读更多颜色资源 。