Mélangeur de couleurs, gratuit

Comment fonctionne le mélange de couleurs

Cet outil utilise un mélange additif dans l'espace colorimétrique RGB. Les composantes RGB de chaque couleur sont moyennées selon leur pondération. Cela simule la façon dont la lumière se mélange (comme des projecteurs qui se chevauchent), contrairement au mélange soustractif (comme mélanger de la peinture).

Puis-je mélanger plus de deux couleurs ?

Oui ! Cliquez sur « + Ajouter une couleur » pour ajouter jusqu'à 8 couleurs. Utilisez les curseurs de pondération pour contrôler la contribution de chaque couleur au mélange.

Comment utiliser

1. Choisissez vos couleurs : utilisez les sélecteurs pour choisir chaque couleur. Cliquez sur « + Ajouter une couleur » pour ajouter plus d'emplacements (jusqu'à 8).
2. Réglez le poids de chaque couleur : faites glisser le curseur sous chaque couleur pour contrôler sa contribution au mélange final.
3. Prévisualisez le résultat : la couleur mélangée est affichée en direct avec ses valeurs hex, RGB et HSL.
4. Copiez la couleur mélangée : cliquez pour copier la valeur hex ou RGB obtenue, à utiliser dans votre design ou votre code.

Pourquoi utiliser le mélangeur de couleurs ?

Mélanger des couleurs est une opération fondamentale en design, créer des teintes (en mélangeant avec du blanc), des nuances (avec du noir), des tons (avec du gris) ou des couleurs intermédiaires harmonieuses entre deux couleurs de marque. Les designers s'en servent pour générer des variantes de palette, trouver des tons intermédiaires pour des paliers de dégradé, garantir des ratios de contraste accessibles entre couleurs adjacentes et créer des états de survol/focus liés visuellement aux couleurs de base.

Les trois choses que les gens veulent dire par "mélanger des couleurs"

Quand un non-spécialiste dit "mélanger deux couleurs", il veut presque toujours dire l'une de trois opérations complètement différentes. Choisir le mauvais modèle est la plus grande source de confusion dans les outils de couleur.

Le mélange additif est ce qui se passe lorsque des faisceaux de lumière colorée se superposent. Deux lampes de poche, une rouge et une verte, pointées vers le même morceau de mur blanc, produisent une tache jaune. Une troisième lampe bleue ajoutée par-dessus produit du blanc. Le modèle est "plus de lumière = plus clair" et les trois primaires sont rouge, vert et bleu parce que les cônes humains ont leurs sensibilités maximales à peu près dans ces bandes. Tout écran, téléphone, moniteur, télévision, projecteur, utilise le mélange additif. Chaque pixel contient trois sous-pixels (R, V, B), et les pousser tous les trois au maximum produit du blanc. C'est pourquoi le modèle de couleur par défaut du web est RGB : le médium est émissif, et le calcul correspond au médium.

Le mélange soustractif est ce qui se passe lorsque des colorants absorbent des longueurs d'onde de la lumière blanche. Une encre cyan absorbe la lumière rouge et reflète le vert et le bleu. Une encre jaune absorbe le bleu et reflète le rouge et le vert. Superposez cyan sur jaune et les seules longueurs d'onde qui survivent aux deux filtres sont les vertes. Le modèle est "plus de pigment = plus sombre", et les trois primaires soustractives sont cyan, magenta et jaune. CMJ se mélange en théorie au noir à pleine intensité, mais en pratique les pigments sont imparfaits et le résultat est un brun trouble, alors l'impression commerciale a ajouté une encre noire séparée (le K du CMJN) pour les vrais noirs. Un mélangeur de couleurs qui tourne sur un écran ne peut pas vraiment effectuer de mélange soustractif parce que l'écran lui-même est additif ; il ne peut qu'en simuler l'apparence.

