Google在6月份发布了一篇新博客，介绍了CSS中的新颜色空间和函数，支持所有主流引擎。下面是文章的链接：


New CSS color spaces and functions in all major engines


https://web.dev/color-spaces-and-functions/?ref=sidebar

该文章展示了一些支持的色彩空间的例子。

色彩解锁：探索革命性的CSS color()函数和新的色彩空间_颜色空间

color()函数介绍：color()是CSS中相对较新的颜色函数，它提供了一种统一的方式来指定任何RGB颜色空间中的颜色值。与rgb()和hsl()等函数相比，color()函数具有以下优点：

  1. 统一的语法可以访问不同的颜色空间，更简洁。
  2. 如果将来有新的标准色域，只需在函数中添加新值，就可以兼容，无需新增函数。
  3. 有助于实现色彩管理，浏览器可以根据设备色域进行颜色转换。


color()函数的语法如下：color(color-space p1 p2 p3 / A)

其中，color-space是颜色空间的命名空间，p1、p2、p3是用于该颜色空间的参数值，A是可选的透明度值。

color-space可以是以下之一：

  • srgb：标准RGB色域
  • display-p3：广色域，用于电影和电视
  • a98-rgb：Adobe RGB色域
  • prophoto-rgb：ProPhoto RGB色域
  • rec2020：UHDTV和其他广色域格式

color()函数的使用示例：color()函数可以在CSS中的任何需要颜色值的地方使用。以下是一些示例：

  1. 文本颜色：
.text-bg {
  color: color(display-p3 0 0 1);
}


  1. 背景颜色：
.bg-bg {
  background-color: color(prophoto-rgb 0 1 0);
}


  1. 渐变色：
.gradient-bg {
  background: linear-gradient(
    to right,
    color(display-p3 0 0 1),
    color(rec2020 0 1 0)
  );
}


4. 填充SVG图形：

.icon-bg {
  fill: color(a98-rgb 1 0 0);
}


color()函数主要适用于以下类型的网站和应用：

  • 需要广色域和高清颜色的网站，如视频网站、产品展示网站和高清显示网站。
  • 需要色彩管理的网站，如色彩管理网站和需要跨设备色彩一致的网站。
  • 创意和艺术类网站，设计师可以借助color()函数和其他CSS技术创作出令人惊艳的视觉效果。
  • 未来的HDR显示网站，color()函数为网站采用更宽色域和HDR技术做好了准备。

综上所述，color()函数为色彩敏感和未来潮流的网站带来了许多好处，是CSS中一个强大的颜色功能。感谢阅读本文，如果对你有帮助，请点赞和收藏👍。让我们一起在前端的道路上不断前行，共同成长！