color()
CSS color() 函数允许在浏览器中显示任何的颜色空间的颜色，例如 P3 颜色空间，它可以显示默认颜色空间 sRGB 之外的颜色。
语法为：
color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);
color(颜色空间 颜色数值 / 透明度);
支持的颜色空间包括下面这些：
- display-p3
- srgb
- rec2020
- prophoto-rgb
- srgb-linear
- a98-rgb
.color1 {
color: color(display-p3 1 0.5 0);
}
.color2 {
color: color(rec2020 0.42053 0.979780 0.00579);
}
.color3 {
color: color(xyz-d50 0.2005 0.14089 0.4472);
}
.color4 {
color: color(srgb 0.691 0.139 0.259);
}
.color5 {
color: color(prophoto-rgb 0.691 0.139 0.259);
}
除了浏览器内置的这些经典的颜色空间，还可以使用 @color-profile 规则（用来定义并命名一个颜色配置，稍后可以在 color() 函数中使用它来指定颜色）实现自己的颜色空间。
@color-profile --swop5c {
src: url("https://example.org/SWOP2006_Coated5v2.icc");
}
.header {
background-color: color(--swop5c 0% 70% 20% 0%);
}
color-gamut
色域 color-gamut CSS 媒体功能用于根据用户代理和输出设备支持的大致色域范围来应用 CSS 样式。
可以使用此媒体功能检测对特定颜色空间的支持，例如：
@media (color-gamut: srgb) {
p {
background: #f5f3f9;
}
}
色域的值被指定为以下关键字值之一：
- srgb - 用户代理和输出设备可以支持大约 sRGB 的色域值或更多。这包括绝大多数彩色显示器。
- p3 - 用户代理和输出设备可以支持大约由 Display P3 颜色空间指定的色域或更多。P3 色域大于并包括 sRGB 色域。
- rec2020 - 用户代理和输出设备可以支持大约由 ITU-R Recommendation BT.2020 色彩空间指定的色域或更多。rec2020 色域大于并包括 P3 色域。
color-mix()
color-mix() 函数可以让两个颜色进行指定比例的混合，并返回将它们在给定颜色空间中按给定数量混合的结果。
语法为：
color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);
我们日常开发，就使用 in srgb 默认颜色空间就可以了，最常用，上手成本低。
