现在,所有主流引擎都支持新的 CSS 颜色空间和函数。了解它们如何为您的设计注入活力。
CSS 现在支持使用颜色空间,从而访问 sRGB 色域之外的颜色。也就是说,您可以使用高清色域的色彩支持高清显示屏。此支持附带一些新功能,可让您在网络上更好地利用颜色。
通过 CSS 访问颜色空间
我们有很多可用于访问 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);
}
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
还有几个函数也受支持,它们允许使用 lch()
、lab()
、oklch()
和 oklab()
访问 sRGB 以外的颜色空间。
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
您可以在高清 CSS 颜色指南中了解所有这些不同的颜色空间。
color-mix()
函数
除了这些新的颜色空间之外,所有引擎现在还支持 color-mix()
函数。此函数可在任何颜色空间中将一种颜色混合到另一种颜色中。在下面的 CSS 中,25% 的蓝色混合到 srgb 颜色空间中的白色。
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
这些新功能和颜色空间有望为网络带来鲜艳的高清色彩。要寻找灵感,您可以先使用 gradient.style 中的高清渐变生成器创建一些美丽的渐变效果。