Aller au contenu

Mélangeur de couleurs : mélangez deux couleurs et découvrez le résultat

Choisissez deux couleurs, ajustez la proportion et obtenez instantanément la teinte obtenue en HEX, RGB et OKLCH, avec son échelle intermédiaire et le code CSS prêt à copier.

Résultat#598FE550%50%

Couleurs

Proportion de la couleur B

50%
A 50% · B 50%

Espace de mélange

Points intermédiaires
10
Balance de la palette
background: color-mix(in srgb, #2C71DE 50%, #85ADEC);
/* = #598FE5 */

Conversion de couleur

Mélanges populaires

Quelle couleur obtient-on en mélangeant du rouge et du bleu ? Chargez une paire classique et ajustez-la à votre goût.

À quoi sert le mélange de deux couleurs

Le mélangeur de couleurs combine deux couleurs dans la proportion de votre choix et calcule la teinte exacte obtenue. C'est différent d'explorer des harmonies à partir d'une seule couleur de base, ce que fait la roue chromatique : ici, vous partez de deux couleurs déjà définies et cherchez le point intermédiaire entre elles.

C'est particulièrement utile pour trouver une teinte de transition entre deux couleurs de marque, construire une échelle de tons intermédiaires pour les états d'interface (survol, fonds, bordures) ou générer le CSS du mélange sans calculer les pourcentages à la main : l'outil vous donne à la fois le color-mix() natif et le dégradé linear-gradient().

Mélanger deux couleurs en trois étapes

  1. Choisissez les deux couleurs

    Cliquez sur Couleur A ou Couleur B et ajustez-la avec la teinte, la luminosité, la pipette ou en saisissant son code. Le bouton Échanger inverse l'ordre.

  2. Ajustez la proportion

    Faites glisser le curseur ou utilisez les raccourcis 25, 50 et 75 %. À 0 %, vous obtenez la Couleur A pure, et à 100 %, la Couleur B.

  3. Copiez le résultat

    Copiez la couleur en HEX d'un clic, ou le code color-mix(), le dégradé ou les classes Tailwind. En dessous, vous avez la même couleur en RGB, HSL, CMJN, LAB et d'autres formats.

Pourquoi le bleu et le jaune ne donnent-ils pas du vert à l'écran ?

À l'école, on apprend que le bleu et le jaune donnent du vert. C'est vrai avec de la peinture : les pigments absorbent la lumière, et en les combinant, seul ce qu'aucun des deux n'absorbe est réfléchi, ici le vert. C'est un mélange soustractif.

Un écran ne mélange pas des pigments mais de la lumière. En faisant la moyenne des canaux RGB du bleu et du jaune, ils se compensent et le résultat est un gris. Si vous voulez le comportement de la peinture, ajoutez vous-même le vert comme couleur intermédiaire, ou comparez le résultat en mode perceptuel (OKLab), qui conserve mieux la luminosité.

RGB ou perceptuel : quel espace de mélange choisir

Une même paire de couleurs peut donner des mélanges différents selon l'espace dans lequel on calcule. L'outil vous laisse choisir entre les deux plus utilisés, les mêmes que ceux acceptés par la fonction CSS color-mix().

50 % = #800080

RGB (sRGB)

Fait la moyenne des canaux rouge, vert et bleu. C'est le calcul classique, utilisé par la plupart des éditeurs. Entre des couleurs saturées et opposées, le point médian sort souvent plus sombre et terne.

50 % = #8C53A2

Perceptuel (OKLab)

Interpole dans un espace conçu selon notre perception des couleurs. Les étapes avancent de façon plus régulière et les tons moyens restent plus lumineux. C'est l'option recommandée pour les échelles et les dégradés d'interface.

La différence entre mélanger et générer des harmonies

Mélanger deux couleurs

Interpole directement entre deux couleurs précises que vous choisissez. Le résultat dépend des couleurs de départ et de la proportion : idéal quand vous avez déjà deux couleurs fixes et avez besoin du point intermédiaire.

Générer des harmonies

Se calcule mathématiquement à partir de la position d'une seule couleur sur la roue chromatique (analogue, complémentaire, triadique…). Sert à construire une palette complète, pas une teinte intermédiaire entre deux couleurs données.

Questions fréquentes

Chaque composante de la couleur est interpolée selon la proportion choisie. En mode RGB, on fait la moyenne des canaux rouge, vert et bleu ; en mode perceptuel (OKLab), on interpole la luminosité et les deux axes de couleur d'OKLab, ce qui donne des transitions plus régulières.

Avec de la peinture, du vert. À l'écran, en mélangeant en RGB à 50 %, un gris neutre (#808080 avec du bleu et du jaune purs), car la lumière se mélange de façon additive et les canaux se compensent. Si vous avez besoin d'un vert, ajoutez-le comme couleur intermédiaire.

Un violet. Avec du rouge et du bleu purs à 50 % en RGB, vous obtenez #800080 ; en mode perceptuel, le violet est plus clair. Plus vous donnez de poids au bleu, plus le résultat est froid.

C'est une fonction CSS native qui mélange deux couleurs directement dans le navigateur, par exemple color-mix(in srgb, #E53935 50%, #1E88E5). Elle fonctionne dans tous les navigateurs modernes. L'outil génère ce code et aussi la couleur HEX équivalente, si vous avez besoin d'une valeur fixe.

Oui. L'onglet Dégradé génère un linear-gradient() entre la Couleur A, le mélange et la Couleur B. Pour plus d'arrêts ou des dégradés radiaux et coniques, utilisez le générateur de dégradés.

La roue chromatique calcule des couleurs liées à partir d'une seule couleur de base, selon les règles de la théorie des couleurs. Le mélangeur combine deux couleurs précises que vous choisissez et calcule le point intermédiaire entre elles, pas une palette complète.

Les étapes définissent le nombre de tons de l'échelle entre A et B, de 3 à 12. La balance déplace ces tons vers l'une des deux couleurs, utile si vous voulez plus de nuances près de la Couleur A ou de la Couleur B. Cliquez sur n'importe quel ton de l'échelle pour le copier.

Oui. Sous l'outil, vous avez la couleur mélangée en RGB, HSL, HSB, CMJN, LAB, LCH et d'autres formats, et le bouton Exporter les couleurs télécharge l'échelle complète pour Tailwind, Figma ou CSS.

Plus d'outils