此页面由 Cloud Translation API 翻译。

使用更多色彩和新空间

本文档是高清 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()` 函数

浏览器支持

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

来源

新的 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);
}

注意：颜色可以是 sRGB Gamut、Display P3 Gamut 或 Rec2020 Gamut；高达可见光谱的 77.6%。

通过 color() 实现 sRGB

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

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 从黑到白的来说明它们之间的差异：

为便于比较，分两行显示两种水平渐变。正如我们多年来所见，sRGB 梯度非常平滑。但是，sRGB 线性渐变在前 5% 区域非常暗，在最后 10% 区域非常浅，导致中间区域很长时间都呈现非常浅的灰色。

LCH

浏览器支持

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

来源

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

浏览器支持

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

来源

用于访问 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

浏览器支持

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

来源

此颜色空间可以更正 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);
}

俄克拉姆

浏览器支持

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

来源

这部分内容可以纠正 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

浏览器支持

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

来源

Display P3 三角形是唯一完全不透明的三角形
直观显示色域的大小从小到大，看上去都是第二代。

注意：颜色位于 Display P3 Gamut 中；可见光谱的 45.5%。

自 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

浏览器支持

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

来源

Rec2020 三角形是唯一完全不透明的三角形，
直观显示色域的大小看上去是最大的第 2 名。

注意：颜色位于 Rec2020 Gamut 中；可见频谱的 77.6%。

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}

浏览器支持

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

来源

A98 三角形是唯一完全不透明的三角形
直观显示色域的大小看起来像中等大小的三角形。

注意：颜色位于 RGB 98 Gamut 中；可见光谱的 52.1%。

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

浏览器支持

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

来源

ProPhoto 三角形是唯一一种完全不透明的三角形
直观显示色域的大小看起来是最大的。

这一广色域空间由柯达设计，独具特色，提供超广色域主色尽量减少色相偏移调整亮度它还声称覆盖真实的表面颜色于 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

浏览器支持

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

来源

注意：颜色位于 HVS Gamut 中；100% 的人类可见光谱 (HVS)。

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 位，所产生的颜色超过数百万种。

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

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

图中显示了 6 个面板，每个面板的渐变条纹数量各不相同
以及关于压缩和位深的一些信息。 — </ph> 图片来源

控制插值

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

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

具有从绿色到红色直线的圆形渐变
穿过圆圈，穿过白色区域 — （模拟演示）
HSL 圆柱体的俯视图，其中颜色停止点之间有一条线条

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

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

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

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

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

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

一条圆形渐变，其中一条围绕中间弯曲的线条，上面有许多
渐变会停止，引导它离开中心 — （模拟演示）
HSL 圆柱体的俯视图，其中有一条曲线，其中包含 9 个颜色停止点

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

虽然该工具做得不错，但如果您能获得类似或更高的直接从 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，也许他们会说服您这样做：

后续步骤

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

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

阅读更多颜色资源。

使用更多色彩和新空间

了解新的网页颜色空间

color() 函数

通过 color() 实现 sRGB

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

LCH

LAB

OKLCH

俄克拉姆

展示广告 P3

Rec2020

A98 RGB {#a98-rgb}

ProPhoto RGB

XYZ、XYZ-d50、XYZ-d65

自定义颜色空间

颜色插值

颜色插值功能的新变化

采用 16 位色，减少条带

控制插值

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

引导颜色插值

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

调高和调低色调插值

不同颜色空间中的渐变

色域取值范围限制

选择颜色空间

后续步骤

`color()` 函数