Mélanger des couleurs

Cet outil permet de mélanger des couleurs et de lire aussitôt la couleur obtenue en HEX, RGB et HSL. On peut aussi éclaircir, assombrir ou ternir une couleur et créer un dégradé de 15 étapes au maximum.

Source : CSS Color 5, W3C – CSS Color Module Level 5: color-mix(). Mise à jour : 1 octobre 2026.

Que faire ?

Couleur 1

HEX comme #E63946, rgb(230, 57, 70) ou hsl(...)

Couleur 2

HEX, rgb() ou hsl()

Part de la deuxième couleur

0 % = couleur 1 seule, 100 % = couleur 2 seule ; pour éclaircir : part de blanc

Espace de mélange

Étapes du dégradé

de 2 à 15 couleurs, de la couleur 1 à la couleur cible

Ma boîte à outilsVos saisies sont enregistrées uniquement dans ce navigateur.

Résultat

Couleur obtenue (HEX): #965A72
RVB: rgb(150, 90, 114)
TSL: hsl(336, 25%, 47%)
CSS (color-mix): color-mix(in srgb, #E63946 50%, #457B9D 50%)
Étapes du dégradé: #E63946
#BE4A5C
#965A72
#6D6B87
#457B9D

Comment le calcul est fait

L’outil mélange des couleurs d’écran, donc des valeurs de lumière – pas de la peinture faite de pigments. C’est pourquoi le rouge et le bleu donnent du violet (#800080), tandis que le bleu et le jaune donnent un gris neutre et non du vert comme à l’aquarelle.

Comment se fait le mélange

Une valeur intermédiaire est calculée pour chaque canal de couleur. L’espace de mélange détermine la méthode :

sRGB : la moyenne simple des valeurs des canaux – c’est le comportement par défaut de CSS et de la plupart des logiciels graphiques.
Lumière linéaire : mélange des quantités de lumière physiques. Le résultat est plus clair et correspond à deux sources lumineuses qui se superposent.
Oklab : un espace colorimétrique perceptif. Les dégradés paraissent plus réguliers, sans milieu grisâtre entre deux couleurs vives.

Éclaircir, assombrir, ternir

Mélangée à du blanc, une couleur s’éclaircit (teinte claire) ; avec du noir elle s’assombrit (ton foncé), avec du gris elle s’adoucit. Le pourcentage règle l’intensité, les étapes donnent toute une série – utile pour des états de survol ou des échelles de couleurs.

L’expression color-mix() se copie directement dans une feuille de style. Des palettes assorties viennent de la palette de couleurs, les formats se convertissent avec le convertisseur de couleurs et le vérificateur de contraste contrôle la lisibilité du texte.

Questions fréquentes

Que donne un mélange de bleu et de jaune ?

À l’écran, un gris neutre (moyenne sRGB #808080), car on mélange des couleurs de lumière. En peinture à l’eau ou acrylique, bleu et jaune donnent du vert, car les pigments agissent par soustraction.

Comment mélanger deux couleurs à parts égales ?

Saisissez les deux couleurs et laissez la part de la deuxième à 50 %. Pour un tiers de couleur 2, entrez 33.

Comment éclaircir ou assombrir une couleur ?

Choisissez « Éclaircir une couleur » ou « Assombrir une couleur » et réglez le pourcentage : à 20 % de blanc la couleur s’éclaircit un peu, à 80 % elle est presque blanche.

Quel espace de mélange choisir ?

sRGB correspond au comportement par défaut de CSS et de la plupart des logiciels. Oklab donne des dégradés plus réguliers, la lumière linéaire correspond à des sources lumineuses superposées.

Comment reprendre le résultat en CSS ?

Copiez la valeur sous « CSS (color-mix) » et utilisez-la comme couleur dans tout navigateur récent, ou prenez simplement le HEX.

Sources et références juridiques

CSS Color 5: W3C – CSS Color Module Level 5: color-mix()
Björn Ottosson – A perceptual color space for image processing (Oklab)
CSS Color 4: W3C – CSS Color Module Level 4: fonction de transfert sRGB et lumière linéaire

Dernière mise à jour : 1 octobre 2026 · Principes éditoriaux

Couleur obtenue