Logo

菜单

发布于 2026-01-06 0 阅读
0

CSS颜色终极指南（2020版）

CSS颜色终极指南（2020版）

我知道这篇文章很长，所以我把它分成了几篇短文。如果你想继续阅读这篇文章，可以使用目录跳转到不同的章节：

介绍

网上有很多很棒的文章讲解CSS中的颜色。它们主要讲解RGB、HEX、HSL和命名颜色，并对每一种颜色都进行了详细的描述。既然那些文章都这么好……为什么还要读这篇文章呢？它有什么不同之处？

HTML、CSS 和 Javascript 的魅力之一在于它们处于不断变化和改进的状态：损坏的地方会被修复，新的标准会被添加，旧的标准会被移除……CSS 中的颜色也不例外。

CSS 颜色随着时间的推移经历了许多变化，虽然核心保持不变，但在过去几个月中引入了一些新的变化，这些变化可能会在未来以不同的方式影响 CSS，我们应该了解这一点。

例如：

  • 您使用了逗号分隔的语法rgb(255, 255, 255)……但您是否知道这种语法已被视为旧式语法，今后应使用空格分隔：rgb(255 255 255)？

  • 你知道这些函数rgb()，rgba()但是你知道这些函数是同义词吗？所以你可以用rgb(255, 0, 0, 1)`or`rgba(255, 0, 0)来得到相同的结果。

  • 您可能了解 RGB、HEX 和 HSL 颜色……但您听说过 CSS 中的 HWB、LAB、LCH 或 CMYK 颜色吗？

本文的目的不仅在于回顾 CSS 中颜色的基础知识——CSS -Tricks或DEV上已经有很多类似的优秀文章——而且还在于探索过去几个月中出现的新增内容、格式更改或特殊之处，这些内容已在最新的CSS 颜色模块 4 级编辑器草案中提供。

为了撰写本文，我在以下浏览器上进行了颜色测试：

  • Mac 和 Windows 系统上的 Chrome 和基于 Chromium 的浏览器（Brave、Edge）。
  • Mac 上的 Firefox
  • Mac 上的 Safari 浏览器
  • Windows 系统上的 Edge 浏览器（而非 Chromium 浏览器）。
  • 安卓版 Chrome 浏览器
  • iOS 版 Safari 浏览器

让我们从经典作品开始：

RGB / RGBA

RGB 代表红-绿-蓝。它是一种格式，开发者分别提供红色、绿色和蓝色的值，并且可以有一个可选的 alpha 参数来指示透明度/不透明度（因此称为 RGBA）。

传统上，`color`rgb和rgba`color` 函数的所有参数都用逗号分隔（例如 `color: 0` rgb(255, 0, 0)）；但这种表示法现在被认为是过时的，今后所有颜色函数的参数都将用空格分隔，并且 alpha 值用斜杠 ( /)分隔：

RGB 语法：红色值（0-255 之间的数字或百分比），空格；绿色值（0-255 之间的数字或百分比），空格；蓝色值（0-255 之间的数字或百分比）；可选参数：正斜杠；alpha 值（0-1 之间的数字或百分比）。

/* old notation */
color: rgb(255, 255, 255);
color: rgba(255, 255, 255, 1);

/* new notation */
color: rgb(255 255 255);
color: rgb(255 255 255 / 1);
Enter fullscreen mode Exit fullscreen mode

另一个变化是将 ` rgband`合并rgba为一个单独的函数（rgb），该函数将接受四个参数：三种颜色和一个可选的 alpha 值。`function`rgba将保留，但作为旧版本使用。

颜色值可以是 0 到 255 之间的数字，也可以是 0% 到 100% 之间的百分比（包含 0% 和 100%）。而透明度值可以表示为 0.0 到 1.0 之间的浮点数，也可以表示为 0% 到 100% 之间的百分比。

需要注意的一点是：你可以使用数字或百分比，但不能在同一个函数中同时使用它们rgb。rgba这看似显而易见，但有一个特殊情况可能不太明显：零。在其他属性中，如果值为 0，则
可以省略单位，但颜色函数并非如此：`0 ...rgb(0%, 100%, 100%)rgb(0, 100%, 100%)

考虑到新旧两种表示法（rgb现在支持 alpha 通道，rgba保留为传统表示法），以及可以使用的不同数字/百分比格式，RGB 中有 24 种不同的方式可以表示同一种颜色：

/* cyan/aqua color */
color: rgb(0, 255, 255);
color: rgb(0, 255, 255, 1);
color: rgb(0, 255, 255, 100%);
color: rgb(0%, 100%, 100%);
color: rgb(0%, 100%, 100%, 1);
color: rgb(0%, 100%, 100%, 100%);
color: rgb(0 255 255);
color: rgb(0 255 255 / 1);
color: rgb(0 255 255 / 100%);
color: rgb(0% 100% 100%);
color: rgb(0% 100% 100% / 1);
color: rgb(0% 100% 100% / 100%);
color: rgba(0, 255, 255);
color: rgba(0%, 100%, 100%);
color: rgba(0%, 100%, 100%, 1);
color: rgba(0%, 100%, 100%, 100%);
color: rgba(0, 255, 255, 1);
color: rgba(0, 255, 255, 100%);
color: rgba(0 255 255);
color: rgba(0 255 255 / 1);
color: rgba(0 255 255 / 100%);
color: rgba(0% 100% 100%);
color: rgba(0% 100% 100% / 1);
color: rgba(0% 100% 100% / 100%);
Enter fullscreen mode Exit fullscreen mode

本文测试的所有浏览器都支持上面列出的所有 RGB 和 RGBA 表示法……除了 Windows 上的 Edge 浏览器，它只支持逗号分隔的表示法，rgb有 3 个参数和rgba4 个参数（“经典”表示法）。

六边形

HEX 是 RGB 的一种变体，其中每个参数的值都采用十六进制格式。其语法由井号 (# #) 后跟十六进制值组成，范围从00十进制的 0 到FF十进制的 255：

十六进制语法：哈希 RRGGBB

过去，只有三个十六进制参数：一个代表红色，一个代表绿色，一个代表蓝色。值为 000表示完全没有颜色，而值为1 则FF表示完全有颜色。数值越大，颜色越浅。

可以提供第四个可选的十六进制值来指示透明度：000表示完全透明，1 表示FF完全不透明：

color: #FFFFFF;   /* white */
color: #000000;   /* black */
color: #FF0000;   /* red */
color: #00FF00;   /* bright green (lime, see named colors below) */
color: #0000ff;   /* blue */
color: #800000;   /* darker red */
color: #FF0000FF; /* red (opaque red) */
color: #FF000088; /* semitransparent red */
color: #FF000000; /* transparent (transparent red) */
Enter fullscreen mode Exit fullscreen mode

请注意，CSS 不会区分十六进制值的大小写，所以您可以写成 `1` #ff0000、` #FF00002` 或#Ff0000`3`，它们的效果都一样。为了代码更简洁、更易于维护，请保持一致。

如果每个颜色参数（以及透明度，如果有的话）都具有相同的数字（例如#EE44FF），则可以使用十六进制表示法的简写形式，只需将每个数字输入一次即可：

/* regular hex */
color: #336699;
color: #336699FF;

/* shorthand hex */
color: #369;
color: #369F;
Enter fullscreen mode Exit fullscreen mode

这种简写符号只能用于颜色的“一小部分”子集：16,777,216 种可能组合中的 4,096 种（如果考虑 alpha 值，则为 4,294,967,296 种可能组合中的 65,536 种）。

考虑到所有可能的组合，在“最佳情况下”，一种颜色最多可以用十六进制表示 4 种不同的方式：

color: #336699;
color: #369;
color: #336699FF;
color: #369F;
Enter fullscreen mode Exit fullscreen mode

本文测试的所有浏览器都支持上述所有十六进制表示法……除了 Windows 上的 Edge 浏览器，它只支持不带字母的十六进制值。

高速铁路

