所有主流引擎均已支持新的 CSS 颜色空间和函数
使用收藏集保持井井有条根据您的偏好保存内容并进行分类。

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

Rachel Andrew

CSS 现在支持颜色空间，使我们能够访问 sRGB 色域之外的颜色。这意味着您可以使用高清色域中的颜色来支持高清（高清晰度）显示器。此支持附带了新的函数，可以更好地利用 Web 上的颜色。

从 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);
}

浏览器支持

来源

还支持一些函数，允许使用 lch()、lab()、oklch() 和 oklab() 访问 sRGB 以外的颜色空间。

浏览器支持

来源

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

`color-mix()` 函数

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

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

浏览器支持

来源

了解有关 color-mix() 的更多信息

这些新函数和颜色空间有望为 Web 带来鲜艳的高清色彩。为了获得灵感，首先使用 gradient.style 上的高清渐变生成器创建一些漂亮的渐变。

所有主流引擎均已支持新的 CSS 颜色空间和函数 使用收藏集保持井井有条 根据您的偏好保存内容并进行分类。

从 CSS 访问颜色空间

color-mix() 函数

所有主流引擎均已支持新的 CSS 颜色空间和函数
使用收藏集保持井井有条根据您的偏好保存内容并进行分类。

`color-mix()` 函数