所有主要引擎現在都支援新的 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);
}
系統也支援多個函式,可使用 lch()
、lab()
、oklch()
和 oklab()
存取 sRGB 以外的色彩空間。
如要瞭解所有不同的色彩空間,請參閱 高解析度 CSS 色彩指南。
color-mix()
函式
除了這些新色彩空間之外,所有引擎現在都支援 color-mix()
函式。這個函式可在任何色彩空間中,將一種顏色混合到另一種顏色。在下列 CSS 中,25% 的藍色會混合至 srgb 色彩空間中的白色。
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
這些新函式和色彩空間可為網頁帶來鮮豔的 HD 色彩。如要尋找靈感,請先使用 gradient.style 中的 HD 漸層產生器,建立一些精美的漸層。