高清 CSS 颜色指南

CSS Color 4 为 Web 引入了广色域色彩工具和功能:更多 操作函数和更好的渐变效果。

Adam Argyle
Adam Argyle

超过 25 年sRGB (标准红色、绿色、蓝色)是唯一的颜色 CSS 渐变和颜色的 gamut,以及颜色空间 (例如 rgb()hsl() 和十六进制)。这是最常用的颜色 显示屏的色域功能;是公分母。我们发展壮大了 对其中的颜色有一定的要求

<ph type="x-smartling-placeholder">
</ph> 最常用的颜色格式(按出现次数百分比排序)。 <ph type="x-smartling-placeholder">
</ph> https://almanac.httparchive.org/en/2022/css#colors

随着显示屏能够越来越多地显示各种颜色,CSS 需要一个 指定这些较宽范围内的颜色的方法。当前颜色格式 没有适用于宽颜色范围的语言。

如果 CSS 从未更新,则会永久停留在 90 年代的颜色范围中,强制 绝不能与图片和视频中的广色域信息相符。 已拦截,仅显示 人眼可见颜色的 30%。 感谢 CSS第 4 级颜色帮助我们逃离 作者主要由 Lea VerouChris Liley 编写。

Chrome 支持 CSS 颜色 4 色域和 颜色空间。CSS 现在支持高清 (HD) 指定高清色域的颜色,同时提供具有 专精领域认证。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 一系列图片在宽色和窄色之间切换 色域,说明色彩鲜明度及其效果。
亲自试用

本指南包含三个部分。请继续阅读下文,了解颜色在哪里。然后, 阅读颜色的发展方向和 未来如何通过迁移至高清色彩来管理色彩。

概览

在支持的浏览器中,可供选择的颜色增加了 50%。如果您觉得 16 岁 这听起来似乎有点多,但直到看到 这些新聊天室可显示的内容此外,还要考虑到所有梯度值 Banded(带状) 这也已经解决了

除了更多颜色,可以说是显示屏能够呈现的最鲜明的色彩 新的颜色空间提供了独特的工具和方法来管理和创建 颜色系统。例如,以前我们有 HSL 及其“亮度”渠道 而这是网络开发者最棒的现在,我们在 CSS 中提供了 LCH 的“感知亮度”

<ph type="x-smartling-placeholder">
</ph> 两个颜色表格并排。第一个表格显示了
    由 10 种左右的颜色组成的彩虹,旁边是代表各种颜色的
    这些 HSL 颜色的亮度第二个表格显示的是 LCH 彩虹,
    但其旁边的灰度颜色是一致的。
    这展示了 LCH 如何拥有健康的恒定亮度值,而 HSL 则没有。 <ph type="x-smartling-placeholder">
</ph> 亲自预览 (在 Codepen 中)

此外,渐变和混合效果也得到了进一步提升:颜色空间支持、色调 插值选项,条带更少。

下图显示了部分混合升级。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 前两个混色是采用 sRGB 和 sRGB 颜色。 后两个颜色的混合显示在 Display p3 中。展示广告 p3 包含更多 而混合色调则形成中间的黑白效果 其中 sRGB 看起来有点饱和,而中间是混音 不是黑白结果。
<ph type="x-smartling-placeholder"></ph> https://codepen.io/web-dot-dev/pen/poZgXQb

颜色和网页的问题在于,CSS 无法提供高清版本, 而大多数人会随身携带、随身携带,或挂在墙上 并且支持广色域和高清彩色显示屏的颜色功能 比 CSS 增长速度快,而 CSS 现在可以迎头赶上。

除了“更多颜色”外,还有许多其他功能。待这些文档结束时, 您可以指定更多颜色,增强渐变效果,并选择最佳的 颜色空间和色域。

什么是色域?

色域表示事物的大小。短语“数百万种颜色”是 关于显示屏的色域或必须选择的颜色范围的评论 。在下图中,我们比较了三个色域,并且色域比较大 颜色就越多

