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 颜色