CSS color-mix() 函數

定義和用法

CSS 的 color-mix() 函數用于在給定的顏色空間中按指定比例混合兩種顏色值。

實例

例子 1

在 hsl 顏色空間中按指定比例混合兩種顏色值：

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}

親自試一試

例子 2

在 oklab 顏色空間中按不同比例混合兩種顏色值：

li:nth-child(1) {
  background-color: color-mix(in oklab, #6a5acd 0%, pink);
}
li:nth-child(2) {
  background-color: color-mix(in oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
  background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
  background-color: color-mix(in oklab, #6a5acd 75%, pink);
}
li:nth-child(5) {
  background-color: color-mix(in oklab, #6a5acd 100%, pink);
}

親自試一試

CSS 語法

color-mix(color-interpolation-method, color1 %, color2 %)
值 描述
color-interpolation-method

必需。定義要使用的顏色插值方法。

它由關鍵字 in 后跟顏色空間名稱組成。

可用以下兩種類型：

矩形顏色空間：

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • lab
  • oklab
  • xyz
  • xyz-d50
  • xyz-d65

極坐標顏色空間：

  • hsl
  • hwb
  • lch
  • oklch
color1 %

必需。要混合的顏色值，以及可選的百分比值（0% 到 100%），用于指定顏色的比例。

默認百分比值為 50%。
color2 %

必需。要混合的顏色值，以及可選的百分比值（0% 到 100%），用于指定顏色的比例。

默認百分比值為 50%。

技術細節

版本： CSS Color Module Level 5

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

相關頁面

參考：CSS 顏色