palette-mix()

Die palette-mix() CSS-Funktion kann verwendet werden, um einen neuen font-palette-Wert zu erstellen, indem zwei font-palette-Werte durch spezifizierte Prozentsätze und Farbinterpolationsmethoden zusammen 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

Eine <color-interpolation-method>, die den Interpolationsfarbraum angibt.

palette1, palette2

Die font-palette-Werte, die zusammen gemischt werden sollen. Diese können beliebige 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 jeder Palette angeben, die gemischt werden soll. Sie werden wie folgt normalisiert:

• Wenn sowohl p1 als auch p2 weggelassen werden, dann p1 = p2 = 50%.
• Wenn p1 weggelassen wird, dann p1 = 100% - p2.
• Wenn p2 weggelassen wird, dann p2 = 100% - p1.
• Wenn p1 = p2 = 0%, ist die Funktion ungültig.
• Wenn p1 + p2 ≠ 100%, dann p1' = p1 / (p1 + p2) und p2' = p2 / (p1 + p2), wobei p1' und p2' 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> ] 

<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

Verwenden von palette-mix(), um zwei Paletten zu mischen

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

HTML

Das HTML enthält drei Absätze, um unsere Schriftinformationen anzuwenden:

<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 mit der @font-palette-values-At-Regel. Wir wenden dann drei verschiedene font-palette-Werte auf die Absätze an – --yellow, --blue und eine neue grüne Palette, die mit palette-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