CSS Color 4 为 Web 引入了广色域色彩工具和功能:更多 操作函数和更好的渐变效果。
超过 25 年,sRGB
(标准红色、绿色、蓝色)是唯一的颜色
CSS 渐变和颜色的 gamut,以及颜色空间
(例如 rgb()
、hsl()
和十六进制)。这是最常用的颜色
显示屏的色域功能;是公分母。我们发展壮大了
对其中的颜色有一定的要求。
![最常用的颜色格式(按出现次数百分比排序)。](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/the-popular-color-format-b5aab67b4d3de.png?authuser=0000&hl=fi)
随着显示屏能够越来越多地显示各种颜色,CSS 需要一个 指定这些较宽范围内的颜色的方法。当前颜色格式 没有适用于宽颜色范围的语言。
如果 CSS 从未更新,则会永久停留在 90 年代的颜色范围中,强制 绝不能与图片和视频中的广色域信息相符。 已拦截,仅显示 人眼可见颜色的 30%。 感谢 CSS第 4 级颜色帮助我们逃离 作者主要由 Lea Verou 和 Chris Liley 编写。
Chrome 支持 CSS 颜色 4 色域和 颜色空间。CSS 现在支持高清 (HD) 指定高清色域的颜色,同时提供具有 专精领域认证。
<ph type="x-smartling-placeholder">亲自试用
本指南包含三个部分。请继续阅读下文,了解颜色在哪里。然后, 阅读颜色的发展方向和 未来如何通过迁移至高清色彩来管理色彩。
概览
在支持的浏览器中,可供选择的颜色增加了 50%。如果您觉得 16 岁 这听起来似乎有点多,但直到看到 这些新聊天室可显示的内容此外,还要考虑到所有梯度值 Banded(带状) 这也已经解决了
除了更多颜色,可以说是显示屏能够呈现的最鲜明的色彩 新的颜色空间提供了独特的工具和方法来管理和创建 颜色系统。例如,以前我们有 HSL 及其“亮度”渠道 而这是网络开发者最棒的现在,我们在 CSS 中提供了 LCH 的“感知亮度”。
<ph type="x-smartling-placeholder">![两个颜色表格并排。第一个表格显示了
由 10 种左右的颜色组成的彩虹,旁边是代表各种颜色的
这些 HSL 颜色的亮度第二个表格显示的是 LCH 彩虹,
但其旁边的灰度颜色是一致的。
这展示了 LCH 如何拥有健康的恒定亮度值,而 HSL 则没有。](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/two-tables-color-are-sid-d7829619631b7.png?authuser=0000&hl=fi)
此外,渐变和混合效果也得到了进一步提升:颜色空间支持、色调 插值选项,条带更少。
下图显示了部分混合升级。
<ph type="x-smartling-placeholder">![](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/kleavbJG5AA2namwim8y.png?authuser=0000&hl=fi)
<ph type="x-smartling-placeholder"></ph> https://codepen.io/web-dot-dev/pen/poZgXQb
颜色和网页的问题在于,CSS 无法提供高清版本, 而大多数人会随身携带、随身携带,或挂在墙上 并且支持广色域和高清彩色显示屏的颜色功能 比 CSS 增长速度快,而 CSS 现在可以迎头赶上。
除了“更多颜色”外,还有许多其他功能。待这些文档结束时, 您可以指定更多颜色,增强渐变效果,并选择最佳的 颜色空间和色域。
什么是色域?
色域表示事物的大小。短语“数百万种颜色”是 关于显示屏的色域或必须选择的颜色范围的评论 。在下图中,我们比较了三个色域,并且色域比较大 颜色就越多
色域也可以有一个名称。比如篮球对阵棒球 温特咖啡杯与大杯咖啡为尺寸命名有助于 进行通信。了解这些色域名称有助于您快速交流 理解各种颜色。
本文回顾了之前的色域。您可以参阅 访问更多色彩和新空间,了解七个全新色域。
人类视觉色域
系统经常将色域与人眼视觉色域进行对比;整个 颜色。HVS 通常用 色度图,如下所示:
<ph type="x-smartling-placeholder">![马蹄形中填满了鲜艳的渐变色,中间有一个空心三角形。](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/a-horse-shoe-shape-is-fil-c574400e794bc.png?authuser=0000&hl=fi)
最外侧的形状是人类所看到的,内侧的三角形是
rgb()
函数的范围,也称为 sRGB 颜色空间。
如上面所示的三角形,比较色域大小,你能否找到三角形? 。这是业界就色域和 来比较它们
什么是颜色空间?
颜色空间是色域的排列,形成了一种形状和 获取颜色。很多都是简单的 3D 形状,例如立方体或圆柱体。此颜色 排列方式决定了哪些颜色相邻,以及如何 和插值颜色均可。
RGB 类似于矩形颜色空间,其中颜色可通过指定 坐标HSL 是一种圆柱形颜色空间, 其中,颜色通过色调角度和 2 个轴上的坐标访问
<ph type="x-smartling-placeholder">![并排展示的是一个半切开的 RGB 立方体和 HSL 圆柱体的切片,展示了颜色是如何以每个空间的形式打包成一个形状的。](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/a-half-cut-open-rgb-cube-53a16bc324d2a.png?authuser=0000&hl=fi)
级别 4 规范引入了 新的颜色空间来查找颜色。这些是 之前可用的聊天室:
色域和颜色空间摘要
颜色空间是颜色的映射,其中色域是一系列颜色。 将色域视为颗粒的总和,将颜色空间视为瓶子 使该范围内的粒子保持在水面上
这是 Alexey Ardov 的交互式图片,演示了 颜色空间。在此演示中,对准、拖动和缩放。更改颜色空间 查看其他空间的可视化图表。
- 利用色域讨论各种颜色,例如低色域或窄色域 色域与高范围或广色域之间的差别。
- 利用颜色空间来说明颜色的排列方式,以及用于指定 调整颜色,并通过颜色进行插值。
![由多个彩色圆点组成的立方体。](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/a-cube-filled-many-multi-2ecb2e34ca6.png?authuser=0000&hl=fi)
经典颜色空间回顾 {#classic-color-spaces}
CSS 颜色 4 列出了一些新增颜色 适用于 CSS 和颜色的各种功能和工具首先,回顾一下颜色出现之前的 这些新功能
从 21 世纪开始,您已经能够将以下代码用于任何 CSS 属性
接受颜色值:十六进制(十六进制数)、rgb()
、rgba()
、
或使用类似hotpink
的关键字
currentColor
。
2010 年左右,根据您使用的浏览器,CSS 可以使用
hsl()
种颜色。然后在 2017 年
含有 alpha 的十六进制。仅最后一个
最近,hwb()
开始获得
。
所有这些经典颜色空间都会参考同一色域 (sRGB) 内的颜色。
HEX
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
十六进制颜色空间以 十六进制数字。以下 代码示例展示了此语法可以指定红色、绿色和蓝色加号的所有方式 不透明度。
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RGB
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
RGB 颜色空间功能可直接访问红色、绿色和蓝色通道。 该属性允许指定 0 到 255 之间的数值,或以 0 到 100 的百分比指定数值。 该语法在进行语法标准化之前 所以您会看到常见的英文逗号和无逗号语法。正在移动 则无需再使用逗号。
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
HSL
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
第一个颜色空间之一,能够让自己迎合人类的语言, HSL(色相饱和度和亮度)提供 同时无需大脑分辨红色、绿色和蓝色的色域 互动与 RGB 一样,它的语法中原来也有逗号,但现在将 则无需再使用逗号。
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
HWB
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
另一个面向人类如何描述颜色的 sRGB 色域颜色空间是 HWB (色调、白度、黑度)。作者可以选择色调,并混合为白色或黑色 找到自己想要的颜色
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
后续步骤
了解新的颜色空间、语法和工具, 然后了解如何转为高清彩色。
网络中的非 sRGB 颜色空间尚处于起步阶段,但我们会看到 设计人员和开发者的使用量会随时间的推移而增加。了解 例如,颜色空间是构建设计系统的有效工具, 创作者工具条每种颜色空间都提供独特的功能,其原因也有所不同 添加到 CSS 规范中,也可以从小范围开始, 。
资源
阅读更多有关 5 级颜色的文章。
此外,您还可以在网上找到更多读物:
- W3C 的 CSS 颜色模块级别 4
W3C 的 CSS 颜色模块级别 5
和工具: