将颜色提升到新的 (CSS) 级别

“CSS4”将为网页设计师和开发者提供更明亮的色彩。与父选择器类似，即将推出的CSS 4 级颜色提案最初是在 Safari 浏览器中实现的。但在深入了解细节之前，我们先要明确一点，“CSS4”并不存在。感谢 Temani @afif指出这一点，也感谢@grahamthedev建议使用这个新标题！

CSS 没有版本号

我在 CSS-Tricks.com 上添加了一个关于“CSS4”讨论的链接。当然，严格意义上来说，根本就不存在“CSS4”，就像根本就不存在“MPEG 3”（MP3）或“Web3”一样。但正如@ppk和其他人所说，“CSS4”或许有助于让CSS更流行。另一方面，我最近对所谓的“Web3”讨论感到很不满，这启发了@hidde发表他那篇精彩的文章：网络没有版本号。

更明亮的色彩空间

回顾旧的调色板，例如 IBM CGA、Commodore 64 和带有“仅Web 颜色”复选框的 Adob​​e Photoshop 颜色选择器，可以使用 6 位（甚至 8 位）十六进制代码从超过 1600 万种 RGB 颜色中进行选择，网页设计师可能会认为他们拥有了世界上所有的颜色。

但是，尽管我们的浏览器中已经有数百万种颜色，但却缺少最鲜艳的颜色！

借助新的颜色函数，我们可以使用color(display-p3)、以及lab()和lch()超越 sRGB 颜色空间。

以前可用的语法在 sRGB 颜色空间中定义颜色。（命名颜色、十六进制颜色、rgb()甚至hsl()颜色符号在 CSS3 之前都仅限于 sRGB 颜色空间）。

.srgb-color-syntax {
  background-color: wheat;
  border-color: #ffea21;
  color: rgba(12, 200, 128, 0.2);
  text-decoration-color: hsl(0 100% 50% / 0.5);
}

.wide-gamut-color-syntax {
  background-color: lab(80% 100 50);
  border-color: lch(80% 100 50);
  color: color(display-p3 1 0.5 0);
}

Display-P3色彩空间是 sRGB 的超集。它比 sRGB 大约大 50%，包含迄今为止在 CSS 中无法定义的非常明亮和丰富多彩的值。

https://www.smashingmagazine.com/2021/11/guide-modern-css-colors/

如何使用 CCS4 P3 颜色

我们将如何使用新颜色？

如何使用颜色语法？

那么，我们如何使用旧的呢？虽然我可以修改现有的 RGB 颜色，并且对加色混合和十六进制数有粗略的了解，但我不会从头开始使用十六进制颜色符号。

感谢@yutamago指出，单个“f”表示“十五”（这比我之前写错的更容易记住），但实际上它只是十六进制数的最右边一位数字。我的实用方法是过度简化实际值：在这个例子中，“f”是“ff”的缩写，ff 是十六进制表示的 255，它是可以存储为 16 位值的最高无符号整数。

但你明白我的意思：这些价值观不应该由人类在不使用工具的情况下读取和写入。

我更喜欢在演示和调试时使用命名颜色。否则，就像在前端 Web 项目中一样，我会使用颜色选择器或复制从设计师那里获得的颜色值。

然后，我会使用自定义属性或 SCSS 变量定义常用颜色，这样我就不必为每个后续页面或组件烦恼。

:root {
  --brand-background: #4081c3;
  --brand-primary: color(display-p3 1 0.5 0);
}

或者在 SCSS 中

$brand-background: #4081c3;
$brand-primary: color(display-p3 1 0.5 0);

现在，我们可以像在 Web 开发中使用其他颜色一样使用这些新颜色。唯一的区别在于，它带来了一项重大改进：现在我们可以为客户交付色彩更鲜艳、更美观的网站！

注：本文最初以英式英语（more, and more colourful, web colours）发表，德语版本则以mehr und buntere Webfarben发表。现已由 medium和Tealfeed转载。

查看我的DEV 博客系列 CSS 的下一步，了解有关新的和改进的样式表功能的更多丰富多彩、富有创意和技术性的见解。