palette-mix()

Funktionale Notation:

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

method

Ein <color-interpolation-method>, der den Interpolationsfarbraum angibt.

palette1, palette2

Die font-palette-Werte, die zusammengefügt werden sollen. Diese können jede font-palette-Werte sein, einschließlich palette-mix()-Funktionen, normal, dark und light.

p1, p2 Optional

<percentage>-Werte zwischen 0% und 100%, die die Menge anzugeben, die von jeder Palette gemischt werden soll. Sie werden wie folgt normalisiert:

• Wenn sowohl p1 als auch p2 ausgelassen werden, dann gilt p1 = p2 = 50%.
• Wenn p1 ausgelassen wird, dann gilt p1 = 100% - p2.
• Wenn p2 ausgelassen wird, dann gilt p2 = 100% - p1.
• Wenn p1 = p2 = 0%, ist die Funktion ungültig.
• Wenn p1 + p2 ≠ 100%, dann gilt p1' = p1 / (p1 + p2) und p2' = p2 / (p1 + p2), wobei p1' und p2' die Normalisierungsergebnisse sind.

<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>? ]  

<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  

Dieses Beispiel zeigt, wie man die Funktion palette-mix() nutzen kann, um eine neue Palette zu erstellen, indem zwei andere gemischt werden.

HTML

Das HTML enthält drei Absätze, auf die wir unsere Schriftinformationen anwenden:

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

CSS

Im CSS importieren wir eine Farbenschriftart von Google Fonts und definieren zwei benutzerdefinierte font-palette-Werte mithilfe der @font-palette-values-Regel. Wir wenden dann drei verschiedene font-palette-Werte auf die Absätze an — --yellow, --blue, und eine neue grüne Palette, die durch das Mischen der blauen und gelben Paletten mit palette-mix() erstellt wird.

@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");

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

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

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

.yellowPalette {
  font-palette: --yellowNabla;
}

.bluePalette {
  font-palette: --blueNabla;
}

.mixedPalette {
  font-palette: palette-mix(in lch, --blueNabla 55%, --yellowNabla 45%);
}

Ergebnis

Die Ausgabe sieht folgendermaßen aus:

• font-palette
• @font-palette-values
• color-mix()
• CSS-Farbwerte Leitfaden
• Farbraum