所有主要引擎中均支持新的 CSS 颜色空间和函数

现在,所有主流引擎都支持新的 CSS 颜色空间和函数。了解它们如何能为您的设计注入活力。

CSS 现在支持颜色空间,让我们能够访问 sRGB 色域之外的颜色。这意味着,您可以支持高清显示屏,使用高清色域中的颜色。这项支持包含一些新功能,可让您在网页上更好地利用颜色。

通过 CSS 访问颜色空间

我们已经有一些函数(rgb()hsl()hwb())允许我们访问 sRGB 色域内的颜色。浏览器现在支持 color() 函数,这是一种访问任何 RGB 颜色空间中的颜色的标准化方式。包括 sRGB、Display P3 和 Rec2020。您可以查看以下 CSS 中的一些示例:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

浏览器支持

  • 111
  • 111
  • 113
  • 15

来源

此外,系统还支持多个函数,这些函数允许使用 lch()lab()oklch()oklab() 访问 sRGB 以外的颜色空间。

浏览器支持

  • 111
  • 111
  • 113
  • 15

来源

您可以在高清 CSS 颜色指南中了解所有这些不同的颜色空间。

color-mix() 函数

除了这些新的颜色空间之外,所有引擎现在都支持 color-mix() 函数。此函数允许在任何颜色空间中将一种颜色混合到另一种颜色。在以下 CSS 中,在 srgb 颜色空间中,25% 的蓝色混合到了白色中。

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

浏览器支持

  • 111
  • 111
  • 113
  • 16.2

来源

详细了解 color-mix()

这些新的功能和颜色空间有望为网页带来鲜艳的高清色彩。如需灵感,您可以首先使用 HD 渐变生成器(网址为 gradient.style)制作一些精美的渐变效果。

全新可互操作系列课程的一部分