HSL 代表色相-饱和度-亮度。在这种格式中，开发者需要指定三个值：

  • 色相：颜色环/色轮中的一个角度（见下图）。
  • 饱和度：颜色的饱和度/亮度级别。100% 的值表示完全饱和的亮色，而较低的值则表示完全不饱和的灰色。
  • 明度：颜色的明暗程度。数值越低，颜色越暗，接近黑色；数值越高，颜色越亮，接近白色。

色环（又称色轮）

HSL的描述

与 RGB 类似，该函数有两个版本：hsl和hsla（带 alpha 通道的 hsl）……就像 RGB 一样，现在hsl和hsla基本上是同义词：hsla被认为是遗留版本，而未来的函数应该是hsl。

此外，“传统”的逗号分隔符表示法已被空格分隔符表示法取代：

HSL 表示法：色相空间、饱和度空间、亮度空间，以及（可选的）斜杠 alpha 通道

HSL 的一大优点是它可以轻松地与 CSS 变量和函数结合使用，calc()从而使用纯 CSS 创建基本的主题功能：

考虑到函数（hsl和hsla）、值格式（数字或度数，或 alpha 的百分比）和分隔符（空格或逗号）的不同组合，在 CSS 中使用 HSL 编写颜色共有 24 种不同的方法：

color: hsl(180, 100%, 50%); 
color: hsl(180, 100%, 50%, 1);  
color: hsl(180, 100%, 50%, 100%);   
color: hsl(180deg, 100%, 50%);  
color: hsl(180deg, 100%, 50%, 1);   
color: hsl(180deg, 100%, 50%, 100%);    
color: hsl(180 100% 50%);   
color: hsl(180 100% 50% / 1);   
color: hsl(180 100% 50% / 100%);    
color: hsl(180deg 100% 50%);    
color: hsl(180deg 100% 50% / 1);    
color: hsl(180deg 100% 50% / 100%); 
color: hsla(180, 100%, 50%);    
color: hsla(180, 100%, 50%, 1); 
color: hsla(180, 100%, 50%, 100%);  
color: hsla(180deg, 100%, 50%);
color: hsla(180deg, 100%, 50%, 1);  
color: hsla(180deg, 100%, 50%, 100%);   
color: hsla(180 100% 50%);  
color: hsla(180 100% 50% / 1);  
color: hsla(180 100% 50% / 100%);   
color: hsla(180deg 100% 50%);   
color: hsla(180deg 100% 50% / 1);
color: hsla(180deg 100% 50% / 100%);
Enter fullscreen mode Exit fullscreen mode

再次强调，所有测试过的浏览器都支持hsl这hsla两种表示法……除了 Windows 上的 Edge 浏览器，它只支持逗号分隔的表示法、hsl带 3 个参数的函数和hsla带 4 个参数的函数。

颜色名称

一些常用颜色都有别名，方便使用和记忆。例如，你不需要知道“红色”#FF0000或rgb(255, 0, 0)“红色色”代表什么，可以直接使用别名red在 CSS 中使用该颜色。

截至撰写本文时，共有 148 种已命名的颜色，其中一些颜色是重复的。例如，aqua和cyan是等效的#00FFFF。

一些颜色示例及其名称、十六进制和 RGB 值

一些颜色名称及其十六进制和RGB等效值

所有颜色名称均不区分大小写（包括下文提到的特殊颜色关键字和系统颜色），这意味着名称的大小写形式无关紧要，它们会被解释为相同的颜色。例如，`a` turquoise、Turquoise`b` 或tUrQuOiSe`c` 都代表同一种颜色。

命名颜色列表随着时间推移而发生变化，将来还会随着新颜色的添加（最后一个添加到列表中的颜色是rebeccapurple（#663399））、别名和删除而发生变化。

特殊颜色关键词

除了颜色名称之外，还有一些其他的“颜色”名称和关键词值得一提：

transparent

有一种颜色实际上并非颜色，而是完全没有颜色。该关键字transparent用作rgba(0, 0, 0, 0)RGB 和 RGBA 的快捷方式，它代表一种完全透明的颜色。

现在这已经无关紧要了，因为所有现代浏览器都支持该transparent关键字，但在过去，这确实需要考虑，因为其中一些浏览器（臭名昭著的 Internet Explorer 和早期版本的 Android 浏览器）不支持该关键字。

