CSS color-mix()

Adam Argyle
Adam Argyle

CSS color-mix() 函式可讓您直接在 CSS 中混用任何支援的色域。

瀏覽器支援

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

資料來源

color-mix()前,開發人員曾使用 CSS 預先處理工具 calc() (顏色) 頻道。

使用 SCSS 前的注意事項
.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass 做得很好 都會超越顏色 CSS 規格不過 在 CSS 中結合多種顏色的運用方式如要接近目標 顏色值。以下舉例說明 CSS 模擬現今的混合情形:

HSL 使用前
.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() 會將 並能將顏色融入 CSS開發人員可以選擇混合使用的顏色空間 以及每種顏色在混音中的比例

使用後
.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

這正是我們需要的具有彈性、功能強大且功能完善的 API。我喜歡!

在 CSS 中混用顏色

CSS 存在於多個色域和色域世界, 但不一定要指定混色的色彩空間。此外 色彩空間會大幅改變混合效果的結果,所以瞭解 的色彩空間將協助您取得需要的結果。

如需互動式簡介,請使用這個 color-mix() 工具: - 探索各個色域的效果。 - 瞭解色調內插在混合使用圓柱顏色時的效果 空格 (lchoklchhslhwb)。 - 按一下兩個顏色方塊上的任一個,以變更混色的顏色。 - 使用滑桿變更混合比例。 - 產生的 color-mix() CSS 程式碼會顯示在底部。

各式各樣的色彩空間

混合 (和漸層) 的預設色域為 oklab。這項服務提供 一致的結果您也可以指定替代色彩空間,藉此打造個人化的 選擇符合需求的方案

blackwhite 為例,他們組合的色彩空間不會改變 最大的差異是什麼?不是,

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);
7 個色域 (srgb、Linear-srgb、lch、oklch、lab、oklab、xyz) 的每塊色空間都顯示黑白的混合結果。圖中大約有 5 種不同的陰影,證明每個色域甚至會以不同方式混成灰色。
體驗示範內容

它的確很有影響力!

bluewhite 為例,這是另一個範例。我之所以選擇此選項 這種情況下,色彩空間的形狀可能會影響結果。在這個案例中 而且大部分色彩空間都會在從白色到藍色時變成紫色。這項服務 同時顯示 oklab 是如何這種可靠的混合色彩空間,在 最接近多數人對混合白色和藍色 (無紫色) 的期望。

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);
7 個色域 (srgb、Linear-srgb、lch、oklch、lab、oklab 和 xyz) 各有不同的結果。其中許多是粉紅色或紫色,但有些仍為藍色。
體驗示範內容

透過 color-mix() 學習色域的效果,是相當擅長的知識 產生梯度 。Color 4 語法也允許漸層指定色域,其中 漸層會顯示空間區域內的混合情形。

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}
各種色域中的黑白漸層。
體驗示範內容

如果你想知道哪個色域是「最佳」說明中心沒有廣告這就是原因 選擇非常多種!同樣地,新的色域 發明者 (請參閱 oklchoklab) 是「最佳」的發明。每種顏色 可為太空增添獨特時刻 並成為最理想的選擇

舉例來說,如果您希望系統呈現動態混音效果,請使用 hsl 或 hwb。在下列項目中 示範,兩種鮮豔的顏色 (洋紅色和檸檬) 結合在一起,同時有 HD 和 hwb 兩者都會產生鮮豔的成果,srgb 和 oklab 則會產生不飽和的色彩。

如上一段所述混合結果。
體驗示範

如要維持一致性和細微,請使用 oklab。在下列範例中 藍色和黑色、水管和雙翼機製成,色彩鮮豔、色調轉折 srgb 和 oklab 會產生較深的藍色。

如上一段所述混合結果。
體驗示範

花五分鐘使用 color-mix() Playground,測試不同顏色 開始體會這些空間的優勢。其他 大家都會適應調整 發掘更多潛在功能

調整色調內插方法

