color-mix()

基线 2023

新推出

自 2023 年 5 月起，此功能可在最新的设备和浏览器版本上运行。 此功能可能无法在旧设备或浏览器中运行。

color-mix() 函数式表示法接受两个 <color> 值，并在给定的颜色空间中以给定的数量混合它们，并返回结果。

语法

css
/* color-mix(in <polar-color-space>, <color>, <color> <percentage>) */
color-mix(in hsl, hsl(200 50 80), coral 80%)
/* color-mix(in <polar-color-space> <hue-interpolation-method>, <color>, <color>) */
color-mix(in lch longer hue, hsl(200deg 50% 80%), coral)

/* color-mix(in <rectangular-color-space>, <color>, <color>) */
color-mix(in srgb, plum, #f00)
/* color-mix(in <rectangular-color-space>, <color> <percentage>, <color> <percentage> */
color-mix(in lab, plum 60%, #f00 50%)

/* color-mix(in <custom-color-space>, <color>, <color>) */
color-mix(in --swop5c, red, blue)

值

函数式表示法：color-mix(<color-interpolation-method>, <color>[<percentage>], <color>[<percentage>])

<color-interpolation-method>

指定应使用哪种插值方法来混合颜色。 它由 in 关键字后跟 颜色空间 名称组成。 以下三种类型可用

注意：当浏览器支持 @color-profile 时，可能会支持自定义颜色空间。 目前，颜色空间必须是 formal_syntax 中列出的可用颜色空间之一。

<color>

要混合的 <color> 值。

<percentage> 可选

一个介于 0% 和 100% 之间的 <percentage> 值，指定要混合的相应颜色的数量。

两个颜色百分比（我们将它们称为 p1 和 p2）按如下方式归一化

  • 如果 p1 和 p2 都省略，则 p1 = p2 = 50%。
  • 如果省略 p1，则 p1 = 100% - p2。
  • 如果省略 p2，则 p2 = 100% - p1。
  • 如果 p1 = p2 = 0%，则函数无效。
  • 如果 p1 + p2 ≠ 100%，则 p1' = p1 / (p1 + p2) 和 p2' = p2 / (p1 + p2)，其中 p1' 和 p2' 是归一化结果。

正式语法

<color-mix()> = 
  color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2} )  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<rectangular-color-space> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65       

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

示例

颜色混合器

以下实时演示使用 color-mix() 函数混合两种颜色 color-one 和 color-two。 源颜色显示在外部，混合后的颜色显示在中间。 您可以通过单击颜色并使用生成的颜色选择器选择新颜色来更改颜色。 您还可以使用滑块更改混合中包含的每种颜色的百分比，并使用下拉菜单更改颜色空间。

混合两种颜色

此示例演示了混合两种颜色，蓝色 #a71e14 以不同的百分比和白色，没有给定百分比。混合的 #a71e14 百分比越高，输出颜色越蓝，白色越少。

HTML

html
<ul>
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>

CSS

color-mix() 函数用于添加越来越高的蓝色百分比，最高可达 100%。第 6 个 <li> 既不包含任何颜色的百分比。