La théorie traditionnelle des couleurs en art nous a appris que les couleurs primaires sont rouge, jaune et bleu. La tradition picturale, et la Théorie des couleurs de Goethe de 1810, et le manuel Bauhaus d'Itten L'art de la couleur de 1961, ont codifié RJB comme fondement des palettes d'artiste. RJB n'est pas physiquement exact. Les véritables primaires soustractives qui maximisent la gamme sont CMJ, pas RJB. Mais RJB a tenu pendant des siècles parce que les vraies peintures ne sont pas des filtres purement soustractifs : un tube de rouge cadmium et un tube de bleu outremer se mélangent en un violet reconnaissable, et le système "marche" suffisamment bien au chevalet pour enseigner des générations d'élèves. Cet outil est un mélangeur RGB additif, ce que le web fait vraiment, alors "rouge plus vert" donne du jaune, pas le brun que produirait un mélangeur de peinture.

Espaces de couleur, sRGB, Display P3, Rec. 2020, Adobe RGB

Un modèle de couleur (RGB, CMJN, HSL) dit quelles dimensions on a. Un espace de couleur dit exactement à quelles couleurs physiques chaque triplet numérique correspond : il fixe la chromaticité des primaires, le point blanc et la fonction de transfert. Deux écrans qui parlent tous les deux "RGB" peuvent produire des rouges visiblement différents pour le même code s'ils visent des espaces de couleur différents.

• Le sRGB (IEC 61966-2-1:1999) est le défaut du web et l'est depuis la fin des années 1990. Créé par Hewlett-Packard et Microsoft en 1996 pour standardiser la couleur entre moniteurs PC, scanners et le web naissant. Environ 35% de l'aire de chromaticité CIE 1931 visible. Tout ce qui ne précise pas d'espace de couleur sur le web est sRGB par convention.
• Le Display P3, l'introduction wide-gamut d'Apple. Apple a lancé l'iMac Retina 5K fin 2015 avec un affichage wide-gamut visant Display P3, puis l'a progressivement déployé sur l'iPhone (iPhone 7, septembre 2016), l'iPad Pro et la gamme MacBook Pro. ~25% de gamme plus large que sRGB, particulièrement dans les rouges et verts saturés. CSS Color Module Level 4 a ajouté la syntaxe color(display-p3 r g b).
• La Rec. 2020 (ITU-R Recommendation BT.2020, première publication 2012) est l'espace de couleur de la télévision ultra-haute définition et la base de la plupart des workflows HDR. ~75% du spectre visible avec des primaires qui se trouvent au lieu spectral. Presque aucun écran grand public ne peut reproduire aujourd'hui la gamme Rec. 2020 complète ; c'est une spec à compatibilité future.
• L'Adobe RGB (1998) défini par Adobe Systems pour donner aux photographes et aux maquettistes une gamme plus large que sRGB. Environ 50% plus large. Pas un espace de couleur web, les navigateurs ne le présument pas, mais les appareils photo professionnels, Lightroom et Photoshop le prennent par défaut pour les workflows d'impression.

Espaces de couleur perceptifs, et pourquoi mélanger en sRGB donne des points moyens troubles

Les coordonnées sRGB et HSL dans lesquelles la plupart des outils web stockent et manipulent la couleur ne sont pas perceptivement uniformes. Un pas unitaire dans le canal L de HSL ne correspond pas à un pas unitaire dans la luminosité perçue de la couleur. C'est la raison profonde pour laquelle mélanger deux couleurs en moyennant leurs canaux donne des résultats peu intuitifs.

L'exemple canonique : prenez du rouge pur #ff0000 et du vert pur #00ff00. Moyennez les canaux RGB composante par composante : le rouge passe de 255 à 127, le vert de 0 à 127, le bleu reste à 0. Le résultat est #7f7f00, un olive qui paraît terne, sombre et un peu boueux. Cela n'a rien à voir avec le jaune brillant #ffff00 que vous obtiendriez si vous braquiez vraiment une lampe rouge et une lampe verte sur le même morceau de mur. Deux problèmes cumulatifs expliquent ceci.

Premièrement, le sRGB est encodé en gamma. Le nombre stocké 127 ne représente pas la moitié de la lumière que représente 255. La fonction de transfert est non linéaire : 127 en sRGB correspond à environ 21% de l'intensité linéaire de la lumière, pas 50%. Donc quand on moyenne des valeurs encodées en gamma, on moyenne en gros une racine carrée d'intensité, pas l'intensité elle-même, et le résultat sort beaucoup plus sombre qu'il ne devrait. Le remède à ce seul problème est de convertir sRGB en RGB linéaire avant la moyenne, puis reconvertir. Avec une moyenne en RGB linéaire, rouge plus vert divisé par deux devient un vert-jaune bien plus lumineux et crédible.

