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

[Canonical HTML page](https://gradiently.design/fr/guide/css-color-mix)

color-mix() confie au navigateur les calculs de couleur que vous faisiez à l’œil ou avec un préprocesseur. Avec le bon espace colorimétrique, une seule couleur de marque donne toute une palette de teintes, d’ombres et de versions translucides.

## The short version

- La fonction CSS color-mix mélange deux couleurs dans un espace colorimétrique nommé, par exemple color-mix(in oklab, #7c3aed 40%, white).
- Si vous ne donnez qu’un pourcentage, l’autre couleur reçoit le reste ; sans pourcentage, le mélange se fait à parts égales.
- Mélanger en oklab garde une clarté régulière et évite les milieux grisâtres que produit le mélange en sRGB entre des teintes éloignées.
- Mélanger une couleur avec transparent est le moyen le plus propre d’obtenir une version translucide d’une couleur stockée dans une propriété personnalisée.
- color-mix() fonctionne dans tous les grands navigateurs actuels : il est sûr en production, avec une couleur simple en repli pour les très anciens.

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()

```css
/* 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); }
```

L’espace colorimétrique vient en premier et s’écrit en toutes lettres. Les espaces fondés sur la teinte, comme oklch et hsl, acceptent aussi un sens de parcours de la teinte : shorter, longer, increasing ou decreasing.

| Vous écrivez | Le navigateur utilise | Remarques |
| --- | --- | --- |
| Aucun pourcentage | 50 % et 50 % | Un mélange égal |
| Un seul pourcentage, par exemple 30 % | 30 % et 70 % | L’autre couleur reçoit le reste |
| Deux dont la somme fait 100 % | Tels quels | La forme la plus claire à relire plus tard |
| Deux dont la somme dépasse 100 % | Ramenés à 100 % | 60 % et 60 % se comporte comme 50 % et 50 % |
| Deux dont la somme est inférieure à 100 % | Augmentés, puis rendus translucides | 20 % et 30 % donne un résultat à demi opaque |

Comment se résolvent les pourcentages. La dernière ligne surprend : un total inférieur à 100 rend le résultat partiellement transparent.

## 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](https://gradiently.design/fr/guide/gradient-interpolation) explique le même choix pour les dégradés, où l’effet se voit le plus facilement.

- sRGB : gris terne au milieu: `linear-gradient(to right, #0000ff, #ffff00)`
- oklab : milieu plus clair et plus net: `linear-gradient(in oklab to right, #0000ff, #ffff00)`
- oklch : passe par le cyan et le vert: `linear-gradient(in oklch to right, #0000ff, #ffff00)`

Du bleu au jaune dans trois espaces. Le milieu de chaque bande est exactement ce que renvoie `color-mix()` à 50 % dans cet espace : `#808080` en sRGB, un gris bleuté clair en oklab.

- **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é](https://gradiently.design/fr/guide/oklch-explained). 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.

```css
: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);
}
```

Une échelle de sept paliers à partir d’une couleur. Remplacez `--brand` par n’importe quel code hexadécimal et l’échelle suit.

- brand-100: #e1dbff
- brand-200: #c5b7fe
- brand-300: #aa92fa
- brand-400: #926bf4
- brand-500: #7c3aed
- brand-600: #5a28b0
- brand-700: #3b1877

Ce que donne l’échelle ci-dessus pour `#7c3aed`, calculée en oklab. Mélangées en sRGB, les teintes claires sortent un peu plus grises et les ombres un peu plus plates.

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](https://gradiently.design/fr/guide/tints-tones-shades) 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é.

```css
.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%);
}
```

Un badge teinté et un état de survol tirés de la même variable. Aucune seconde couleur à maintenir.

## 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](https://caniuse.com/mdn-css_types_color_color-mix). 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.

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

Le repli d’abord, l’amélioration ensuite. La cascade fait le reste.

Un thème complet construit sur ces modèles, avec modes clair et sombre, se trouve dans [les variables CSS pour les thèmes](https://gradiently.design/fr/guide/css-custom-properties-theming).

## 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](https://gradiently.design/fr/guide/muddy-gradients).

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.

## FAQ

### Que fait color-mix() en CSS ?

Elle mélange deux couleurs dans l’espace colorimétrique que vous nommez et renvoie le résultat, par exemple `color-mix(in oklab, red 30%, white)`.

### Quel espace colorimétrique utiliser avec color-mix() ?

oklab pour les teintes claires, les ombres et la plupart des mélanges, oklch quand vous voulez que la teinte voyage, et srgb pour mélanger avec transparent.

### Comment rendre une couleur transparente avec color-mix() ?

Mélangez-la avec `transparent` : `color-mix(in srgb, var(--brand) 20%, transparent)` donne la couleur de marque à 20 % d’opacité.

### color-mix() est-il pris en charge par tous les navigateurs ?

Il fonctionne dans les versions actuelles de Chrome, Edge, Firefox et Safari. Déclarez d’abord une couleur simple en repli pour les anciens navigateurs.

### Que se passe-t-il si les pourcentages ne font pas 100 ?

Les totaux supérieurs à 100 sont ramenés à 100. Les totaux inférieurs sont augmentés et le résultat devient partiellement transparent.