Cercle chromatique

COMPRENDRE · COMPARER · CRÉER

Accords du cercle chromatique en peinture et sur écran

Sur la roue de peinture, le bleu et l’orange se font face. Partez d’une teinte pour tracer son accord ou gardez deux teintes pour trouver celle qui les relie.

Sommaire complet de la page

Trouver un accord en peinture#

En peinture, le bleu a pour complémentaire l’orange. Sa triade réunit bleu, rouge et jaune. Choisissez une famille sur la roue rouge-jaune-bleu (RYB) pour construire votre accord.

Bleu et orange, secteurs 9 et 3 de la roue RYB1. Rouge12. Rouge-orangé23. Orange34. Jaune-orangé45. Jaune56. Jaune-vert67. Vert78. Bleu-vert89. Bleu910. Bleu-violet1011. Violet1112. Rouge-violet12

Bleu + Orange

Partez de la base et traversez le centre. La famille opposée se trouve six secteurs plus loin.

Secteurs 9, 3.

Lire le tableau des douze couleurs de départ

Pour un carré autour du bleu, avancez de trois cases à chaque fois. Vous passez du bleu au rouge-violet, puis à l’orange et au jaune-vert avant de revenir au bleu. Voir les quatre sommets sur la roue.

Familles à associer à la base sur notre roue RYB. Les numéros suivent la roue à imprimer.
BaseFamille opposéeDeux voisinesDeux autres en triadeVoisines de l’opposéeCarré
1. Rougevertrouge-violet et rouge-orangéjaune et bleujaune-vert et bleu-vertJaune-orangé · Vert · Bleu-violet
2. Rouge-orangébleu-vertrouge et orangejaune-vert et bleu-violetvert et bleuJaune · Bleu-vert · Violet
3. Orangebleurouge-orangé et jaune-orangévert et violetbleu-vert et bleu-violetJaune-vert · Bleu · Rouge-violet
4. Jaune-orangébleu-violetorange et jaunebleu-vert et rouge-violetbleu et violetVert · Bleu-violet · Rouge
5. Jaunevioletjaune-orangé et jaune-vertbleu et rougebleu-violet et rouge-violetBleu-vert · Violet · Rouge-orangé
6. Jaune-vertrouge-violetjaune et vertbleu-violet et rouge-orangéviolet et rougeBleu · Rouge-violet · Orange
7. Vertrougejaune-vert et bleu-vertviolet et orangerouge-violet et rouge-orangéBleu-violet · Rouge · Jaune-orangé
8. Bleu-vertrouge-orangévert et bleurouge-violet et jaune-orangérouge et orangeViolet · Rouge-orangé · Jaune
9. Bleuorangebleu-vert et bleu-violetrouge et jaunerouge-orangé et jaune-orangéRouge-violet · Orange · Jaune-vert
10. Bleu-violetjaune-orangébleu et violetrouge-orangé et jaune-vertorange et jauneRouge · Jaune-orangé · Vert
11. Violetjaunebleu-violet et rouge-violetorange et vertjaune-orangé et jaune-vertRouge-orangé · Jaune · Bleu-vert
12. Rouge-violetjaune-vertviolet et rougejaune-orangé et bleu-vertjaune et vertOrange · Jaune-vert · Bleu

Imprimer les quatre accords autour du bleu (PDF A4, 1 page) · Lire la numérotation des douze familles.

Quel accord former avec deux couleurs déjà choisies ?#

Une affiche est déjà imprimée en orange et en jaune. Quelle troisième encre choisir ? Un jaune-orangé relie les deux teintes par petites étapes. Un bleu-violet introduit au contraire un accent éloigné des deux. Les deux solutions se construisent sur la même roue de peinture.

Orange et jaune

Le trajet le plus court sur la roue compte 2 intervalles de 30°, soit 60°.

Les deux secteurs doivent appartenir à la même figure. Les analogues occupent ici trois secteurs consécutifs. Une triade avance de quatre en quatre et un carré de trois en trois. Pour un accord divisé, les deux voisines de la complémentaire remplacent celle-ci. Les secteurs indiquent des familles de teintes, indépendamment des pigments ou des quantités d’encre.

Télécharger les accords des 66 paires (CSV) · Voir les figures expliquées par l’université du Delaware. Le fichier donne une ligne par solution, avec les numéros de secteur pour la retrouver sur la roue.

Lire les six écarts possibles sans manipuler la roue

Comptez les intervalles par le chemin le plus court. Avec quatre intervalles, une seule troisième famille complète la triade. Avec deux intervalles, on peut soit remplir le secteur du milieu, soit prendre l’accent éloigné de l’accord divisé.

Exemples sur la roue RYB à douze secteurs, pour les cinq figures proposées.
ÉcartDeux familles conservéesSolution avec le rouge comme premier secteur
1 · 30°Rouge et rouge-orangérouge-violet (analogues) ou orange (analogues)
2 · 60°Rouge et orangerouge-orangé (analogues) ou bleu-vert (complémentaire divisée)
3 · 90°Rouge et jaune-orangévert et bleu-violet (carré)
4 · 120°Rouge et jaunebleu (triade)
5 · 150°Rouge et jaune-vertbleu-vert (complémentaire divisée) ou violet (complémentaire divisée)
6 · 180°Rouge et vertpaire déjà complète (complémentaires) ou jaune-orangé et bleu-violet (carré)