Deuxièmement, même le RGB linéaire ne colle pas à la perception. Des pas égaux en RGB linéaire ne sont toujours pas des pas égaux en luminosité ou en chromaticité perçues. Le milieu de rouge et bleu en RGB linéaire est une lavande désaturée, pas le violet riche qu'un designer attend. Le remède à ce problème plus profond est de mélanger dans un espace perceptivement uniforme, Lab, Oklab, OKLCH. Convertir les deux extrémités en Oklab, interpoler linéairement les canaux L, a et b, reconvertir en sRGB. Le milieu de rouge et vert en Oklab est un jaune vif et crédible. Le milieu de rouge et bleu est un magenta saturé. Le milieu de jaune et bleu est un gris neutre propre au lieu du vert marécageux qu'on obtient en RGB naïf.

Cet outil moyenne actuellement en sRGB encodé en gamma, le modèle le plus simple et celui qui produit ces points moyens troubles. Il est correct pour ce cas simple mais ne correspond pas à ce que fait vraiment la lumière physique ou la perception humaine. Si vous choisissez des arrêts de dégradé ou des demi-tons de palette et que vous ne voulez pas le piège du gris boueux, utilisez la nouvelle fonction CSS color-mix() décrite ci-dessous ou l'une des bibliothèques de math de la couleur.

CIE Lab, Oklab, OKLCH, la pile perceptive

Le CIE Lab (aussi écrit CIELAB) a été publié par la Commission Internationale de l'Éclairage en 1976. Il a trois axes : L* pour la luminosité de 0 (noir) à 100 (blanc), a* pour l'axe chromatique vert-rouge et b* pour l'axe chromatique bleu-jaune. Conçu pour que des différences numériques égales correspondent à des différences perçues à peu près égales. Pendant un demi-siècle, c'était l'espace perceptif standard en graphisme, science de la vision et gestion des couleurs. Faiblesses connues : les bleus deviennent étrangement violets une fois interpolés ; l'axe de luminosité ne suit pas parfaitement la perception pour les couleurs très saturées.

