CSS 中的 color-mix() 函数将两个 <color> 值作为参数,并返回两种指定颜色的混合,在给定的颜色空间中以给定的数量。
可能的值
- color-mix() 函数的功能表示法是 color-mix(method, color1[ p1], color2[ p2])。
- method:它是一种<color-interpolation-method>指定插值颜色空间。
- color1、color2:保存将混合的 <color> 值。
- p1、p2:这是一个可选值,指定要混合的颜色量。以 0% 到 100% 之间的<百分比>值表示。
- 当 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' 是归一化结果。
以下是不同的颜色插值方法:
- <rectangular-color-space>:srgb、srgb-linear、lab、oklab、xyz、xyz-d50、xyz-d65
- <polar-color-space>: HSL, HWB, LCH, OKLCH
- <hue-interpolation-method>:更短、更长、增加、减少
语法
CSS color-mix() - 矩形颜色空间 (srgb)
以下示例显示了根据 p1 和 p2(要混合的颜色量)的值混合颜色(color1 和 color2)。颜色插值方法是矩形颜色空间 (srgb):
CSS color-mix() - 极性颜色空间 (hsl)
以下示例显示了根据 p1 和 p2(要混合的颜色量)的值混合颜色(color1 和 color2)。颜色插值方法是极性颜色空间 (hsl):
CSS color-mix() - 色调插值法 (lch)
以下示例显示了根据 p1 和 p2(要混合的颜色量)的值混合颜色(color1 和 color2)。颜色插值法是色相插值法 (lch):