En faisant tourner la roue, on retrouve les mêmes figures pour les autres couleurs de départ. Sur les 66 paires distinctes, 42 admettent deux solutions et 24 une seule. Un carré ajoute deux couleurs lorsqu’on en conserve deux.

Six accords numériques à partir du bleu canard#

Tous les schémas partent du bleu canard #048B9A. Les numéros relient les positions aux codes ; saturation et luminosité HSL restent constantes. Les traits montrent des relations géométriques, sans représenter un mélange.

Analogues

Analogues : positions relatives -30°, 0°, +30°123HSL

Écarts à la base : -30°, 0°, +30°.

  1. #049A5E
  2. #048B9A
  3. #04409A

Essayer cet accord

Complémentaire

Complémentaire : positions relatives 0°, +180°12HSL

Écarts à la base : 0°, +180°.

  1. #048B9A
  2. #9A1304

Essayer cet accord

Complémentaire divisée

Complémentaire divisée : positions relatives 0°, +150°, +210°123HSL

Écarts à la base : 0°, +150°, +210°.

  1. #048B9A
  2. #9A0440
  3. #9A5E04

Essayer cet accord

Triade

Triade : positions relatives 0°, +120°, +240°123HSL

Écarts à la base : 0°, +120°, +240°.

  1. #048B9A
  2. #9A048B
  3. #8B9A04

Essayer cet accord

Tétrade carrée

Tétrade carrée : positions relatives 0°, +90°, +180°, +270°1234HSL

Écarts à la base : 0°, +90°, +180°, +270°.

  1. #048B9A
  2. #5E049A
  3. #9A1304
  4. #409A04

Essayer cet accord

Tétrade rectangle

Tétrade rectangle : positions relatives 0°, +60°, +180°, +240°1234HSL

Écarts à la base : 0°, +60°, +180°, +240°.

  1. #048B9A
  2. #13049A
  3. #9A1304
  4. #8B9A04

Essayer cet accord

Pour une tétrade rectangle, plusieurs espacements sont possibles : nous choisissons ici 60° et 120° en alternance. Ces accords numériques ne garantissent pas le contraste des textes. Définition du modèle HSL.

Emporter la planche : SVG · PNG. Valeurs et méthode : CSV · JSON. Conditions de reprise.

Deux compositions à mettre en pratique#

Analogues autour d’un bleu

Aa
Aa
Aa

Trois teintes proches ; choisissez une dominante et vérifiez séparément les contrastes.

Sur le premier aplat : texte #000000, ratio 5.16:1. Vérifier ce couple.

Personnaliser cette palette

Une base et un accent

Aa
Aa
Aa

Exemple éditorial : une surface bleu pétrole, un accent terracotta et du blanc. Ce n’est pas une triade mathématique.

Sur le premier aplat : texte #FFFFFF, ratio 10.01:1. Vérifier ce couple.

Personnaliser cette palette

Ce qu’une harmonie ne garantit pas#

Calculer une harmonie · Attribuer des rôles aux couleurs

Choisir une structure selon la composition#

BesoinStructure à essayerRéglage utile
Une famille cohérente avec peu de rupturesAnaloguesSéparer les rôles par la clarté
Une dominante avec un accent distinctComplémentaireRéserver une couleur à une petite zone
Trois directions de teinteTriadeÉviter de donner la même surface à chaque teinte par défaut
Une composition à quatre teintesTétradePrévoir une hiérarchie et vérifier chaque voisinage

Il s’agit de pistes de composition, pas d’un classement des harmonies « les plus belles ». Pour une interface, partez des rôles à remplir ; la géométrie n’impose ni le fond ni le texte.

Tester une même base dans trois accords#

Ouvrir le bleu canard dans la roue numérique avec ses deux voisines, sa complémentaire, sa triade.

Le générateur conserve la saturation et la luminosité HSL pour ces rotations. Vous pourrez ensuite modifier les codes dans votre projet : une palette utilisée n’est pas obligée de rester une construction géométrique exacte.

Sources et méthode

  1. W3C — CSS Color : codes sRGB, noms CSS et HSL
    Les valeurs numériques et mots-clés CSS ; pas une normalisation des noms français.
  2. National Gallery of Art — The Elements of Art: Color
    Repères pédagogiques en arts plastiques : primaires, secondaires et complémentaires.
  3. W3C — WCAG 2.2 : contraste minimal
    Seuils de contraste des textes, tailles et exceptions.
  4. Université du Delaware — Color Schemes
    Définitions illustrées des familles complémentaires, analogues, divisées et équidistantes.

Les palettes et exemples de ce site sont des propositions éditoriales. Les conversions et contrastes sont calculés à partir des codes indiqués. Voir la méthode et signaler une correction.