Mélangeur de couleurs

Mélangez des couleurs visuellement avec des gobelets doseurs. Choisissez les couleurs, ajustez les quantités et voyez le résultat en RGB, HSL et HEX.

Zone de mélange

Gobelet 1

5

Gobelet 2

5

Résultat du mélange

Proportions saisies

50%

Répartition RGB

Rouge: 142 (35.9%)

Vert: 114 (28.8%)

Bleu: 140 (35.4%)

Couleur obtenue

Détails de la couleur

HEX

#8E728C

RGB

rgb(142, 114, 140)

HSL

hsl(304, 11%, 50%)

Mélangeur de couleurs – Comment ça marche

Pourquoi le mélange de couleurs fonctionne-t-il ?

Il existe deux grandes façons de mélanger les couleurs :

Le mélange additif est utilisé par les écrans et les systèmes à base de lumière. Lorsque des lumières colorées se superposent, elles s'additionnent. Rouge + Vert = Jaune, Rouge + Bleu = Magenta, Vert + Bleu = Cyan. Combinées à pleine intensité, les trois couleurs produisent du blanc.

Le mélange soustractif est propre aux peintures, encres et pigments. Les matières absorbent certaines longueurs d'onde et réfléchissent le reste. Les couleurs primaires soustractives sont le Cyan, le Magenta et le Jaune (CMY). Plus on les mélange, plus le résultat tend vers le noir.

Cet outil utilise le modèle additif RGB, le standard pour les écrans numériques et le webdesign.

Le modèle de couleur RGB

RGB définit une couleur à l'aide de trois canaux :

Rouge (R) : 0–255
Vert (G) : 0–255
Bleu (B) : 0–255

Chaque pixel d'un écran contient trois sous-pixels rouge, vert et bleu. En modulant l'intensité de chaque canal, un écran peut afficher plus de 16,7 millions de couleurs ( $256^3 = 16{,}777{,}216$ ).

Formats de couleur courants

Format	Exemple	Description
HEX	#FF6B35	Format hexadécimal à 6 chiffres, courant en CSS
RGB	rgb(255, 107, 53)	Valeurs rouge, vert et bleu en notation décimale
HSL	hsl(16, 100%, 60%)	Teinte, saturation et luminosité — plus intuitif à ajuster visuellement

Comment le mélangeur calcule le résultat

Le mélangeur calcule le résultat en effectuant une moyenne pondérée de chaque canal RGB. Pour $N$ couleurs en entrée avec les quantités $a_1, a_2, \ldots, a_N$ et les valeurs RGB $(r_i, g_i, b_i)$ , le résultat est :

R_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot r_i}{\sum_{i=1}^{N} a_i}

G_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot g_i}{\sum_{i=1}^{N} a_i}

B_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot b_i}{\sum_{i=1}^{N} a_i}

En résumé, plus une couleur est en grande quantité, plus elle influence le résultat final.

Par exemple, en mélangeant 3 parts de rouge (#FF0000) et 1 part de bleu (#0000FF) :

R = \frac{3 \times 255 + 1 \times 0}{4} = 191

G = \frac{3 \times 0 + 1 \times 0}{4} = 0

B = \frac{3 \times 0 + 1 \times 255}{4} = 64

La couleur mélangée est environ #BF0040, un rouge-violet profond.

Applications pratiques

Webdesign & Interface utilisateur

Utilisez le mélangeur pour construire des palettes, tester des superpositions transparentes et créer des couleurs d'accentuation à partir d'une couleur de base.

Pédagogie

C'est un moyen simple de comprendre les liens entre la lumière, la perception humaine des couleurs et les mathématiques des couleurs.

Art numérique

Il aide les artistes à anticiper le rendu des mélanges de couleurs à l'écran, en illustration, design et retouche photo.

Conseils pour mieux mélanger les couleurs

Commencez par les couleurs primaires — Le rouge, le vert et le bleu sont la base du mélange RGB.
Ajustez les niveaux — Plus le niveau d'une couleur est élevé, plus elle influence le mélange final.
Comparez les formats de sortie — Selon que vous travaillez en CSS, dans des outils de design ou dans du code, choisissez HEX, RGB ou HSL.
Des valeurs RGB égales donnent du gris — Si les trois canaux sont identiques, le résultat est un gris neutre.

Foire aux questions

Quelle est la différence entre mélange additif et mélange soustractif ? Le mélange additif utilise la lumière et devient plus clair à mesure que les couleurs s'ajoutent, pour finir en blanc. Le mélange soustractif utilise des pigments et devient plus sombre, pour tendre vers le noir.

Pourquoi le résultat est-il différent du mélange de peinture ? Parce que cet outil utilise le modèle RGB (lumière), pas le mélange de pigments. Sur un écran, rouge + bleu = magenta. Avec de la peinture, les pigments absorbent la lumière différemment, ce qui donne un résultat visuel différent.

Puis-je utiliser directement les codes de couleur obtenus en CSS ? Oui. Les valeurs HEX, RGB et HSL sont directement utilisables en CSS et dans la plupart des outils de design.

Que représente le « niveau » sur chaque verre ? Il indique la quantité relative de cette couleur dans le mélange. Un verre au niveau 8 contribue deux fois plus au mélange qu'un verre de la même couleur au niveau 4.