color-mix

J’ai découvert récemment la fonction CSS color-mix() et elle offre plein de possibilités intéressantes. Je vous partage mes explorations.

Fonctionnement

Pour l’utiliser, il va falloir obligatoirement préciser à la fonction votre espace de couleur, ce qui peut faire un peu peur.

Si vous n’en avez aucune idée, il y a de grandes chances que cet espace soit sRGB.

---

Je connais assez mal le sujet des espaces de couleurs, mais je crois pouvoir dire :

• qu’il s’agit de diverses abstractions pour représenter les couleurs dans l’espace (bidimensionnel ou tridimensionnel) ;
• que chaque représentation a ses défauts et ses inconvénients (facilité de lecture, prédiction de couleur lorsqu’elles sont mélangées, naturel dans la création de dégradés…) ;
• que sRGB a été pendant longtemps la référence, mais qu’il sera bientôt remplacé par OKLCH.

---

Une fois votre espace de couleur défini, il restera à passer en paramètre deux couleurs, éventuellement accompagnées de leurs proportions respectives (exprimées en pourcentages).

Par exemple : color-mix(in srgb, red 25%, blue).

Après quelques tests, quelques enseignements :

• on ne peut passer que deux couleurs (pas plus, pas moins) ;
• l’ordre des couleurs n’importe pas ;
• si les deux proportions ne sont pas définies, elles seront automatiquement à 50 % respectivement ;
• si une des proportions n’est pas définie, elle sera automatiquement calculée pour que le total soit à 100 % ;
• si le total des proportions dépasse les 100 %, elles seront rééquilibrées proportionnellement pour que le total soit à 100 % ;
• si le total des proportions n’atteint pas les 100 %, la couleur résultante deviendra semi-transparente à la hauteur de la proportion manquante.

Avantages

La fonction étant native à CSS, cela lui offre des possibilités qu’on ne pouvait atteindre avec des alternatives comme Sass.

La semi-transparence avec transparent

On peut passer comme couleur de mélange le mot-clef transparent, ce qui permet de facilement rendre une couleur semi-transparente.

C’est l’équivalent de natif la fonction transparentize() de Sass.

Les variables avec CSS vars

Chaque paramètre de la fonction peut être géré avec une variable CSS si nécessaire. Je pense que ça peut être pratique, notamment pour définir l’espace de couleur.

.colorMix {
  background-color: color-mix(
    in var(--colorSpace, srgb),
    var(--color1),
    var(--color2)
  );
}

<div class="colorMix" style="--color1: blue 25%; --color2: red 75%"></div>

Quelque soit la manière dont sera définie une couleur (en hexadécimal par exemple), elle pourra être mixée avec de la transparence.

Ce point est particulièrement intéressant si vous regroupez toutes vos couleurs dans des palettes au sein de votre design system et que vous souhaitez introduire des variations d’opacité sur cette base.

Bonne nouvelle supplémentaire : il semblerait que l’espace de couleur importe peu dans ce cas de figure. Impossible donc de se tromper ici.

La couleur courante avec currentColor

Si on souhaite produire par exemple des palettes qui s’appliquent à des composants (imaginons un message de succès en vert, d’erreur en rouge, et d’avertissement en jaune) il sera très facile de ne passer qu’une couleur (celle du texte), et de créer des variations (d’opacité, de luminosité…) aux propriétés qui définissent l’apparence du composant en jouant à la fois avec color-mix() et currentColor.

Côté Sass, les fonctions de luminosité sont lighten() et darken(), mais là encore, il est impossible de leur passer des variables CSS.

---

Pour conclure, voici le CodePen qui vous permettra de tester tout cela pour vous même.