color-mix()

Syntaxe

/* Espace colorimétrique polaire */
color-mix(in hsl, hsl(200 50 80), coral 80%)

/* Espace colorimétrique rectangulaire */
color-mix(in srgb, plum, #123456)
color-mix(in lab, plum 60%, #123456 50%)

/* Espace colorimétrique personnalisé */
color-mix(in --swop5c, red, blue)

/* Méthode d'interpolation de teinte */
color-mix(in lch longer hue, hsl(200deg 50% 80%), coral)

Valeurs

Notation fonctionnelle : color-mix(<color-interpolation-method>, <color>[<percentage>], <color>[<percentage>])

<color-interpolation-method>

Définit la méthode d'interpolation à utiliser pour mélanger les couleurs. Elle consiste en le mot-clé in suivi du nom d'un espace colorimétrique. Trois types sont disponibles :

• <rectangular-color-space> : srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, lab, oklab, xyz, xyz-d50, et xyz-d65.
• <polar-color-space> : hsl, hwb, lch, et oklch.
• espace colorimétrique personnalisé : <dashed-ident> faisant référence à un @color profile personnalisé

Note : Lorsque les navigateurs prendront en charge @color-profile, des espaces colorimétriques personnalisés pourront être utilisés. Actuellement, l'espace doit être l'un de ceux listés dans la syntaxe formelle.

<color>

Une valeur <color> à mélanger.

<percentage> Facultatif

Une valeur <percentage> comprise entre 0% et 100%, indiquant la proportion de la couleur correspondante à mélanger.

Les deux pourcentages de couleur (appelés ici p1 et p2) sont normalisés 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 valeurs normalisées.
  • Si p1 + p2 < 100%, un multiplicateur alpha de p1 + p2 est appliqué à la couleur résultante. Cela revient à mélanger avec transparent, avec un pourcentage pt = 100% - p1 - p2.

Syntaxe formelle

<color-mix()> = 
  color-mix( <color-interpolation-method>? , [ <color> && <percentage [0,100]>? ]# )  

<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  

Exemples

Mélangeur de couleurs

La démonstration interactive suivante mélange deux couleurs, color-one et color-two, à l'aide de la fonction color-mix(). Les couleurs sources sont affichées sur les côtés, et la couleur mélangée au centre. Vous pouvez changer les couleurs en cliquant dessus et en choisissant une nouvelle couleur via le sélecteur. Vous pouvez aussi ajuster le pourcentage de chaque couleur dans le mélange avec les curseurs, et changer l'espace colorimétrique avec le menu déroulant.

Ajouter de la transparence

Cet exemple montre le mélange de deux couleurs, le rouge #a71e14 à différents pourcentages et le blanc sans pourcentage indiqué. Plus la proportion de #a71e14 est élevée, plus la couleur obtenue est rouge et moins elle est blanche.

HTML

<ul>
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>

CSS

La fonction color-mix() est utilisée pour ajouter des pourcentages croissants de red, déclaré à l'aide d'une propriété personnalisée nommée --base, définie sur la racine CSS :root. Le 6^e élément HTML <li> n'inclut pas de pourcentage, ce qui crée une couleur de sortie deux fois moins opaque que la couleur --base. Un fond à rayures est appliqué au <ul> pour rendre la transparence visible.

ul {
  display: flex;
  list-style-type: none;
  font-size: 150%;
  gap: 10px;
  border: 2px solid;
  padding: 10px;
}

li {
  padding: 10px;
  flex: 1;
  box-sizing: border-box;
  font-family: monospace;
  outline: 1px solid var(--base);
  text-align: center;
}

:root {
  --base: red;
}

ul {
  background: repeating-linear-gradient(
    45deg,
    chocolate 0px 2px,
    white 2px 12px
  );
}

li:nth-child(1) {
  background-color: color-mix(in srgb, var(--base) 0%, transparent);
}

li:nth-child(2) {
  background-color: color-mix(in srgb, var(--base) 25%, transparent);
}

li:nth-child(3) {
  background-color: color-mix(in srgb, var(--base) 50%, transparent);
}

li:nth-child(4) {
  background-color: color-mix(in srgb, var(--base) 75%, transparent);
}

li:nth-child(5) {
  background-color: color-mix(in srgb, var(--base) 100%, transparent);
}

li:nth-child(6) {
  background-color: color-mix(in srgb, var(--base), transparent);
}

Résultat

De cette manière, la fonction color-mix() peut être utilisée pour ajouter de la transparence à n'importe quelle couleur, même si la couleur possède déjà un canal alpha inférieur à 1. Cependant, color-mix() ne permet pas de rendre une couleur semi-transparente totalement opaque. Pour cela, utilisez une couleur relative avec une fonction de couleur CSS. Les couleurs relatives peuvent modifier la valeur de n'importe quel canal, y compris augmenter le canal alpha pour rendre la couleur totalement opaque.

Utiliser l'interpolation de teinte avec color-mix()

Cet exemple montre les méthodes d'interpolation de teinte disponibles pour la fonction color-mix(). Lors de l'utilisation de l'interpolation de teinte, la teinte résultante se situe entre les valeurs de teinte des deux couleurs mélangées. La valeur diffère selon le chemin emprunté sur le cercle chromatique.

Pour plus d'informations, voir <hue-interpolation-method>.

<p>plus long</p>
<ul>
  <li>100%</li>
  <li>80%</li>
  <li>60%</li>
  <li>40%</li>
  <li>20%</li>
  <li>0%</li>
</ul>
<p>plus court</p>
<ul>
  <li>100%</li>
  <li>80%</li>
  <li>60%</li>
  <li>40%</li>
  <li>20%</li>
  <li>0%</li>
</ul>
<p>augmente</p>
<ul>
  <li>100%</li>
  <li>80%</li>
  <li>60%</li>
  <li>40%</li>
  <li>20%</li>
  <li>0%</li>
</ul>
<p>diminue</p>
<ul>
  <li>100%</li>
  <li>80%</li>
  <li>60%</li>
  <li>40%</li>
  <li>20%</li>
  <li>0%</li>
</ul>

CSS

La méthode d'interpolation shorter hue emprunte le chemin le plus court sur le cercle chromatique, tandis que la méthode longer hue suit le chemin le plus long. Avec increasing hue, le parcours commence par des valeurs croissantes. Avec decreasing hue, la valeur diminue. Nous mélangeons deux valeurs <named-color> pour créer une série de couleurs intermédiaires lch() qui diffèrent selon le chemin emprunté sur le cercle chromatique. Les couleurs mélangées incluent red, blue et yellow avec des valeurs de teinte LCH d'environ 41deg, 301deg et 100deg respectivement.

Pour éviter la redondance du code, nous avons utilisé des propriétés personnalisées CSS pour les deux couleurs et pour la méthode d'interpolation, en définissant des valeurs différentes sur chaque élément HTML <ul>.

body {
  font-family: monospace;
}
ul {
  display: flex;
  list-style-type: none;
  font-size: 150%;
  gap: 10px;
  padding: 10px;
  margin: 0;
}

li {
  padding: 10px;
  flex: 1;
  outline: 1px solid var(--base);
  text-align: center;
}

ul:nth-of-type(1) {
  --distance: longer; /* Incréments de teinte de 52 degrés */
  --base: red;
  --mixin: blue;
}
ul:nth-of-type(2) {
  /* Décréments de teinte de 20 degrés */
  --distance: shorter;
  --base: red;
  --mixin: blue;
}
ul:nth-of-type(3) {
  /* Incréments de teinte de 40 degrés */
  --distance: increasing;
  --base: yellow;
  --mixin: blue;
}
ul:nth-of-type(4) {
  /* Décréments de teinte de 32 degrés */
  --distance: decreasing;
  --base: yellow;
  --mixin: blue;
}

li:nth-child(1) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 100%,
    var(--mixin)
  );
}

li:nth-child(2) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 80%,
    var(--mixin)
  );
}

li:nth-child(3) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 60%,
    var(--mixin)
  );
}

li:nth-child(4) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 40%,
    var(--mixin)
  );
}

li:nth-child(5) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 20%,
    var(--mixin)
  );
}

li:nth-child(6) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 0%,
    var(--mixin)
  );
}

Résultat

Avec longer hue, les incréments ou décréments entre les couleurs seront toujours supérieurs ou égaux à ceux obtenus avec shorter hue. Utilisez increasing hue ou decreasing hue lorsque la direction du changement de la valeur de teinte est plus importante que la distance entre les valeurs.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le type de donnée <color>
• Le type de donnée <color-interpolation-method>
• Le type de donnée <hue>
• Couleurs relatives CSS