Le CIE LCH est juste CIE Lab exprimé en coordonnées polaires : L pour la luminosité, C pour le chroma (distance à l'axe neutre), H pour l'angle de teinte. Plus utile que les bruts a*/b* pour les designers parce que des opérations comme "décale la teinte de 30 degrés" ou "descends le chroma à 0" se mappent directement à des modèles mentaux naturels.

L'Oklab, de Björn Ottosson, a été publié en décembre 2020 dans un essai intitulé "A perceptual color space for image processing" sur bottosson.github.io. Ottosson est un ingénieur suédois qui travaillait sur la couleur dans l'industrie du jeu. Oklab corrige la plupart des défauts connus de CIE Lab, en particulier le décalage bleu-violet à l'interpolation et la surprédiction des différences de chroma dans les couleurs saturées. Le W3C a adopté Oklab dans CSS Color Module Level 4 en à peu près un an après le billet d'Ottosson, une standardisation extraordinairement rapide pour un nouvel espace de couleur. Aujourd'hui chaque grand navigateur supporte oklab() nativement.

L'OKLCH est Oklab en coordonnées cylindriques : L pour la luminosité de 0 à 1, C pour le chroma de 0 à environ 0,4, H pour la teinte de 0 à 360 degrés. Il devient l'espace de couleur le plus recommandé pour les palettes de design system précisément parce que les opérations sur ses axes se mappent proprement aux intuitions des designers, et parce que l'interpolation entre deux couleurs OKLCH produit les dégradés les plus lisses et les plus agréables de tous les espaces actuellement disponibles en CSS.

La fonction CSS color-mix(), mélange perceptif sans JS

Le CSS Color Module Level 5 a introduit color-mix(), qui prend deux couleurs, un espace de couleur d'interpolation et des poids optionnels, et renvoie le résultat mélangé calculé entièrement par le navigateur. La syntaxe est color-mix(in oklch, red 50%, blue 50%). On peut changer d'espace (in srgb, in oklab, in lch, in hsl longer hue, etc.) et le calcul tourne dans cet espace. Le support navigateur est arrivé début 2023 :

• Safari 16.2, décembre 2022 (le premier navigateur à le livrer)
• Chrome 111, mars 2023
• Edge 111, mars 2023 (même release Chromium)
• Firefox 113, mai 2023

Un mélangeur de couleurs sans JavaScript et natif CSS est largement disponible depuis plus de deux ans maintenant. Tout outil qui s'appuie sur color-mix() obtient des résultats perceptivement corrects "gratuitement", le navigateur gère la pile de conversion. Le CSS Color Module Level 4 lui-même a atteint le statut de Candidate Recommendation en 2022 et est largement supporté dans les navigateurs modernes.

Bibliothèques JavaScript pour le calcul de la couleur

Trois bibliothèques dominent quand on ne peut ou ne veut pas s'appuyer sur color-mix() :

• culori.js de Dan Burzo, la plus flexible. Supporte presque chaque espace de couleur nommé (sRGB, RGB linéaire, P3, Rec. 2020, Lab, LCH, Oklab, OKLCH, HSL, HSV, Cubehelix, OKHSL, OKHSV, et plus). Tree-shakable, ESM-first. L'implémentation de référence pour la génération de palettes en OKLCH.
• colorjs.io de Lea Verou et Chris Lilley, la bibliothèque "des auteurs de la spec", en un sens, puisque Lilley co-édite les specs CSS Color Module. Fidèle à la sémantique de la spec CSS Color, bundle un peu plus gros que culori. Bon quand on veut des résultats qui collent exactement à ce que calculerait le navigateur.
• chroma-js de Gregor Aisch, plus ancienne, ergonomique, plus petite. Excellente pour les échelles de couleurs et l'interpolation simple. Support Lab et LCH mais pas d'Oklab dans la dernière release majeure ; des forks communautaires l'ont ajouté.

Une brève histoire de la théorie des couleurs

La théorie occidentale des couleurs commence avec Isaac Newton en 1665. Confiné loin de Cambridge pendant la peste, Newton fit passer la lumière du soleil à travers un prisme et identifia sept couleurs distinctes (rouge, orange, jaune, vert, bleu, indigo, violet). Il les arrangea ensuite sur un cercle fermé, le cercle chromatique de Newton, reliant les extrêmes spectraux (violet et rouge) par un magenta non spectral. Le cercle a été publié dans son Opticks en 1704 mais élaboré en 1665-1666.

Johann Wolfgang von Goethe publia Traité des couleurs (Zur Farbenlehre) en 1810. Là où Newton était un physicien, Goethe était un poète enquêtant sur la psychologie de la couleur : comment les couleurs étaient ressenties, contrastées et combinées dans l'esprit du spectateur. Son travail était scientifiquement faux sur de nombreux points mais a introduit des idées sur les couleurs complémentaires, les images consécutives et le caractère affectif des palettes chaudes et froides qui sont encore enseignées aujourd'hui.

Johannes Itten, maître au Bauhaus, publia L'art de la couleur (Kunst der Farbe) en 1961. Le cercle chromatique RJB à douze branches d'Itten et ses sept contrastes de couleur (teinte, clair-obscur, froid-chaud, complémentaires, simultané, saturation, extension) sont devenus le cadre d'enseignement dominant de l'éducation au design dans la seconde moitié du XXe siècle.

Pantone a été créée par Lawrence Herbert, qui a rejoint Pantone Inc. comme employé en 1956 et a acheté l'entreprise en 1962. En 1963, il a lancé le Pantone Matching System (PMS) : une bibliothèque normalisée d'encres tons directs identifiées par numéro, avec des nuanciers imprimés qui permettaient à un designer à New York et à un imprimeur à Hong Kong de spécifier et reproduire exactement la même couleur sans ambiguïté. Pantone n'est pas un espace de couleur au sens technique CIE, c'est un catalogue propriétaire de mélanges d'encre physiques, mais son influence sur les workflows couleur professionnels est énorme.

Les HSL et HSV ont été introduits par Alvy Ray Smith dans son article de 1978 "Color Gamut Transform Pairs", publié dans les actes SIGGRAPH alors qu'il était à Xerox PARC (Smith a plus tard cofondé Pixar). Il cherchait des coordonnées de couleur qui se mappent plus naturellement à l'intuition de l'artiste que RGB. HSL est devenu le modèle de couleur "design-friendly" par défaut sur le web et reste la notation non-RGB la plus largement reconnue en CSS. Il est cependant perceptivement non uniforme, OKLCH est son successeur moderne.

Contraste et accessibilité, WCAG 1.4.3

Quand un designer mélange deux couleurs pour en créer une troisième, un état hover, un fond teinté, un arrêt de dégradé, la couleur résultante doit toujours satisfaire les exigences de contraste face à tout texte ou icône placé par-dessus. Le critère de succès WCAG 2.x 1.4.3, "Contraste (minimum)", exige :

• Un ratio de contraste d'au moins 4,5:1 pour le texte de taille normale.
• Un ratio de contraste d'au moins 3:1 pour le grand texte (18pt régulier ou 14pt gras et au-dessus) et pour les objets graphiques et composants d'UI.

Le ratio de contraste se calcule en utilisant la luminance relative, la conversion en RGB linéaire décrite ci-dessus et une somme pondérée des canaux linéarisés (L = 0,2126·R + 0,7152·V + 0,0722·B). Le ratio entre deux couleurs est (L_plus_clair + 0,05) / (L_plus_sombre + 0,05). Implication pratique : les arrêts intermédiaires d'un dégradé peuvent passer le contrôle de contraste aux extrémités mais échouer dramatiquement au milieu. Si une marque mélange un bleu marine sombre avec un jaune vif pour produire un olive d'état hover, cet olive peut se retrouver dans la zone d'échec WCAG face au texte blanc comme au texte noir.

Autres questions

Pourquoi rouge plus vert ne me donne-t-il pas du brun ?

Parce que cet outil, comme tout écran, utilise un mélange RGB additif, et la lumière rouge plus la lumière verte donnent du jaune. Le brun est ce qu'on obtient en mélangeant de la peinture rouge et verte, ce qui est soustractif : chaque pigment absorbe des longueurs d'onde différentes et les longueurs d'onde survivantes paraissent brunes. Pour simuler précisément le "mélange de peinture" sur un écran, il faudrait un modèle spectral ou conscient des pigments (Procreate et Adobe Fresco le font pour les apps d'art) ; les mélangeurs de couleurs web génériques, dont celui-ci, sont d'honnêtes mélangeurs RGB additifs et vous donneront du jaune, pas du brun.