如果選擇混用圓柱型色彩空間,基本上就是所有顏色 空間 (具有接受角度的 h 色調管道),您可以指定是否 內插類型為 shorterlongerdecreasingincreasing。這是 請參閱 HD 高畫質指南一文,瞭解更多相關資訊。

這是一個藍到白混的範例, 具有不同色調內插方式的圓柱空間。

如上一段所述混合結果。
體驗示範

接下來是我為了呈現色調內插法而製作的另一個 Codepen 特別適合用於漸層我相信這可以幫助您瞭解 不過,如果指定色相內插類型,色彩空間就會產生混合結果 動起來吧!

混用各種顏色語法

目前我們大部分都使用了 CSS 命名顏色,例如 bluewhite。CSS 顏色 系統已經準備好混合來自兩個不同色域的顏色。這是 另一項好處則是指定混合的色彩空間 兩個顏色不在同一空間時,共用空間將顯示一般空間。

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

在上一個範例中,hsldisplay-p3 會轉換為 oklch 然後再混合使用極為酷炫,可靈活運用。

調整混合比例

混合想要每種顏色的某些部分時 就像目前為止看到的大多數範例好消息! 說明每種顏色在產生的組合中應呈現的比例。

為開始這個主題,以下是相同 (且依據規格) 的混合範例:

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

我發現這些例子能充分闡述各種極端案例。第一組 範例顯示如何不強制規定 50%,但也可視需要指定。最近 其中,如果加入比例超過 100% 時,這個例子看起來很有趣 兩者所含的大小相同

另請注意,如果只有一個顏色指定比例,則其他顏色會假設為 餘數則設為 100%我們再舉幾個例子說明這一點 行為

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

以下範例說明兩項規則: 1.當比例超過 100% 時,系統就會平均分配比例並平均分配比例。 1. 如果只提供一個比例,另一個顏色會設為 100 減去該比例。

最後一項規則比較不清楚如果提供百分比 兩種顏色的數量加總起來不到 100%?

color-mix(in lch, purple 20%, plum 20%)

結合運用 color-mix() 可以達到資訊公開,40% 則可公開透明。 如果比例總和不等於 100%,產生的組合就不會是不透明。 這兩種顏色都不會完全混亂。

建立巢狀 color-mix()

如同所有的 CSS,系統會照常處理巢狀結構。內部函式將 必須先解析其值,並將值傳回父項結構定義。

color-mix(in lch, purple 40%, color-mix(plum, white))

您可以視需要建立多個巢狀結構,以獲得您想要的結果。

建立淺色和深色的色彩配置

開始使用 color-mix() 建構色彩配置吧!

基本色彩配置

下列 CSS 是根據品牌十六進位 (十六進位) 建立淺色和深色主題 顏色。淺色主題會建立兩個深藍色文字顏色和一個淺白色 背景表面顏色。接著在深色偏好設定媒體查詢中 屬性會指派新顏色,讓背景變暗並增加文字顏色 是輕。

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

而混合白色或黑色調配上品牌顏色,就能完成上述所有操作。

中間色配置

您還可以加入更多淺色和深色主題,可以進一步提升成效。於 下列示範,變更圓形按鈕群組時,系統會更新 HTML 中的屬性 [color-scheme="auto"] 標記,讓選取器能夠有條件地套用 套用顏色主題

本中間示範也展示了色彩主題設定技巧 主題顏色列於 :root 中。這樣他們就能輕鬆查看所有資訊 並視需要調整。稍後在樣式表中,您可以 如此一來,您就不需要透過樣式表搜尋色彩操控了, 均包含在初始 :root 區塊中。

更多有趣的應用實例

Ana Tudor 透過一些應用實例建立了優質的示範內容 研究:

使用開發人員工具對 color-mix() 進行偵錯

Chrome 開發人員工具為 color-mix() 提供了完善的支援。AI 可辨識並 醒目顯示語法,並在 「Styles」窗格可讓您選擇替代顏色。

開發人員工具中的程式碼如下所示:

Chrome 開發人員工具檢查顏色混合語法的螢幕截圖。

祝你們這些混音愉快!