Cercle chromatique : couleurs primaires, harmonies et webdesign

Le cercle chromatique est une représentation ordonnée des couleurs, utilisée en peinture, en design et dans les arts graphiques. Il permet de comprendre leurs relations, de repérer les couleurs complémentaires et de construire des associations harmonieuses. Aussi appelé cercle des couleurs, il existe sous plusieurs formes selon les usages. Ce guide présente son histoire, ses différents types, les couleurs primaires, les synthèses additive et soustractive, les harmonies et leur application en webdesign.

Qu’est-ce qu’un cercle chromatique ?

Un cercle chromatique est un diagramme qui organise les couleurs pures selon leur ordre dans le spectre visible. Les teintes suivent la succession de l’arc-en-ciel, du rouge au violet, puis le cercle se referme par les pourpres.

Sur le cercle des couleurs, deux teintes diamétralement opposées sont dites complémentaires. Leurs positions facilitent la recherche de contrastes, tandis que les couleurs voisines permettent de composer des ensembles plus doux. Selon le modèle choisi, la disposition des teintes varie. Le cercle sert ainsi de repère en peinture, en design, en mode et dans les arts graphiques.

Un peu d’histoire

L’histoire du cercle chromatique montre comment les artistes et les chercheurs ont progressivement organisé les couleurs du spectre chromatique et leurs relations.

• En 1704, Newton présente dans Opticks les couleurs du spectre sur la périphérie d’un disque, avec du gris au centre. En 1708, Claude Boutet propose deux cercles, l’un de 7 couleurs et l’autre de 12.
• En 1810, Goethe présente dans son Traité des couleurs un cercle symétrique qui met en relation des couleurs opposées.
• Chevreul développe un cercle divisé en 72 sections et définit la notion de couleur complémentaire.
• Au milieu du XIXe siècle, Hering construit un disque chromatique fondé sur deux paires d’oppositions entre les couleurs.
• Munsell retient cinq teintes de base : rouge, jaune, vert, bleu et pourpre. Itten (1888-1967), enseignant au Bauhaus de 1919 à 1923, part d’un triangle réunissant un jaune, un bleu profond et un rouge, puis développe un cercle par mélange.

Quel type de cercle chromatique choisir ?

Tous les cercles chromatiques ne reposent pas sur la même logique. Certains facilitent le travail des artistes, d’autres décrivent les mélanges de couleurs ou cherchent à représenter notre perception visuelle.

• Le cercle des artistes : il met en évidence les contrastes, comme entre le rouge et le vert ou entre le violet et le jaune. Le modèle d’Itten associe un cercle à un triangle de couleurs primaires pour expliquer leurs mélanges.
• Le cercle technique : il représente les couleurs selon leur mode de production. En synthèse additive, les primaires rouge, vert et bleu sont espacées de 120°. En synthèse soustractive, les mélanges reposent sur le cyan, le magenta et le jaune.
• Le cercle perceptuel : les approches de Chevreul, Hering et Munsell cherchent à organiser les couleurs en tenant compte de la perception visuelle.

Pour peindre, privilégiez un cercle d’artiste. Pour travailler sur écran, choisissez un modèle RVB. Pour préparer une impression couleur, référez-vous au modèle CMJN.

Couleurs primaires, secondaires et tertiaires

Les couleurs primaires servent de point de départ à la construction d’un cercle chromatique. Une primaire ne peut pas être obtenue par le mélange d’autres couleurs dans le modèle considéré. Leur choix dépend donc de la technique utilisée.

• RJB (rouge, jaune, bleu) : c’est le modèle traditionnel enseigné dans les cours d’art. Il aide à organiser les couleurs et parfois à mélanger des pigments, mais son absence de base scientifique solide est critiquée. Il n’est pas équivalent au modèle CMJ.
• RVB (rouge, vert, bleu) : ces primaires correspondent aux lumières colorées utilisées sur les écrans.
• CMJN (cyan, magenta, jaune, noir) : ce modèle est employé pour l’impression. Le cyan, le magenta et le jaune sont les primaires soustractives, auxquelles s’ajoute le noir.

Dans le cercle RJB traditionnel, le mélange des primaires forme les couleurs secondaires : orange, vert et violet. Une couleur tertiaire résulte ensuite du mélange d’une primaire avec une secondaire voisine. On obtient ainsi un cercle de douze couleurs.

Les complémentaires dépendent également du modèle. En RJB, le rouge est opposé au vert et le jaune au violet.

Synthèse additive et synthèse soustractive

La synthèse additive et la synthèse soustractive décrivent deux façons différentes de produire des couleurs. La première mélange des lumières, tandis que la seconde repose sur l’absorption de la lumière par des colorants.

La synthèse additive fonctionne ainsi :

• Elle combine des lumières colorées, généralement le rouge, le vert et le bleu (RVB).
• Lorsque ces trois lumières sont correctement dosées, leur combinaison donne du blanc. En l’absence de lumière, on obtient du noir.
• Elle est utilisée pour les écrans et les projecteurs, qui produisent des couleurs à partir de lumière.

La synthèse soustractive suit une autre logique :

• Elle repose sur l’absorption de la lumière par des colorants, comme les pigments et les encres.
• Ses primaires sont le cyan, le magenta et le jaune (CMJ), complémentaires des primaires RVB. Leur mélange absorbe toute la lumière et donne théoriquement du noir.
• Elle intervient en photographie argentique et en impression couleur. En quadrichromie, on ajoute une encre noire (CMJN), car les encres colorées ne produisent pas un noir suffisamment neutre et profond.

Le modèle RJB traditionnel des peintres n’est pas exactement une synthèse soustractive. La peinture artistique ne relève d’ailleurs pas strictement de ce cadre.

Les harmonies du cercle chromatique

Les harmonies chromatiques permettent d’associer les couleurs selon leur position sur le cercle. Elles servent à créer une ambiance cohérente, à renforcer un contraste ou à mettre en valeur un élément.

• Harmonie monochrome : elle utilise une seule teinte, déclinée en différents tons et nuances. Le résultat conserve une forte unité visuelle.
• Couleurs analogues : elles sont voisines sur le cercle chromatique. On choisit une dominante et deux teintes proches, situées vers 30° et 330° par rapport à la couleur de départ. Cette association produit des transitions douces.
• Couleurs complémentaires : elles se trouvent à l’opposé l’une de l’autre sur le cercle, à 180°. Leur association crée un contraste marqué.
• Complémentaire scindée : elle associe une couleur de base à deux teintes situées à 150° et 210°. Elle conserve un contraste visible, avec moins de tension qu’une paire complémentaire directe.
• Triade : elle réunit trois couleurs régulièrement espacées, avec une base et deux teintes à 120° et 240°. Elle offre une répartition équilibrée des couleurs.
• Tétrade ou carré : la tétrade, également appelée double complémentaire, associe deux paires de couleurs opposées. Le carré utilise quatre teintes espacées de 90° sur le cercle.

Pour réussir votre palette, choisissez une couleur dominante et laissez les autres jouer un rôle secondaire. Une harmonie bien répartie reste plus facile à lire qu’un ensemble où toutes les teintes attirent également l’attention.

Le cercle chromatique en webdesign

En webdesign (voir aussi créer son premier site avec WordPress et le thème Astra), le cercle chromatique des couleurs aide à choisir les teintes d’une interface, à créer des palettes cohérentes et à comprendre leurs relations. Les écrans utilisent le modèle RVB, fondé sur les composantes rouge, vert et bleu. Chacune prend une valeur comprise entre 0 et 255.

Ces couleurs peuvent aussi s’écrire en notation hexadécimale, sous la forme #RRGGBB. Chaque paire indique l’intensité d’une composante, de 00 à ff. La forme #RGB est une écriture abrégée, et les lettres peuvent être écrites en majuscules ou en minuscules.

Le modèle HSL décrit une couleur par sa teinte, sa saturation et sa luminosité. La teinte correspond à un angle sur la roue : 10° et 190° désignent des couleurs complémentaires. La saturation va de 0 % (gris) à 100 % (pleinement saturé). La luminosité va de 0 % (noir) à 100 % (blanc), avec 50 % comme niveau normal. Par exemple, hsl(0 100% 50%) correspond à rgb(255 0 0).

Le tableau suivant présente une roue numérique de douze teintes HSL, espacées de 30°, avec une saturation de 100 % et une luminosité de 50 %. Cette roue de type RVB diffère du cercle RJB traditionnel des peintres.

Teinte	Nom approximatif	Code hexadécimal
0°	rouge	#FF0000
30°	orange	#FF8000
60°	jaune	#FFFF00
90°	vert jaune	#80FF00
120°	vert	#00FF00
150°	vert printemps	#00FF80
180°	cyan	#00FFFF
210°	azur	#0080FF
240°	bleu	#0000FF
270°	violet	#8000FF
300°	magenta	#FF00FF
330°	rose framboise	#FF0080

Contraste, règle 60-30-10 et outils

Une palette réussie doit rester lisible, surtout lorsque les couleurs servent à afficher du texte. Le contraste, la répartition des teintes et les outils de création permettent de mieux maîtriser le résultat.

• Vérifiez le contraste : selon le critère 1.4.3 des WCAG 2.1, le niveau AA demande un rapport d’au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Ce dernier correspond à une taille de 18 points, ou de 14 points en gras. Une belle harmonie ne suffit donc pas à assurer une lecture confortable.
• Essayez la règle 60-30-10 : ce conseil courant en design consiste à réserver 60 % de la composition à une couleur dominante, 30 % à une couleur secondaire et 10 % à une teinte d’accent. Ce n’est pas une norme, mais un repère pour répartir les couleurs.
• Utilisez Adobe Color : cet outil en ligne propose une roue chromatique pour explorer les harmonies monochromatiques, complémentaires, analogues, triadiques et complémentaires scindées. Il permet de comparer différentes associations avant de retenir votre palette.

Comment bien marier les couleurs ?

Pour bien marier les couleurs, commencez par choisir une teinte dominante adaptée à votre projet. Elle servira de point de départ à votre palette. Repérez ensuite ses voisines ou sa complémentaire sur le cercle chromatique, selon l’effet recherché.

Si vous souhaitez une composition douce, privilégiez les couleurs analogues ou les variations monochromes. Pour créer un contraste plus marqué, tournez-vous vers les complémentaires. Une triade permet également de répartir plusieurs teintes dans une même composition.

Limitez le nombre de couleurs principales afin de conserver une lecture claire. Donnez à chaque teinte un rôle identifiable : dominante, accompagnement ou accent. Enfin, vérifiez le rendu sur écran, comme le conseillent nos critères pour un site web efficace. Les couleurs doivent fonctionner ensemble, mais aussi laisser les textes et les éléments essentiels bien visibles.

Ce qu’il faut retenir

• Le cercle chromatique organise les couleurs du spectre et aide à repérer leurs relations, dont les complémentaires.
• Les modèles RJB, RVB et CMJN répondent à des usages différents : peinture traditionnelle, écrans et impression.
• Les harmonies monochromes, analogues, complémentaires ou en triade facilitent la création de palettes cohérentes.
• En webdesign, les notations RVB, hexadécimale et HSL permettent de définir les couleurs, tandis que le contraste assure leur lisibilité.

Le bon cercle des couleurs dépend surtout de votre support et de l’effet visuel que vous souhaitez obtenir.

Questions fréquentes

Quelles sont les couleurs primaires ?

Les couleurs primaires dépendent du modèle utilisé. En peinture traditionnelle, le cercle RJB repose sur le rouge, le jaune et le bleu, même si ce modèle présente des limites scientifiques. Sur les écrans, les primaires sont le rouge, le vert et le bleu (RVB). Pour l’impression, ce sont le cyan, le magenta et le jaune (CMJ), auxquels s’ajoute le noir en quadrichromie (CMJN).

Qu’est-ce qu’une couleur complémentaire ?

Une couleur complémentaire se situe à l’opposé d’une autre sur le cercle chromatique, à 180°. Elle permet de créer un contraste entre deux teintes. Dans le cercle RJB traditionnel des peintres, le rouge est complémentaire du vert et le jaune du violet. Les associations changent selon le modèle utilisé : les primaires soustractives cyan, magenta et jaune sont complémentaires des primaires additives rouge, vert et bleu.

Quelle différence entre synthèse additive et soustractive ?

La synthèse additive mélange des lumières colorées, généralement rouge, vert et bleu (RVB). Leur combinaison, lorsqu’elles sont correctement dosées, produit du blanc, tandis que l’absence de lumière donne du noir. Elle est utilisée sur les écrans et les projecteurs. La synthèse soustractive repose sur l’absorption de lumière par des colorants cyan, magenta et jaune. Leur mélange donne théoriquement du noir. En impression couleur, on ajoute une encre noire pour obtenir un résultat plus neutre et profond.