currentColor

它表示属性的当前值color。如果未指定，则使用从父容器继承的文本颜色。考虑到这一点，以下 CSS 规则是等效的：

.element {
  color: teal;
  background-color: currentColor;
}

.element {
  color: teal;
  background-color: teal;
}
Enter fullscreen mode Exit fullscreen mode

该currentColor值在与 SVG 一起使用时非常方便。您可以通过指定currentColor填充颜色或描边颜色，使同一个 SVG 图标呈现不同的颜色。

inherit

inherit是一个保留字（不仅限于颜色），表示该属性的计算值与元素父元素的属性的计算值相同。

对于继承属性，其主要用途是覆盖另一条规则（因为该值已经从父级继承）。

系统颜色

最后，还有一些特殊的颜色关键词。它们与某些系统元素相匹配，旨在保持浏览器上各个应用程序之间的颜色一致性。

系统颜色以背景色和前景色“成对”的形式呈现。使用匹配的背景色/前景色非常重要，以避免对比度问题。

下表列出了所有系统颜色及其对应的匹配项：

背景颜色 前景色
buttonFace buttonText
canvas activeText
canvasText
linkText
visitedText
field fieldText
highlight highlightText

还有一种系统颜色没有背景匹配：grayText这种颜色对比度较低（尽管仍然可读），适用于禁用元素……而且，与名称可能传达的信息相反，它可能并不总是灰色。

过去，系统颜色列表要长得多，但其中许多颜色已被弃用。尽管如此，浏览器仍然支持许多旧版颜色，但使用它们可能并非明智之举。

下表按浏览器列出了不同的系统颜色：

按浏览器列出的系统颜色表，包括 Chrome、Edge、Explorer、Firefox、Opera、Safari 和 Tor。

只有 Chrome 和基于 Chromium 内核的浏览器支持所有系统颜色。Edge/IE 和 Safari 仅支持按钮和高亮显示。而 Safari 还支持按钮、高亮显示和字段（均包含前景色和背景色）。

中场休息

这标志着“经典”颜色格式的终结。我指的是那些已经存在一段时间，并且所有浏览器都支持（至少是逗号表示法）的颜色格式。

现在，我们将回顾一些作为CSS 颜色模块 4 级的一部分而引入的新格式。它们不太常见，支持度也较低——或者更准确地说，完全不受支持（至少在撰写本文时是这样）——而且鲜为人知。

但在此之前，我们先来聊聊HTML4中一个有点奇怪的小细节。那是一个略显滑稽的颜色特性，虽然它不再是标准的一部分，但出于兼容性考虑，许多浏览器仍然支持它。

HTML4 的乐趣

注意：bgColor该属性已弃用，不应使用。本节仅供参考，旨在说明哪些做法是错误的。

在早期版本的 HTML 中，曾经有一个名为 `background-color` 的属性，允许设置不同标签和元素（例如 `<div>`或 `<span> `）bgColor的背景颜色：<body><table>

<body bgColor="skyblue">
  ...
</body>
Enter fullscreen mode Exit fullscreen mode

该值原本bgColor应该是帖子中指定的任意颜色值，但实际上它接受任何值。这意味着任何字符串都会被考虑和解析……这也导致了Stack Overflow 上关于 HTML 最有趣的问题之一。

正如Sam在 2004 年的这篇文章中详细解释的那样，当浏览器尝试将字符串解析为颜色时（这是从 Netscape 继承而来的行为），就会发生这种情况。其基本原理是将字符串分成三个等长的部分，并用零填充缺失或错误的字符。

此图展示了其工作原理的简化版本（更多详情请参阅博客文章）：

图示说明背景颜色的工作原理

这里你可以看到它是如何运作的（再次提醒，请勿这样做）：

现在我们已经愉快地体验了一番色彩的乐趣，接下来我们将回顾CSS 颜色模块 4 级中新增的颜色格式和功能。

HWB

警告：此颜色格式目前尚未得到广泛支持。请谨慎使用，并避免在生产环境中依赖此格式。

HWB 代表色相-白度-黑度，它是一种接近 HSL 的颜色格式，但通常被认为更容易被人类理解和使用。