Mes points moyens paraissent troubles, quelle est la solution ?

Deux couches de solution. Le pas minimal de correction est le mélange en lumière linéaire : convertir sRGB en RGB linéaire avant la moyenne, puis retourner. À lui seul cela rend rouge+vert→jaune bien plus lumineux et crédible. La solution perceptive complète est de mélanger en OKLCH ou Oklab, convertir les deux extrémités en OKLCH, interpoler, reconvertir. La CSS color-mix(in oklch, red, green) du navigateur fait exactement cela en une ligne et marche dans tout navigateur livré après mai 2023. Pour des pipelines JavaScript, culori.js est la bibliothèque de référence.

Quel est le bon espace de couleur pour mélanger des palettes de design system ?

L'OKLCH est la réponse consensuelle actuelle. Il est perceptivement uniforme, a des axes propres qui correspondent à l'intuition des designers (luminosité / chroma / teinte), produit des interpolations de dégradés sans points moyens troubles, et est livré dans tout navigateur moderne via oklch() en CSS Color 4 et color-mix(in oklch, ...) en CSS Color 5. Les design systems construits en 2024-2026 passent de plus en plus des palettes HSL aux palettes OKLCH pour exactement cette raison.

Ma couleur mélangée passera-t-elle les contrôles de contraste WCAG ?

Cet outil n'expose pas actuellement le ratio de contraste du résultat, mais on peut le calculer : la luminance WCAG est L = 0,2126·R + 0,7152·V + 0,0722·B après linéarisation des canaux sRGB, et le ratio de contraste entre deux couleurs est (L_plus_clair + 0,05) / (L_plus_sombre + 0,05). Les cibles sont 4,5:1 pour le texte normal et 3:1 pour le grand texte ou les composants d'UI. Le vérificateur de contraste de couleur dans la zone des outils associés fait ce calcul directement.

Outils associés