Diepalette-mix()CSSFunktion kann verwendet werden, um einen neuenfont-palette-Wert zu erstellen, indem zweifont-palette-Werte anhand festgelegter Prozentsätze und Farbinterpolationsmethoden gemischt werden.

Syntax

/* 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)

Werte

Funktionale Notation:

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

method

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

palette1,palette2

Diefont-palette-Werte, die gemischt werden sollen. Diese könnenbeliebigefont-palette-Werte sein, einschließlichpalette-mix()-Funktionen,normal,dark undlight.

p1,p2Optional

<percentage>-Werte zwischen0% und100%, die die Menge jeder Palette angeben, die gemischt werden soll. Sie werden wie folgt normalisiert:

• Wenn sowohlp1 als auchp2 ausgelassen werden, dannp1 = p2 = 50%.
• Wennp1 ausgelassen wird, dannp1 = 100% - p2.
• Wennp2 ausgelassen wird, dannp2 = 100% - p1.
• Wennp1 = p2 = 0%, ist die Funktion ungültig.
• Wennp1 + p2 ≠ 100%, dannp1' = p1 / (p1 + p2) undp2' = p2 / (p1 + p2), wobeip1' undp2' die Normalisierungsergebnisse sind.

Formale Syntax

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

<palette-identifier> =
<dashed-ident>

<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

Beispiele

Verwendung vonpalette-mix(), um zwei Paletten zu mischen

Dieses Beispiel zeigt, wie diepalette-mix()-Funktion verwendet wird, um eine neue Palette zu erstellen, indem zwei andere gemischt werden.

HTML

Das HTML enthält drei Absätze, auf die unsere Schriftinformationen angewendet werden:

<p>Yellow palette</p><p>Blue palette</p><p>Mixed palette</p>

CSS

Im CSS importieren wir eine Farbschriftart von Google Fonts und definieren zwei benutzerdefiniertefont-palette-Werte mit der@font-palette-values-At-Regel. Wir wenden dann drei verschiedenefont-palette-Werte auf die Absätze an —--yellow,--blue und eine neue grüne Palette, die mitpalette-mix() erstellt wird, um die blauen und gelben Paletten zusammen zu mischen.

@import "https://fonts.googleapis.com/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%);}

Ergebnis

Die Ausgabe sieht so aus:

Spezifikationen

Browser-Kompatibilität

Siehe auch

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