HWB参数代表以下含义：

  • 色相：颜色环/色轮中的一个角度。
  • 白度：表示混入颜色中的白色比例的百分比。数值越高，颜色越纯净/越白。
  • 黑度：表示混合的黑色颜料的百分比。数值越高，颜色越深/越黑。

通过色轮和三角形展示不同颜色，说明如何计算白平衡（HWB），颜色值从 0% 到 100% 分别对应不同的白度和暗度值。

由于这是一个新的颜色函数，它默认使用空格分隔的表示法，而没有逗号分隔的表示法（也不是 hwba）。这是唯一可以使用的语法：

HWB 语法：色调值（数值或度数）、空格、白度（百分比）、空格、黑度（百分比），以及可选的斜杠和透明度（数值或百分比）。

如果白色和黑色的值加起来为 100%（归一化后），则颜色将是无彩色：一种没有任何原始色调值的灰色。

这种简单的语法允许用 6 种不同的组合来表示同一种颜色：

color: hwb(180 0% 0%);
color: hwb(180 0% 0% / 1);  
color: hwb(180 0% 0% / 100%);
color: hwb(180deg 0% 0%);
color: hwb(180deg 0% 0% / 1);
color: hwb(180deg 0% 0% / 100%);
Enter fullscreen mode Exit fullscreen mode

所有测试过的浏览器均不支持该hwb()功能。

实验室

警告：此颜色格式目前尚未得到广泛支持。请谨慎使用，并避免在生产环境中依赖此格式。

CIELAB 色彩空间（有时写作 CIE L*a*b* 或简称Lab ）由CIE于 1976 年根据人类视觉实验定义，代表了人类可以看到的颜色范围。

实验室颜色用三个值表示：

  • 明度：从黑色到白色。数值越低，颜色越暗（越接近黑色）。
  • a*：颜色从绿色到红色。数值越低越接近绿色，数值越高越接近红色。
  • b*：颜色从蓝色到黄色。数值越低代表蓝色，数值越高代表黄色。

Lab 函数的语法如下：

实验室语法：亮度以百分比表示。A轴，介于-160和160之间的数值。B轴，介于-160和160之间的数值。可选参数：Alpha值，数值或百分比。

亮度值可以是任何百分比，不限于 0% 和 100%：如果该值低于 0%（黑色），则会被限制为 0%，但可以高于 100%（白色），这在某些系统中代表超亮的白色。

a* 和 b* 的值可以是任意数字，但通常介于 -160 到 160 之间。最后，还有一个可选的 alpha 值，它是所有颜色函数通用的。所有参数之间用空格分隔（新表示法），alpha 值之间用斜杠分隔。

考虑到所有可能的值和格式，同一种颜色在 Lab 中可以用三种不同的方式表示：

color: lab(67.5345% -8.6911 -41.6019);
color: lab(67.5345% -8.6911 -41.6019 / 1);
color: lab(67.5345% -8.6911 -41.6019 / 100%);
Enter fullscreen mode Exit fullscreen mode

截至撰写本文时，没有任何浏览器支持该lab()功能。

肝细胞癌

警告：此颜色格式目前尚未得到广泛支持。请谨慎使用，并避免在生产环境中依赖此格式。

LCH代表亮度-色度-色调。它与 Lab 相关（具有相同的 L 值），但它不使用 a* 和 b* 坐标，而是使用 C（色度）和 H（色调）。

尽管LCH和HSL都包含两个字母（亮度和色调），但区分它们很重要，需要明确的是HSL中的L与LCH中的L并不相同。此外，即使HSL和LCH中色调的解释相似，它们的角度映射方式也不同。

这是该函数的语法lch()：

LCH 语法

如上所述，亮度值与 Lab 色彩空间中的亮度值类似。色度值可以取任何数值，但实际上，最小有效值为 0，最大有效值为 230。

第三个参数是色调角度，可以用数字或角度（以度为单位）表示；第四个参数（可选）是透明度（alpha）。这是一个新增函数，因此其语法将遵循空格分隔的表示法（透明度用斜杠表示）。

