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

所有主要引擎現在都支援新的 CSS 色域和函式。瞭解如何讓您的設計更為鮮豔。

Rachel Andrew
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 中，srgb 色彩空間中有 25% 的藍色混合為白色。

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

瀏覽器支援

  • 111
  • 111
  • 113
  • 16.2

來源

進一步瞭解 color-mix()

這些新功能和色域保證為網路帶來鮮明的 HD 高畫質色彩。這時，請使用 gradient.style 的 HD 高畫質漸層產生器，先建立一些精美的漸層，並從中汲取靈感。