palette-mix()

Syntaxe

/* Mélange des palettes définies par la police */
font-palette: palette-mix(in lch, normal, dark)

/* Mélange des palettes définies par l'auteur·ice */
font-palette: palette-mix(in lch, --blues, --yellows)

/* Mélange des pourcentages variables de chaque palette */
font-palette: palette-mix(in lch, --blues 50%, --yellows 50%)
font-palette: palette-mix(in lch, --blues 70%, --yellows 30%)

/* Méthode d'interpolation des couleurs variable */
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)

Valeurs

Notation fonctionnelle :

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

method

Une donnée de type <color-interpolation-method> qui définit l'espace colorimétrique d'interpolation.

palette1, palette2

Les valeurs font-palette à mélanger. Cela peut être n'importe quelles valeurs font-palette, y compris des fonctions palette-mix(), normal, dark et light.

p1, p2 Facultatif

Les valeurs en pourcentage (<percentage>) comprises entre 0% et 100% qui définissent la quantité de chaque palette à mélanger. Elles sont normalisées comme suit :

• Si p1 et p2 sont omis, alors p1 = p2 = 50%.
• Si p1 est omis, alors p1 = 100% - p2.
• Si p2 est omis, alors p2 = 100% - p1.
• Si p1 = p2 = 0%, la fonction est invalide.
• Si p1 + p2 ≠ 100%, alors p1' = p1 / (p1 + p2) et p2' = p2 / (p1 + p2), où p1' et p2' sont les résultats de la normalisation.

Syntaxe formelle

<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  

Exemples

Utiliser palette-mix() pour mélanger deux palettes

Cet exemple montre comment utiliser la fonction palette-mix() pour créer une nouvelle palette en mélangeant deux autres.

HTML

Le HTML contient trois paragraphes auxquels appliquer notre information de police :

<p class="yellowPalette">Palette jaune</p>
<p class="bluePalette">Palette bleue</p>
<p class="mixedPalette">Palette mélangée</p>

CSS

Dans le CSS, on importe une police de couleur depuis Google Fonts, et on définit deux valeurs personnalisées font-palette avec la règle @font-palette-values. On applique ensuite trois valeurs différentes de font-palette aux paragraphes — --yellow, --blue et une nouvelle palette verte, créée avec palette-mix() pour mélanger les palettes bleue et jaune.

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

@font-palette-values --blue-nabla {
  font-family: "Nabla";
  base-palette: 2; /* c'est la palette bleue de Nabla */
}

@font-palette-values --yellow-nabla {
  font-family: "Nabla";
  base-palette: 7; /* c'est la palette jaune de Nabla */
}

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%);
}

Résultat

Le résultat ressemble à ceci :

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété font-palette
• La règle @font-palette-values
• La fonction color-mix()
• Le guide des valeurs de couleur CSS
• L'entrée de glossaire Espace colorimétrique