此页面由 Cloud Translation API 翻译。

高清 CSS 颜色指南

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

Adam Argyle

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

最常用的颜色格式（按出现次数百分比排序）。 — </ph> https://almanac.httparchive.org/en/2022/css#colors

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

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

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

</ph>

</ph> 一系列图片在宽色和窄色之间切换色域，说明色彩鲜明度及其效果。
亲自试用

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

概览

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

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

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

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

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

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

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

什么是色域？

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

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

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

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

人类视觉色域

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

马蹄形中填满了鲜艳的渐变色，中间有一个空心三角形。 — </ph> 来源：维基百科

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

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

什么是颜色空间？

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

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

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

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

色域和颜色空间摘要

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

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

利用色域讨论各种颜色，例如低色域或窄色域色域与高范围或广色域之间的差别。
利用颜色空间来说明颜色的排列方式，以及用于指定调整颜色，并通过颜色进行插值。

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

由多个彩色圆点组成的立方体。 — 上图是适合 RGB 立方体颜色空间的 sRGB 色域图片来源

经典颜色空间回顾 {#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 级颜色的文章。

此外，您还可以在网上找到更多读物：

和工具：