使用更多色彩和新空间

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

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

阅读经典颜色空间回顾

级别 4 规范引入了 12, 用于查找颜色的新颜色空间(之前分享的 7 个新色域):

了解新的网页颜色空间

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

五个不同颜色的堆叠三角形,以帮助说明
  每个新颜色空间的关系和大小。

color() 函数

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:113。 <ph type="x-smartling-placeholder">
  • Safari:15。 <ph type="x-smartling-placeholder">

来源

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

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

优点

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

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

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

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

LCH

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:113。 <ph type="x-smartling-placeholder">
  • Safari:15。 <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

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:113。 <ph type="x-smartling-placeholder">
  • Safari:15。 <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

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:113。 <ph type="x-smartling-placeholder">
  • Safari:15.4. <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);
}

俄克拉姆

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:113。 <ph type="x-smartling-placeholder">
  • Safari:15.4. <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

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:113。 <ph type="x-smartling-placeholder">
  • Safari:15。 <ph type="x-smartling-placeholder">

来源

Display 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

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:113。 <ph type="x-smartling-placeholder">
  • Safari:15。 <ph type="x-smartling-placeholder">

来源

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

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}

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:113。 <ph type="x-smartling-placeholder">
  • Safari:15。 <ph type="x-smartling-placeholder">

来源

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

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

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:113。 <ph type="x-smartling-placeholder">
  • Safari:15。 <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

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:113。 <ph type="x-smartling-placeholder">
  • Safari:15。 <ph type="x-smartling-placeholder">

来源

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> 图中显示了 6 个面板,每个面板的渐变条纹数量各不相同
    以及关于压缩和位深的一些信息。 <ph type="x-smartling-placeholder">
</ph> 图片来源

控制插值

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

linear-gradient(to right, #94e99c, #e06242)
<ph type="x-smartling-placeholder">
</ph> 具有从绿色到红色直线的圆形渐变
    穿过圆圈,穿过白色区域
(模拟演示)
HSL 圆柱体的俯视图,其中颜色停止点之间有一条线条

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

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

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

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

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

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
<ph type="x-smartling-placeholder">
</ph> 一条圆形渐变,其中一条围绕中间弯曲的线条,上面有许多
    渐变会停止,引导它离开中心
(模拟演示)
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 空间(laboklablchoklch)是我的 起点。如果结果不是我要找的,我会去 测试其他空间。对于混合颜色和创建渐变效果,我同意 默认规范选项为 oklab。对于颜色系统和整体界面颜色,我更喜欢 oklch

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

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

后续步骤

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

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

阅读更多颜色资源