颜色可以用六种不同的方式表示lch()：

color: lch(67.5345% 42.5 258.2);
color: lch(67.5345% 42.5 258.2 / 1);
color: lch(67.5345% 42.5 258.2 / 100%);
color: lch(67.5345% 42.5 258.2deg);
color: lch(67.5345% 42.5 258.2deg / 1);
color: lch(67.5345% 42.5 258.2deg / 100%);
Enter fullscreen mode Exit fullscreen mode

所有测试的浏览器均不支持lch()颜色功能。

CMYK

警告：此颜色格式目前尚未得到广泛支持。请谨慎使用，并避免在生产环境中依赖此格式。

虽然屏幕通常以RGB颜色模式显示颜色，但其他设备则以不同的方式表示颜色。例如，打印机通常使用青色、品红色、黄色和黑色的组合来表示颜色，因为这些是最常用的墨水颜色。

CMYK 代表青色 (Cyan)、品红色 (Magenta)、黄色 (Yellow) 和黑色 (Key)，与打印机中的油墨颜色相对应（黑色为关键色）。如果最终目标是将内容打印出来，那么 CMYK 可能是一个不错的选择（因为它能更好地匹配颜色混合）。

指定CMYK格式的功能cmyk()与预期不符，但device-cmyk()它定义的是与设备相关的 CMYK 颜色：

device-cmyk 函数语法：青色（数字或百分比）。空格。品红色（数字或百分比）。空格。黄色（数字或百分比）。空格。黑色（数字或百分比）。可选：斜杠。alpha（数字或百分比）。可选：逗号和任意格式的备用颜色。

与之前的颜色函数一样，由于它是新发布的，因此仅支持新的空格分隔表示法。但它cmyk()与其他颜色函数的不同之处在于：它允许添加一个可选的备用颜色，以防指定的 CMYK 颜色无效。

考虑到可以使用数字或百分比——记住，它们不能组合使用，所有参数只能二选一——，以及包含 alpha 通道和备用方案，CMYK 格式中同一种颜色有 12 种组合：

