Color-mix() - Fonction CSS

Schéma syntaxique de color-mix().

Sur ce schéma, les termes en gras sont les termes prédéfinis en CSS. Voici la signification des autres mots :

• c est le code d'une couleur.
• p est un pourcentage.
• cs est un espace de couleurs personnalisé.

Description de la fonction color-mix().

La fonction color-mix() mixe deux couleurs et renvoie le résultat dans un espace de couleurs donné. Elle facilite le travail des Web designers qui ont souvent besoin d'une palette de couleur cohérente.

Voici par exemple ce que donne le mélange de rouge et de bleu dans l'espace sRGB : du violet.

Voici le travail de color-mix() dans un espace de couleurs polaire. color-mix() agit sur la teinte et sur la luminosité.

La valeur color-mix() peut être utilisée avec les propriétés suivantes :

• accent-color : Définit la couleur des élément actifs, cochés.
• background-color : Définit la couleur en arrière-plan.
• border-color : Définit la couleur des bordures.
• caret-color : Choisit la couleur du marqueur de texte (curseur clignotant).
• color : Définit la couleur de l'avant plan (texte essentiellement).
• column-rule-color : Définit la couleur des lignes de séparation de colonnes.
• fill-color : Définit la couleur des remplissages en SVG.
• flood-color : Définit la couleur des remplissages et des ombrages dans le contexte de filtres SVG.
• lighting-color : Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.
• outline-color : Définit la couleur du contour (outline).
• scrollbar-color : Définit deux couleurs qui seront utilisées pour les barres de défilement.
• text-decoration-color : Définit la couleur du trait de décoration (souligné, rayure...).
• text-emphasis-color : Définit la couleur des caractères de mise en exergue.

Syntaxes de la fonction color-mix().

• [propriété]: color-mix(in srgb, blue, yellow); cs c1 c2

  Le mot in introduit le paramètre cs, qui est un espace de couleurs rectangulaire, à choisir parmi ceux que connaît CSS :

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • lab

  c1 et c2 sont des couleurs, exprimées dans n'importe laquelle des syntaxes reconnues par CSS (voir les Les couleurs).

  Tous ces paramètres sont obligatoires.

• [propriété]: color-mix(in hsl longer hue, blue, yellow); cs m c1 c2

  Ici, le mot in introduit un espace de couleurs polaire, à choisir parmi les suivants :

  • hsl
  • hwb
  • lch
  • oklch

  m est la méthode d'interpolation, à choisir parmi les suivants. Si ce paramètre est omis, il est pris égal à shorter hue.

  • shorter hue : la teinte du résultat est au milieu de la différence de teinte la plus courte entre c1 et c2.
  • longer hue : la teinte du résultat est au milieu de la différence de teinte la plus longue entre c1 et c2.
  • increasing hue : l'interpolation est faite dans le sens des teintes croissantes à partir de c1.
  • decreasing hue : l'interpolation est faite dans le sens des teintes décroissantes à partir de c1.
  
  shorter hue

  
  longer hue

  
  increasing hue

  
  decreasing hue
• [propriété]: color-mix(in cs, blue, yellow); cs c1 c2

  cs est un espace de couleurs personnalisé. Reportez-vous à la page sur @color-profile pour définir un espace de couleurs personnalisé.

• [propriété]: color-mix(in srgb, blue 40%, yellow 60%); cs c1 p1 c2 p2

  p1 et p2 sont des pourcentages optionnels. Les pourcentages peuvent être ajoutés avec n'importe laquelle des syntaxes vues plus haut. S'ils sont omis (comme dans les syntaxes précédentes), ils sont fixés chacun à 50%.

  • Si un des pourcentages est négatif il invalide l'expression complète.
  • Si p1 est omis, il vaut 100% - p2, et vice versa.
  • Si les deux pourcentages sont omis, ils prennent la valeur 50% : mélange des couleurs à part égales.
  • Si p1 + p2 est supérieur à 100%, ils sont réduits jusqu'à ce que leur somme donne 100%.
  • Si la somme de p1 et de p2 est inférieur à 100%, cette somme est considéré comme le paramètre alpha de la couleur résultante (son opacité). Les deux pourcentages sont ensuite augmenté jusqu'à ce leur somme fasse 100%.

Exemples d'utilisation de la fonction color-mix().

Il est facile de faire un mélangeur de couleurs avec la fonction color-mix(). Celui-ci vous permet de choisir les deux couleurs à mélanger, et de doser le pourcentage attribué à chacune des couleurs. La somme des deux pourcentages fait toujours 100 : vous ne pourrez pas obtenir de couleur semi-transparente.

Animation avec la fonction color-mix().

La fonction color-mix() peut bien sûr être animée. Voici par exemple un passage du rouge au bleu dans l'espace de couleur lab.

Simulateur avec la fonction color-mix()

Support de la fonction color-mix().

Bien que définie récemment, la fonction color-mix() est bien reconnue par tous les grands navigateurs actuels.

1

Fonction
color-mix()

Estimation de la prise en charge globale.

91%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari

Opéra

Safari sur IOS

Firefox pour Androïd

Chrome

Firefox

Edge

Chrome pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction color-mix().

• Module CSS - Couleurs - Niveau 5

  Première définition de la fonction color-mix().
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi, au sujet des couleurs.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété color-mix() fait partie du module CSS Color Module. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :

Directives :

Descripteurs :