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

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

CSS 现在支持颜色空间,让我们能够访问 sRGB 色域之外的颜色。这意味着,您可以使用 HD 色域中的颜色来支持 HD(高清)显示屏。此支持还附带一些新功能,可让您更好地在 Web 上使用颜色。

我们已经有许多函数可用于访问 sRGB 色域内的颜色,例如 rgb()hsl()hwb()。现在,浏览器支持 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);
}

浏览器支持

  • Chrome:111.
  • Edge:111.
  • Firefox:113.
  • Safari:15.

来源

还支持使用 lch()lab()oklch()oklab() 访问 sRGB 以外的颜色空间的多个函数。

浏览器支持

  • Chrome:111.
  • Edge:111.
  • Firefox:113.
  • Safari:15.

来源

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

color-mix() 函数

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

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

浏览器支持

  • Chrome:111.
  • Edge:111.
  • Firefox:113.
  • Safari:16.2。

来源

详细了解color-mix()

这些新函数和颜色空间有望为 Web 带来鲜艳的 HD 色彩。如需获取灵感,请先前往 gradient.style 使用高清渐变生成器创建一些漂亮的渐变效果。