palette-mix()

语法

/* Blending font-defined palettes */
font-palette: palette-mix(in lch, normal, dark)

/* Blending author-defined palettes */
font-palette: palette-mix(in lch, --blues, --yellows)

/* Varying percentage of each palette mixed */
font-palette: palette-mix(in lch, --blues 50%, --yellows 50%)
font-palette: palette-mix(in lch, --blues 70%, --yellows 30%)

/* Varying color interpolation method */
font-palette: palette-mix(in srgb, --blues, --yellows)
font-palette: palette-mix(in hsl, --blues, --yellows)
font-palette: palette-mix(in hsl shorter hue, --blues, --yellows)

值

函数式表示法

palette-mix(method, palette1 [p1], palette2 [p2])

method（方法）

一个 <color-interpolation-method>，指定插值颜色空间。

palette1、palette2

要混合的 font-palette 值。这些可以是任何 font-palette 值，包括 palette-mix() 函数、normal、dark 和 light。

p1、p2 可选

介于 0% 和 100% 之间的 <percentage> 值，指定要混合的每个调色板的数量。它们按如下方式归一化：

• 如果 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' 是归一化结果。

正式语法

<palette-mix()> = 
  palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )  

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

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

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

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

<custom-color-space> = 
  <dashed-ident>  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

示例

使用 palette-mix() 混合两个调色板

此示例演示如何使用 palette-mix() 函数通过混合两个调色板来创建新调色板。

HTML

HTML 包含三个段落，用于应用我们的字体信息：

<p class="yellowPalette">Yellow palette</p>
<p class="bluePalette">Blue palette</p>
<p class="mixedPalette">Mixed palette</p>

CSS

在 CSS 中，我们从 Google Fonts 导入彩色字体，并使用 @font-palette-values at-rule 定义两个自定义 font-palette 值。然后，我们将三个不同的 font-palette 值应用于段落——--yellow、--blue 和一个使用 palette-mix() 将蓝色和黄色调色板混合在一起创建的新绿色调色板。

@import "https://fonts.googleapis.ac.cn/css2?family=Nabla&display=swap";

@font-palette-values --blue-nabla {
  font-family: "Nabla";
  base-palette: 2; /* this is Nabla's blue palette */
}

@font-palette-values --yellow-nabla {
  font-family: "Nabla";
  base-palette: 7; /* this is Nabla's yellow palette */
}

p {
  font-family: "Nabla", fantasy;
  font-size: 4rem;
  text-align: center;
  margin: 0;
}

.yellowPalette {
  font-palette: --yellow-nabla;
}

.bluePalette {
  font-palette: --blue-nabla;
}

.mixedPalette {
  font-palette: palette-mix(in lch, --blue-nabla 55%, --yellow-nabla 45%);
}

结果

输出如下所示

规范

浏览器兼容性

另见

• font-palette
• @font-palette-values
• color-mix()
• CSS 颜色值指南
• 颜色空间