color: device-cmyk(1 0 0 0);
color: device-cmyk(1 0 0 0 / 1);
color: device-cmyk(1 0 0 0 / 100%);
color: device-cmyk(1 0 0 0, #00FFFF);
color: device-cmyk(1 0 0 0 / 1, #00FFFF);
color: device-cmyk(1 0 0 0 / 100%, #00FFFF);
color: device-cmyk(100% 0% 0% 0%);
color: device-cmyk(100% 0% 0% 0% / 1);  
color: device-cmyk(100% 0% 0% 0% / 100%);   
color: device-cmyk(100% 0% 0% 0%, #00FFFF); 
color: device-cmyk(100% 0% 0% 0% / 1, #00FFFF); 
color: device-cmyk(100% 0% 0% 0% / 100%, #00FFFF);
Enter fullscreen mode Exit fullscreen mode

有趣的是，在 Mac 电脑上选择颜色输入值时，菜单还会提供在设备 CMYK 模式下选择颜色的选项：

Mac 上的 CMYK 颜色选择器

功能color()​

警告：此功能目前尚未得到广泛支持。请谨慎使用，并避免在生产环境中依赖此功能。

该color()函数允许在特定的色彩空间中定义颜色。它接受一个以逗号分隔的颜色列表作为参数（这些颜色可以来自不同的色彩空间），最后一个颜色（这次可以是任何类型）将作为备用颜色。

与之前的语法相比，它的语法可能看起来比较复杂，但我们很快就会看到，它其实比看起来要简单得多：

颜色函数的语法比看起来要简单得多。

该函数的参数color()如下：

  1. 色彩空间标识符：这是一个可选字符串，用于标识函数中使用的色彩空间（请参阅下文了解一些预定义的色彩空间）。如果未提供，srgb则使用默认值。

  2. 接下来是以下其中之一：

    • 一个或多个数值（可以是数字或百分比），这些数值将与指定颜色空间中参数的值相匹配。或者，
    • 指定颜色空间中定义的颜色名称字符串。并非所有颜色都有字符串名称。

  3. Alpha 值：我们在其他颜色函数中已经见过这个值，它表示颜色的不透明度，这是一个可选值，可以是数字或百分比。

  4. 备用值：CSS 中任何可用格式的可选颜色值。

您可能已经注意到，从颜色空间到 alpha 通道（步骤 1-3）都用括号括起来，这意味着我们可以有多种颜色，这些颜色之间用逗号分隔。

该函数可以使用五种预定义的色彩空间color()。我们将对每种色彩空间进行简要描述，而不赘述细节：

  • a98-rgb：兼容 Adob​​e® 98 RGB（因此得名）。它是摄影中常用的色彩空间。
  • display-p3：大多数电视、现代显示器和电脑/笔记本电脑屏幕都支持，可以显示所有（或几乎所有）display-p3颜色。
  • prophoto-rgb：常用于数码摄影中图像的主版本。
  • Rec2020：这种色彩空间被摄影师和广播行业使用——它是高清、4K 和 8K 电视的标准。
  • srgb：CSS 的默认颜色空间。其结果等同于使用该rgb()函数。

所有这些色彩空间都接受三个参数，分别对应于红色、绿色和蓝色，其值介于 0 到 1 之间，或介于 0% 到 100% 之间。较低的值表示缺少该颜色，而 1 或 100% 的值则表示完全应用了该颜色。

color()以下是一些使用不同颜色空间、透明度和备用颜色组合的函数示例：

color: color(a98-rgb 0.44091 0.49971 0.37408);
color: color(display-p3 0.25 0.12 0.45);
color: color(prophoto-rgb 0.36589 0.41717 0.31333);
color: color(rec2020 0.534 0.123 0.121 / 1);
color: color(srgb 100% 0% 0%, #F00);
color: color(srgb 1 0 0, srgb 0.865 0.417 0.333, #F00);
Enter fullscreen mode Exit fullscreen mode

结论

哇！这应该是我最近写过的最长的文章了。如果你读到了这里，谢谢你的阅读！

文章中包含以下内容：

  • 见过“经典”颜色（HEX、RGB、HSL 和命名颜色）
  • 探索了新定义的函数（HWB、Lab、LCH、CMYC 和color()）
  • 审查了该函数新的空格分隔语法。
  • 我查了一下，CSS 中同一种颜色竟然有大约 100 种不同的表示方法（还不包括无数种备用方案！）

而这一切可能会引发人们提出以下几个问题：

我应该使用哪种颜色格式？

这是一个价值百万美元的问题，而且没有明确的答案：一些开发者会说：“使用字符数最少的格式”，另一些开发者会说：“坚持使用十六进制，因为它效率更高”，还有更多人会反问：“但是透明度怎么办？ ”……

仅仅因为格式更短就合并它们？这听起来是个糟糕的主意，因为这会降低代码的可维护性。这一切又是为了什么呢？仅仅为了在一个 20KB 的文件中节省 100 个字符吗？

选择支持透明度/Alpha通道的格式，却始终将透明度值设为1？这似乎有点多余。而忽略支持Alpha通道的格式，转而使用其他方法应用透明度？这可能会产生一些不良的副作用。

考虑到现在大多数颜色函数都支持 alpha 通道，上面段落中的问题可能已经过时了，但仍然有一些浏览器可能不支持这些功能。

最好的建议是：想想你想用颜色做什么，然后选择更适合你具体情况的格式。

CSS颜色的下一步发展方向是什么？

CSS颜色定义将会发生很多变化。会添加新的函数，也会移除一些函数……有些函数甚至在我们能够使用它们之前就会被添加然后移除（例如该gray()函数）。

颜色、属性或参数也是如此。正如上文所述，Web 标准的魅力之一在于它们是动态的，并且不断变化以适应和改善用户体验。

我们可能会看到新的颜色函数不断涌现（hsv()？），即使它们本可以作为color()现有函数的一部分得到支持。不过，我们还是循序渐进吧，并期待浏览器能提供更多支持。

文章来源：https://dev.to/alvaromontoro/the-ultimate-guide-to-css-colors-2020-edition-1bh1
我的新个人网站！
什么是 Kubernetes HP...