Fonction color-mix() de CSS

Définition et utilisation

Dans CSS color-mix() La fonction est utilisée pour mélanger deux valeurs de couleurs dans l'espace de couleur donné à une proportion spécifiée.

Exemple

Exemple 1

Mélanger deux valeurs de couleur à des proportions spécifiées dans l'espace de couleur hsl :

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}

Essayez-le vous-même

Exemple 2

Mélanger deux valeurs de couleur à différentes proportions dans l'espace de couleur oklab :

li:nth-child(1) {
  background-color: color-mix(in oklab, #6a5acd 0%, pink);
}
li:nth-child(2) {
  background-color: color-mix(in oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
  background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
  background-color: color-mix(in oklab, #6a5acd 75%, pink);
}
li:nth-child(5) {
  background-color: color-mix(in oklab, #6a5acd 100%, pink);
}

Essayez-le vous-même

Syntaxe CSS

color-mix(color-interpolation-method, color1 %, color2 %)
Valeur Description
color-interpolation-method

Obligatoire. Définir la méthode d'interpolation de couleur à utiliser.

Il est composé du mot-clé in suivi du nom de l'espace de couleur.

Disponible en deux types :

Espace de couleur rectangle :

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • lab
  • oklab
  • xyz
  • xyz-d50
  • xyz-d65

Espace de couleur polaire :

  • hsl
  • hwb
  • lch
  • oklch
color1 %

Obligatoire. Les valeurs de couleur à mélanger, ainsi que les pourcentages optionnels (de 0% à 100%), sont utilisés pour spécifier la proportion de la couleur.

La valeur par défaut du pourcentage est de 50%.
color2 %

Obligatoire. Les valeurs de couleur à mélanger, ainsi que les pourcentages optionnels (de 0% à 100%), sont utilisés pour spécifier la proportion de la couleur.

La valeur par défaut du pourcentage est de 50%.

Détails techniques

Version : Module de couleur CSS niveau 5

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

Pages connexes

Référence :Couleurs CSS