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

所有主要引擎現在都支援新的 CSS 色彩空間和函式。瞭解如何為設計增添活力。

CSS 現在支援色域,可讓我們存取 sRGB 色域以外的顏色。也就是說,您可以使用 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 漸層產生器,建立一些精美的漸層。