css
li:nth-child(1) {
  background-color: color-mix(in oklab, #a71e14 0%, white);
}

li:nth-child(2) {
  background-color: color-mix(in oklab, #a71e14 25%, white);
}

li:nth-child(3) {
  background-color: color-mix(in oklab, #a71e14 50%, white);
}

li:nth-child(4) {
  background-color: color-mix(in oklab, #a71e14 75%, white);
}

li:nth-child(5) {
  background-color: color-mix(in oklab, #a71e14 100%, white);
}

li:nth-child(6) {
  background-color: color-mix(in oklab, #a71e14, white);
}

结果

color-mix() 函数中两种颜色的总值为 100%，即使开发人员设置的值不总计为 100%。在此示例中，由于只有一种颜色分配了百分比，因此隐式地为另一种颜色分配了百分比值，使组合总计等于 100%。在最后一个 <li> 中，两种颜色都没有分配百分比，两者都默认设置为 50%。

添加透明度

此示例演示了使用 color-mix() 函数通过将任何颜色与 transparent 混合来为颜色添加透明度。

HTML

html
<ul>
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>

CSS

color-mix() 函数用于添加越来越高的 red 百分比，red 是使用名为 --base 的 自定义属性 声明的，该属性在 :root 上定义。第 6 个 <li> 不包含百分比，从而创建出比 --base 颜色不透明度低一半的输出颜色。我们在 <ul> 上包含了条纹背景，以便使透明度可见。

css
:root {
  --base: red;
}

ul {
  background: repeating-linear-gradient(
    45deg,
    chocolate 0px 2px,
    white 2px 12px
  );
}

li:nth-child(1) {
  background-color: color-mix(in srgb, var(--base) 0%, transparent);
}

li:nth-child(2) {
  background-color: color-mix(in srgb, var(--base) 25%, transparent);
}

li:nth-child(3) {
  background-color: color-mix(in srgb, var(--base) 50%, transparent);
}

li:nth-child(4) {
  background-color: color-mix(in srgb, var(--base) 75%, transparent);
}

li:nth-child(5) {
  background-color: color-mix(in srgb, var(--base) 100%, transparent);
}

li:nth-child(6) {
  background-color: color-mix(in srgb, var(--base), transparent);
}

结果

通过这种方式，color-mix() 函数可用于为任何颜色添加透明度，即使颜色已经是半透明的（具有 alpha 通道值 < 1）。但是，color-mix() 不能用于使半透明颜色完全不透明。为此，请使用带有 CSS 颜色函数 的 相对颜色。相对颜色可以更改任何颜色通道的值，包括增加颜色的 alpha 通道以使颜色完全不透明。

在 color-mix() 中使用色调插值

此示例演示了 color-mix() 函数可用的色调插值方法。当使用色调 插值 时，结果色调介于混合的两种颜色的色调值之间。值将根据在色轮周围采取的路线而有所不同。

有关更多信息，请参阅 <hue-interpolation-method>。

CSS

shorter hue 插值方法在色轮周围采用较短的路线，而 longer hue 插值方法采用较长的路线。使用 increasing hue，路线从增加值开始。使用 decreasing hue，值减少。我们混合了两个 <named-color> 值，以创建一系列基于在色轮周围采取的路线而不同的 lch() 中间颜色。混合的颜色包括 red、blue 和 yellow，其 LCH 色调值分别约为 41 度、301 度和 100 度。

为了减少代码冗余，我们对两种颜色和插值方法都使用了 CSS 自定义属性，并在每个 <ul> 上设置了不同的值。

css
ul:nth-of-type(1) {
  --distance: longer; /* 52 degree hue increments */
  --base: red;
  --mixin: blue;
}
ul:nth-of-type(2) {
  /* 20 degree hue decrements */
  --distance: shorter;
  --base: red;
  --mixin: blue;
}
ul:nth-of-type(3) {
  /* 40 degree hue increments */
  --distance: increasing;
  --base: yellow;
  --mixin: blue;
}
ul:nth-of-type(4) {
  /* 32 degree hue decrements */
  --distance: decreasing;
  --base: yellow;
  --mixin: blue;
}

li:nth-child(1) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 100%,
    var(--mixin)
  );
}

li:nth-child(2) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 80%,
    var(--mixin)
  );
}

li:nth-child(3) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 60%,
    var(--mixin)
  );
}

li:nth-child(4) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 40%,
    var(--mixin)
  );
}

li:nth-child(5) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 20%,
    var(--mixin)
  );
}

li:nth-child(6) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 0%,
    var(--mixin)
  );
}

结果

使用 longer hue，颜色之间的增量或减量将始终与使用 shorter hue 时相同或更大。当色调值变化的方向比值之间长度更重要时，使用 increasing hue 或 decreasing hue。

规范

规范
CSS 颜色模块级别 5
# color-mix

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