在所有主要引擎推出新的 CSS 色域和功能

所有主要引擎現在均支援新的 CSS 色域和函式。瞭解如何讓圖片融入您的設計風格。

Rachel Andrew

CSS 現在支援使用 sRGB gamut 以外的色彩空間。也就是說，您可以使用 HD 高畫質變種色彩，支援 HD (高畫質) 顯示器。這項支援也包含新功能，可有效運用網路上的色彩。

透過 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);
}

瀏覽器支援

  • Chrome：111.
  • Edge：111。
  • Firefox：113。
  • Safari：15。

資料來源

此外，也支援一些函式，可以使用 lch()、lab()、oklch() 和 oklab()，存取 sRGB 以外的色域。

瀏覽器支援

  • Chrome：111.
  • Edge：111。
  • Firefox：113。
  • Safari：15。

資料來源

如要進一步瞭解各種不同的色域，請參閱高畫質 CSS 色彩指南。

color-mix() 函式

除了這些新的顏色空間之外，所有引擎現在都支援 color-mix() 函式。這個函式可用來在任何色彩空間中混合使用一種顏色。在下列 CSS 中，25% 的藍色合併為白色，位於 srgb 色域。

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

瀏覽器支援

  • Chrome：111.
  • Edge：111。
  • Firefox：113。
  • Safari：16.2。

資料來源

進一步瞭解color-mix()

運用這些新功能與色彩空間，讓網路能呈現鮮豔的 HD 高畫質色彩。靈感來源：您可以使用 gradient.style 的 HD 高畫質漸層產生器建立一些美觀的漸層。