六月份，Google 发布了一篇新博客：关于 color() 已被所有主流引擎支持。
以下示例展示了支持的颜色空间
.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);
}
color() 是 CSS 中一个相对较新的颜色函数，提供了一种统一的方式来在任何 RGB 颜色空间中指定颜色值。与 rgb() 等函数相比，函数的优势在于：hsl()color()
-
统一的语法可以访问不同的颜色空间，更加简洁 ✨。
-
如果将来有新的标准颜色色域，只需向函数添加一个新值即可兼容，无需添加新函数 🔄 。
-
对于颜色管理很有帮助，浏览器根据设备颜色色域执行颜色转换 🖥 ️🎨 。
color() 函数的语法如下：
color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);
color() 的值如下
-
颜色空间命名空间 🎨
-
例如：srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 和 xyz-d65. 🌐
-
p1, p2, p3 🎚 ️
-
用于使用的颜色空间的数字或百分比参数值 ⚙️ 一个可选的 alpha 值 🔍
其中 color-space 可以是：
-
srgb：标准 RGB 颜色色域 🌈
-
display-p3：广色域，用于电影和电视 📺
-
a98-rgb：Adobe RGB 颜色色域 🖌 ️
-
prophoto-rgb：ProPhoto RGB 颜色色域 📸
-
rec2020：UHDTV 和其他广色域格式，例如：
-
color(srgb 0 0 1) // sRGB 颜色值 0, 0, 1 🔵
-
color(display-p3 0 0 1) // 显示 P3 蓝色在色域内 🔷
color() 函数可以在 CSS 中任何需要颜色值的地方使用。以下是一些示例：文本颜色：
.text {
color: color(display-p3 0 0 1);
}
背景颜色：
.bg {
background-color: color(prophoto-rgb 0 1 0);
}
渐变颜色：
.gradient {
background: linear-gradient(
to right,
color(display-p3 0 0 1),
color(rec2020 0 1 0)
);
}
填充 SVG 图形：
.icon {
fill: color(a98-rgb 1 0 0);
}
color() 函数主要适用于以下类型的网站和应用：
-
需要广色域和高清晰度颜色的网站：🎥 视频网站，🖼 ️ 产品展示网站，🌟 高清晰度显示网站等。
-
需要颜色管理的网站：🎨 颜色管理网站和需要跨设备颜色一致性的网站。
-
创意和艺术性网站：✨ 设计师可以更有创意地结合其他 CSS 技术，创造出美丽的视觉效果。🎨
-
未来 HDR 显示的网站：🌈
color()为具有更广色域和 HDR 的网站做好准备。因此，总体而言，color()为对颜色敏感且面向未来的网站带来了许多好处，并且是 CSS 中强大的颜色功能 💪 。
