本文档是高清 CSS 颜色指南的一部分。
CSS 颜色 4 列出了一些新增颜色 适用于 CSS 和颜色的各种功能和工具下面的 Codepen 显示了 和旧的颜色语法:
阅读经典颜色空间回顾。
级别 4 规范引入了 12, 用于查找颜色的新颜色空间(之前分享的 7 个新色域):
了解新的网页颜色空间
以下颜色空间可提供比 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);
}
通过 color() 实现 sRGB
此颜色空间提供的功能与 rgb()
相同。此外,它还提供
介于 0 到 1 之间的小数,使用类似于 0% 到 100% 的小数。
优点
- 几乎所有显示屏都支持此颜色空间的范围。
- 设计工具支持。
缺点
.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
浏览器支持
-
<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">
自 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 是正在向 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 是 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">
这一广色域空间由柯达设计,独具特色,提供超广色域主色 尽量减少色相偏移 调整亮度它还声称覆盖 真实的表面颜色 于 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">
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">![图中显示了 6 个面板,每个面板的渐变条纹数量各不相同
以及关于压缩和位深的一些信息。](https://developer.chrome.google.cn/static/docs/css-ui/access-colors-spaces/image/six-panels-are-shown-eac-614abc71a28b3.png?authuser=7&hl=ro)
控制插值
两点之间的最短距离始终为直线。有颜色 则浏览器默认采用短路由。设想一种场景 其中 HSL 色柱中有两个点。梯度会获取 沿着两点之间的线条移动颜色台阶。
linear-gradient(to right, #94e99c, #e06242)
![具有从绿色到红色直线的圆形渐变
穿过圆圈,穿过白色区域](https://developer.chrome.google.cn/static/docs/css-ui/access-colors-spaces/image/a-circular-gradient-a-li-d65ad80dd5676.png?authuser=7&hl=ro)
HSL 圆柱体的俯视图,其中颜色停止点之间有一条线条
上面的渐变线从绿到红之间直线 并穿过颜色空间的中心虽然以上这些都是很好的做法 这有助于初步了解情况,但实际情况并非如此。这里是 并且中间不是白色的,就像这样
不过,渐变的中间区域已经失去了鲜艳效果。这是因为 最鲜艳的色彩位于颜色空间形状的边缘,而不是 插值在中心位置附近的位置。这通常称为 “死区”。那里 有几种方法可以解决或解决这个问题。
指定更多渐变分界点以避开死区
现在要避开死区的一项技巧是在 使插值保持在 颜色空间的鲜艳范围。从字面上说,它是一种变通方法, 增加停靠站有助于它避开死区
Erik Kennedy 创建了一款渐变工具,可计算其他颜色 这有助于您避开盲区,即使是 使用它,传递与第一个示例相同的颜色 但将颜色插值更改为 HSL 会生成以下内容:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
![一条圆形渐变,其中一条围绕中间弯曲的线条,上面有许多
渐变会停止,引导它离开中心](https://developer.chrome.google.cn/static/docs/css-ui/access-colors-spaces/image/a-circular-gradient-a-li-5adfb140eed03.png?authuser=7&hl=ro)
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
,也许他们会说服您这样做:
后续步骤
现在,您已经熟悉了新的颜色空间和工具,您可以 转为高清颜色。
更加鲜明的色调、一致的处理和插值效果, 为用户提供更加丰富多彩的体验
阅读更多颜色资源 。