color-mix() en CSS : mélanger les couleurs dans le navigateur

La fonction color-mix CSS, color-mix(), mélange deux couleurs dans l’espace colorimétrique de votre choix et renvoie une nouvelle couleur. Écrivez color-mix(in oklab, #7c3aed 40%, white) et vous obtenez un violet pâle composé à 40 % de violet et à 60 % de blanc, mélangés de façon perceptuelle. Elle fonctionne dans tous les grands navigateurs actuels. Associée aux propriétés personnalisées, elle transforme une seule couleur de marque en teintes claires, ombres, états de survol et voiles translucides, sans un seul code hexadécimal en dur.

La syntaxe de color-mix()

/* color-mix(in <colour space>, <colour> [<percentage>], <colour> [<percentage>]) */

.a { color: color-mix(in oklab, #7c3aed, white); }          /* 50% each */
.b { color: color-mix(in oklab, #7c3aed 40%, white); }      /* 40% violet, 60% white */
.c { color: color-mix(in oklab, #7c3aed, black 30%); }      /* 70% violet, 30% black */
.d { color: color-mix(in srgb, #7c3aed 50%, transparent); } /* violet at half opacity */
.e { color: color-mix(in oklch shorter hue, #2563eb, #f59e0b); }

Dans quel espace colorimétrique mélanger

L’espace colorimétrique détermine le chemin entre les deux couleurs. En sRGB, le navigateur fait la moyenne des valeurs de rouge, de vert et de bleu, ce qui est facile à raisonner mais ne correspond pas à notre vision. Deux teintes éloignées passent par un gris terne en chemin. En oklab, le mélange suit la clarté et la couleur perçues : le milieu reste propre et les paliers paraissent réguliers. L’interpolation des dégradés explique le même choix pour les dégradés, où l’effet se voit le plus facilement.

• oklab pour les teintes claires, les ombres et la plupart des mélanges courants. Clarté régulière, aucun creux gris.
• oklch quand vous voulez que la teinte voyage, par exemple pour fondre deux couleurs de marque en une troisième située entre elles sur le cercle.
• srgb pour mélanger avec transparent ou correspondre à d’anciens outils de design qui mélangent en sRGB.
• srgb-linear pour un mélange de lumière physiquement fondé, qui paraît plus lumineux au milieu.

Pour comprendre pourquoi les espaces perceptuels se comportent mieux, voyez OKLCH expliqué. Les versions récentes de la spécification permettent d’omettre l’espace colorimétrique, oklab étant alors utilisé par défaut, mais la prise en charge de ce raccourci est plus récente : écrivez in oklab explicitement.

Teintes claires et ombres à partir d’une couleur de marque

Le modèle le plus utile est une échelle construite à partir d’une seule variable. Mélangez vers le blanc pour les teintes claires, vers le noir pour les ombres. Changez la variable et chaque palier se met à jour, ce qui est idéal pour les produits multimarques ou les thèmes choisis par l’utilisateur.

:root {
  --brand: #7c3aed;

  --brand-100: color-mix(in oklab, var(--brand) 20%, white);
  --brand-200: color-mix(in oklab, var(--brand) 40%, white);
  --brand-300: color-mix(in oklab, var(--brand) 60%, white);
  --brand-400: color-mix(in oklab, var(--brand) 80%, white);
  --brand-500: var(--brand);
  --brand-600: color-mix(in oklab, var(--brand) 80%, black);
  --brand-700: color-mix(in oklab, var(--brand) 60%, black);
}

Mélanger avec du blanc et du noir purs est un point de départ. Pour des teintes claires plus chaudes, mélangez vers un blanc cassé comme #fdf6ec ; pour des ombres plus riches, mélangez vers un bleu marine profond plutôt que vers le noir. L’échelle ressemble ainsi à votre marque plutôt qu’à une rampe générique. Teintes, tons et ombres traite de la théorie des couleurs.

La transparence avec color-mix()

Avant color-mix(), obtenir une version translucide d’une couleur stockée dans une variable obligeait à stocker ses canaux séparément. Désormais, il suffit de la mélanger avec transparent. La part que vous conservez devient l’opacité.

.badge {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}

.button:hover {
  background: color-mix(in oklab, var(--brand), black 12%);
}

Les erreurs courantes avec color-mix()

• Omettre l’espace colorimétrique dans du code qui doit tourner sur d’anciens navigateurs. C’est toute la déclaration qui est ignorée, pas seulement l’espace.
• Mélanger avec du noir pour chaque ombre. Les ombres des couleurs saturées deviennent ternes ; mélangez plutôt vers une version profonde de la teinte.
• S’attendre à ce que des pourcentages sous 100 restent opaques. color-mix(in oklab, red 20%, blue 30%) est à demi transparent.
• Utiliser hsl pour les teintes claires. La clarté en hsl n’est pas perceptuelle : un jaune et un bleu au même mélange ne ressemblent en rien au même palier.

Prise en charge par les navigateurs et replis

color-mix() est disponible dans Chrome, Edge, Firefox et Safari depuis 2023, et la prise en charge actuelle est indiquée sur caniuse. Si vous devez couvrir de très anciens navigateurs, déclarez d’abord une couleur simple et laissez la couleur mélangée la remplacer. Les navigateurs qui ne comprennent pas la seconde ligne l’ignorent.

.card {
  background: #ede9fe;
  background: color-mix(in oklab, var(--brand) 15%, white);
}

Un thème complet construit sur ces modèles, avec modes clair et sombre, se trouve dans les variables CSS pour les thèmes.

Mélanger les couleurs pour les dégradés

color-mix() est pratique dans les dégradés, où il peut calculer un arrêt intermédiaire à partir de deux couleurs de marque pour que le fondu ne passe jamais par la boue. linear-gradient(135deg, var(--a), color-mix(in oklch, var(--a), var(--b)), var(--b)) vous donne un troisième arrêt sur le chemin de teinte entre les deux. Le problème de fond est traité dans les dégradés boueux.

Si votre couleur de marque vit dans un Mark Gradiently, la recette du Mark contient déjà une famille de couleurs apparentées choisies pour fonctionner ensemble, et le Marché permet de chercher par mots de couleur comme «  violet profond  » pour en trouver un construit autour de la teinte dont vous partez.