色域以三角形的形式并排比较。
  sRGB 最小,Rec2020 最大。

色域也可以有一个名称。比如篮球对阵棒球 温特咖啡杯与大杯咖啡为尺寸命名有助于 进行通信。了解这些色域名称有助于您快速交流 理解各种颜色。

本文回顾了之前的色域。您可以参阅 访问更多色彩和新空间,了解七个全新色域。

人类视觉色域

系统经常将色域与人眼视觉色域进行对比;整个 颜色。HVS 通常用 色度图,如下所示:

<ph type="x-smartling-placeholder">
</ph> 马蹄形中填满了鲜艳的渐变色,中间有一个空心三角形。 <ph type="x-smartling-placeholder">
</ph> 来源:维基百科

最外侧的形状是人类所看到的,内侧的三角形是 rgb() 函数的范围,也称为 sRGB 颜色空间。

如上面所示的三角形,比较色域大小,你能否找到三角形? 。这是业界就色域和 来比较它们

什么是颜色空间?

颜色空间是色域的排列,形成了一种形状和 获取颜色。很多都是简单的 3D 形状,例如立方体或圆柱体。此颜色 排列方式决定了哪些颜色相邻,以及如何 和插值颜色均可。

RGB 类似于矩形颜色空间,其中颜色可通过指定 坐标HSL 是一种圆柱形颜色空间, 其中,颜色通过色调角度和 2 个轴上的坐标访问

<ph type="x-smartling-placeholder">
</ph> 并排展示的是一个半切开的 RGB 立方体和 HSL 圆柱体的切片,展示了颜色是如何以每个空间的形式打包成一个形状的。 <ph type="x-smartling-placeholder">
</ph> https://en.wikipedia.org/wiki/HSL_and_HSV

级别 4 规范引入了 新的颜色空间来查找颜色。这些是 之前可用的聊天室:

色域和颜色空间摘要

颜色空间是颜色的映射,其中色域是一系列颜色。 将色域视为颗粒的总和,将颜色空间视为瓶子 使该范围内的粒子保持在水面上

这是 Alexey Ardov 的交互式图片,演示了 颜色空间。在此演示中,对准、拖动和缩放。更改颜色空间 查看其他空间的可视化图表。

  • 利用色域讨论各种颜色,例如低色域或窄色域 色域与高范围或广色域之间的差别。
  • 利用颜色空间来说明颜色的排列方式,以及用于指定 调整颜色,并通过颜色进行插值。
。 <ph type="x-smartling-placeholder">
</ph> 由多个彩色圆点组成的立方体。
上图是适合 RGB 立方体颜色空间的 sRGB 色域 图片来源

经典颜色空间回顾 {#classic-color-spaces}

CSS 颜色 4 列出了一些新增颜色 适用于 CSS 和颜色的各种功能和工具首先,回顾一下颜色出现之前的 这些新功能

从 21 世纪开始,您已经能够将以下代码用于任何 CSS 属性 接受颜色值:十六进制(十六进制数)、rgb()rgba()、 或使用类似hotpink的关键字 currentColor

2010 年左右,根据您使用的浏览器,CSS 可以使用 hsl() 种颜色。2017 年, 含有 alpha 的十六进制。仅最后一个 最近,hwb()开始获得 。

所有这些经典颜色空间都会参考同一色域 (sRGB) 内的颜色。

HEX

浏览器支持

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

浏览器支持

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

浏览器支持

  • Chrome:1. <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:1. <ph type="x-smartling-placeholder">
  • Safari:3.1. <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

浏览器支持

  • Chrome:101。 <ph type="x-smartling-placeholder">
  • Edge:101。 <ph type="x-smartling-placeholder">
  • Firefox:96。 <ph type="x-smartling-placeholder">
  • Safari:15。 <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 级颜色的文章。

此外,您还可以在网上找到更多读物:

和工具: