Couleurs primaires, secondaires et tertiaires : les 12 couleurs du cercle chromatique
La réponse courte
Une couleur tertiaire est une couleur obtenue en mélangeant à parts égales une couleur primaire et la couleur secondaire voisine sur le cercle chromatique. Le cercle chromatique traditionnel compte 12 couleurs : 3 primaires, 3 secondaires et 6 tertiaires.
- 3 primaires : rouge, jaune, bleu
- 3 secondaires : orange, vert, violet
- 6 tertiaires : jaune-orangé, rouge-orangé, rouge-violet, bleu-violet, bleu-vert, jaune-vert
Les couleurs tertiaires sont les six couleurs qui complètent le cercle chromatique, entre les trois primaires et les trois secondaires. On les obtient en mélangeant une primaire avec la secondaire qui la touche : le jaune et l’orange donnent le jaune-orangé, le bleu et le violet donnent le bleu-violet. C’est la couche du cercle chromatique que la plupart des gens connaissent le moins, et c’est pourtant celle qui rend les palettes intéressantes.
Cet article donne les trois listes complètes, avec les noms usuels de chaque couleur. Il explique aussi pourquoi les couleurs primaires ne sont pas les mêmes en peinture et à l’écran, et pourquoi certaines sources parlent de sept couleurs primaires alors qu’il n’y en a que trois.
La deuxième moitié de l’article passe du vocabulaire à la pratique : comment assembler une palette qui tient la route sur un site web, comment vérifier son contraste, et quelles erreurs reviennent le plus souvent. Nous sommes une agence web à Montréal et nous concevons des sites WordPress depuis 2001. Les chiffres de contraste présentés plus bas viennent de mesures faites sur notre propre palette de marque.
Les 12 couleurs du cercle chromatique, en un coup d’œil
Le cercle chromatique traditionnel organise 12 couleurs en trois familles : 3 primaires, 3 secondaires et 6 tertiaires. Cette structure à 12 couleurs est celle que Johannes Itten, maître du Bauhaus, formalise dans The Art of Color (Van Nostrand Reinhold, 1973). Elle sert encore de base à la plupart des outils de palette utilisés en design web.
Le tableau des 12 couleurs
| Famille | Combien | Lesquelles | Comment on les obtient |
|---|---|---|---|
| Primaires | 3 | Rouge, jaune, bleu | Aucun mélange ne les produit |
| Secondaires | 3 | Orange, vert, violet | Deux primaires à parts égales |
| Tertiaires | 6 | Jaune-orangé, rouge-orangé, rouge-violet, bleu-violet, bleu-vert, jaune-vert | Une primaire et sa secondaire voisine |
3 + 3 + 6 = 12. Chaque couleur tertiaire porte un nom composé de ses deux parents. C’est la règle de nommage la plus fiable pour ne pas se tromper.
Les 3 couleurs primaires
Les couleurs primaires sont les trois couleurs de base qu’aucun mélange ne permet d’obtenir. Dans le cercle chromatique traditionnel, ce sont le rouge, le jaune et le bleu. Toutes les autres couleurs du cercle descendent de ces trois-là.
Ce point mérite une précision, parce que c’est là que la confusion commence : les couleurs primaires ne sont pas les mêmes selon qu’on mélange de la matière ou de la lumière.
Les primaires en peinture et en impression
En peinture, on travaille en synthèse soustractive : chaque pigment ajouté absorbe une partie de la lumière. Les primaires du modèle traditionnel sont le rouge, le jaune et le bleu (RJB). C’est le modèle enseigné à l’école et celui du cercle chromatique classique.
L’imprimerie professionnelle utilise une variante plus précise, le CMJN : cyan, magenta, jaune et noir. Le cyan et le magenta remplacent le bleu et le rouge, parce qu’ils couvrent une gamme de teintes plus large à l’impression. Si vous préparez une carte d’affaires en même temps que votre site, c’est en CMJN que le graphiste travaillera.
Les primaires en lumière : le RVB de votre écran
À l’écran, on travaille en synthèse additive : chaque pixel émet de la lumière. Les primaires deviennent le rouge, le vert et le bleu (RVB). Le vert, qui est une couleur secondaire en peinture, est donc une couleur primaire sur le web.
Toutes les couleurs de votre site web sont des combinaisons de rouge, vert et bleu. Elles s’écrivent en notation hexadécimale, comme #00CCCC pour le turquoise de notre identité de marque. Les deux premiers caractères donnent la dose de rouge, les deux suivants le vert, les deux derniers le bleu.
Pourquoi certains parlent de 7 couleurs primaires
Il n’existe pas 7 couleurs primaires. La confusion vient des 7 couleurs du spectre décrites par Isaac Newton dans Opticks, publié en 1704 : rouge, orange, jaune, vert, bleu, indigo et violet (source : Encyclopædia Britannica, « Opticks »).
Ces 7 couleurs sont les bandes que Newton a distinguées en décomposant la lumière blanche avec un prisme. Ce sont les couleurs de l’arc-en-ciel, pas des couleurs primaires. Un spectre est un continuum : le nombre de bandes qu’on y nomme est une convention, pas une propriété physique.
Les 3 couleurs secondaires
Une couleur secondaire est obtenue en mélangeant deux couleurs primaires à parts égales. Le cercle chromatique traditionnel en compte trois :
- Orange = rouge + jaune
- Vert = jaune + bleu
- Violet = rouge + bleu
Sur le cercle, chaque secondaire se place exactement entre les deux primaires qui la composent. L’orange sépare le rouge du jaune, le vert sépare le jaune du bleu, le violet sépare le bleu du rouge.
En design web, la couleur secondaire joue souvent le rôle de couleur d’accent. C’est elle qui porte le bouton « Demander une soumission » et qui attire l’œil vers l’action principale de la page.
Les 6 couleurs tertiaires, nommées une par une
Une couleur tertiaire s’obtient en mélangeant une couleur primaire avec la couleur secondaire adjacente sur le cercle chromatique. Comme chaque primaire touche deux secondaires, on obtient exactement 6 couleurs tertiaires.
Les 6 couleurs tertiaires
Jaune-orangéambre · #FFBF00
Rouge-orangévermillon · #E34234
Rouge-violetpourpre · #C71585
Bleu-violet · indigo · #4B0082
Bleu-vert · sarcelle · #008080
Jaune-vert · chartreuse · #9ACD32
Voici les 6 couleurs tertiaires, avec leur composition et leur nom usuel. Les valeurs hexadécimales sont indicatives : le rendu exact varie d’un écran à l’autre.
| Couleur tertiaire | Mélange | Nom usuel | Hex indicatif |
|---|---|---|---|
| Jaune-orangé | Jaune + orange | Ambre, safran | #FFBF00 |
| Rouge-orangé | Rouge + orange | Vermillon | #E34234 |
| Rouge-violet | Rouge + violet | Pourpre, magenta | #C71585 |
| Bleu-violet | Bleu + violet | Indigo | #4B0082 |
| Bleu-vert | Bleu + vert | Sarcelle, turquoise | #008080 |
| Jaune-vert | Jaune + vert | Chartreuse, anis | #9ACD32 |
Les couleurs tertiaires sont très présentes en design contemporain. Elles sont moins criardes que les primaires et moins attendues que les secondaires. Le turquoise de notre propre identité de marque, #00CCCC, appartient à cette famille : c’est un bleu-vert.
Couleurs tertiaires ou couleurs intermédiaires ?
Les deux expressions désignent la même chose. « Couleurs intermédiaires » est le terme courant en français, parce que ces couleurs se situent entre une primaire et une secondaire sur le cercle. « Couleurs tertiaires » est la traduction directe de l’anglais tertiary colors.
Une nuance existe toutefois en peinture. Certains auteurs réservent le mot « tertiaire » au mélange de deux couleurs secondaires, qui produit des tons rompus et grisés, et gardent « intermédiaire » pour le mélange primaire + secondaire. Sur le web, l’usage dominant est celui présenté dans cet article : 6 couleurs tertiaires issues d’une primaire et d’une secondaire.
Construire une palette : les 4 schémas de couleurs
Un schéma de couleurs est une règle de sélection qui détermine la position des couleurs choisies sur le cercle chromatique. Connaître les 12 couleurs ne suffit pas : ce qui fait tenir une palette, c’est la relation entre les couleurs retenues.
Monochromatique
Une seule teinte, déclinée en plusieurs valeurs plus claires ou plus sombres. Le résultat est cohérent et très sûr. C’est le schéma des marques qui veulent projeter de l’unité et de la clarté.
Exemple : un site entièrement en nuances de bleu, du bleu marine pour les fonds jusqu’au bleu pâle pour les icônes.
Complémentaire
Deux couleurs opposées sur le cercle chromatique. Le contraste est maximal, donc l’effet est dynamique. Une seule des deux doit dominer, l’autre reste réservée aux accents.
Exemple : un fond bleu profond avec des boutons orange. L’œil va droit à l’appel à l’action.
Analogue
Trois couleurs voisines sur le cercle chromatique. L’effet est harmonieux et calme. Les secteurs de la santé, de la finance et du bien-être l’utilisent beaucoup.
Triadique
Trois couleurs équidistantes sur le cercle chromatique. La palette est vibrante et équilibrée. Elle convient aux marques jeunes et aux univers créatifs.
La psychologie des couleurs en web design
Les couleurs déclenchent des associations émotionnelles avant même que le texte soit lu. Ces associations sont culturelles et ne sont pas universelles, mais elles sont stables dans le marché nord-américain francophone.
Bleu → confiance, stabilité, professionnalisme. C’est la couleur dominante des banques, des assureurs et des cabinets professionnels.
Rouge → urgence, énergie, passion. Efficace sur une promotion ou un bouton d’achat immédiat. Il fatigue vite s’il occupe de grandes surfaces.
Vert → croissance, santé, permission. C’est la couleur des marques écologiques et des produits naturels.
Orange → chaleur, accessibilité, créativité. Excellent choix de bouton en B2B : moins agressif que le rouge, plus lisible que le jaune.
Noir → luxe, autorité, sophistication. Très présent dans la mode, la technologie haut de gamme et les agences créatives.
Blanc → clarté, simplicité, espace. C’est le repos de l’œil entre deux blocs de contenu.
Jaune → optimisme, attention, jeunesse. Difficile à utiliser en couleur principale sur le web, car il devient illisible sur fond blanc.
Violet → créativité, mystère, spiritualité. Rare en B2B traditionnel, courant dans les secteurs créatifs.
Contraste et accessibilité : le test que peu de PME font
Le contraste est le rapport de luminance entre la couleur du texte et celle du fond. Les normes WCAG fixent un seuil chiffré, et ce seuil est indépendant du goût de chacun.
Selon les critères WCAG 2.1, le niveau AA exige un ratio de contraste d’au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte, soit 18 points ou 14 points en gras. Le niveau AAA monte l’exigence à 7:1 pour le texte courant. Source : WebAIM, « Contrast and Color Accessibility ».
L’enjeu est loin d’être théorique. Selon l’organisme britannique Colour Blind Awareness (page mise à jour en avril 2022), le daltonisme touche environ 1 homme sur 12, soit 8 %, et 1 femme sur 200. L’organisme estime à 300 millions le nombre de personnes daltoniennes dans le monde. Source : colourblindawareness.org.
Conséquence pratique : une information ne doit jamais reposer sur la couleur seule. Un champ de formulaire en erreur doit porter une icône ou un texte, pas seulement une bordure rouge.
Ce qu’on a mesuré sur notre propre palette
Nous avons appliqué la formule de luminance relative des WCAG à notre palette de marque, en septembre 2026. Les quatre couleurs testées sont notre bleu nuit #0C172B, notre turquoise #00CCCC, notre fond crème #F3F1ED et le blanc pur.
| Texte sur fond | Ratio mesuré | Verdict WCAG AA |
|---|---|---|
| Bleu nuit #0C172B sur blanc | 17,9:1 | Conforme, dépasse même le AAA |
| Bleu nuit #0C172B sur crème #F3F1ED | 15,9:1 | Conforme, dépasse même le AAA |
| Turquoise #00CCCC sur blanc | 2,0:1 | Non conforme pour du texte |
| Turquoise #00CCCC sur bleu nuit #0C172B | 9,0:1 | Conforme, dépasse même le AAA |
Le résultat qui compte est le troisième. Notre turquoise de marque plafonne à 2,0:1 sur fond blanc, très loin du seuil de 4,5:1. Nous ne l’utilisons donc jamais pour du texte sur fond clair. Il sert d’aplat, de filet et de bordure, et il porte du texte uniquement sur fond bleu nuit, où le ratio atteint 9,0:1.
C’est le compromis qu’aucun outil de palette ne fait à votre place. Une couleur de marque peut être excellente en aplat et inutilisable en texte. La mesure tranche en dix secondes, l’intuition se trompe souvent.
Méthode : formule de luminance relative définie par les WCAG, appliquée aux valeurs hexadécimales de notre charte, vérifiée en septembre 2026. Le même calcul est disponible gratuitement dans WebAIM Contrast Checker et dans les outils de développement de Chrome.
5 erreurs courantes avec les couleurs sur un site web
1. Trois couleurs vives de même intensité. Le résultat est un chaos visuel où rien ne ressort. La règle du 60/30/10 est un repère fiable : 60 % pour la couleur dominante, 30 % pour la secondaire, 10 % pour l’accent.
2. Ignorer le mode sombre. Une partie des visiteurs navigue en mode sombre. Une palette qui n’a été testée que sur fond blanc peut devenir illisible.
3. Copier les couleurs d’un concurrent. Si votre principal concurrent utilise le même bleu que vous, vous devenez interchangeables. La couleur est un levier de différenciation gratuit.
4. Choisir selon ses goûts personnels. Vos couleurs préférées ne sont pas nécessairement celles qui convertissent votre clientèle. La décision se prend en fonction de l’audience et du secteur.
5. Négliger la cohérence hors du site. Une carte d’affaires rouge et un site bleu envoient deux signaux différents. L’incohérence visuelle érode la confiance.
Choisir ses couleurs, c’est une décision de conception
Une palette n’est pas un choix esthétique isolé. Elle conditionne la lisibilité, l’accessibilité et le taux de clic sur vos boutons d’appel à l’action. Nous intégrons ces vérifications de contraste à chaque projet de création de site web pour une PME, avant même la première maquette.
Pour aller plus loin sur les choix visuels de votre site, deux articles complètent celui-ci : la différence entre l’UX et l’UI et le responsive design.
Conception de site web — Montréal et Bromont
Votre palette est-elle lisible, ou seulement jolie ?
Depuis 2001, Agence Chocolat conçoit des sites WordPress où chaque couleur est vérifiée au ratio de contraste avant d’être retenue. Nous travaillons avec des PME du Québec, de Montréal aux Cantons-de-l’Est.
