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

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

Rachel Andrew

慶祝消息： 這項網頁功能現已支援所有三個主要瀏覽器引擎！

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

瀏覽器支援

• 111
• 111
• 113
• 15

資料來源

系統也支援多個函式，可使用 lch()、lab()、oklch() 和 oklab() 存取 sRGB 以外的色彩空間。

瀏覽器支援

• 111
• 111
• 113
• 15

資料來源

如要瞭解所有不同的色彩空間，請參閱 高解析度 CSS 色彩指南。

color-mix() 函式

除了這些新色彩空間之外，所有引擎現在都支援 color-mix() 函式。這個函式可在任何色彩空間中，將一種顏色混合到另一種顏色。在下列 CSS 中，25% 的藍色會混合至 srgb 色彩空間中的白色。

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

瀏覽器支援

• 111
• 111
• 113
• 16.2

資料來源

進一步瞭解color-mix()

這些新函式和色彩空間可為網頁帶來鮮豔的 HD 色彩。如要尋找靈感，請先使用 gradient.style 中的 HD 漸層產生器，建立一些精美的漸層。