Cercle chromatique

Un cercle chromatique, c'est quoi ?

C'est une roue sur laquelle les couleurs sont rangées dans l'ordre du spectre visible, du rouge au violet, puis refermées sur elles-mêmes. Cette disposition transforme une impression subjective en une géométrie : la distance et l'angle entre deux teintes disent si elles se renforcent, se répondent ou se concurrencent.

L'idée remonte aux expériences d'Isaac Newton sur la décomposition de la lumière blanche, au XVIIe siècle. Elle a ensuite été reprise et affinée par de nombreux théoriciens, dont Johannes Itten et sa roue de douze teintes, encore enseignée dans les écoles d'art.

Primaires, secondaires, tertiaires

Les trois couleurs primaires sont celles que l'on ne peut pas obtenir par mélange. Deux primaires voisines donnent une secondaire, et une primaire associée à la secondaire qui la touche donne une tertiaire. En comptant ces trois niveaux, on arrive à douze teintes, qui servent de repères pour construire une palette.

Comment utiliser l'outil

1. Placez le point principal sur la teinte de départ, par exemple celle de votre logo : en le faisant glisser, avec le curseur de teinte ou au clavier.
2. Choisissez une harmonie : les autres points se déplacent d'eux-mêmes pour dessiner la figure correspondante.
3. Réglez la saturation et la luminosité, puis observez l'aperçu en situation.
4. Contrôlez les indications de contraste, puis copiez les codes ou les variables CSS.

Les harmonies proposées

• Camaïeu : une seule teinte, plusieurs niveaux de clarté. Très cohérent, mais peu contrasté.
• Analogues : des teintes voisines. Un résultat calme, idéal pour un fond ou une ambiance.
• Complémentaires : deux teintes face à face. L'impact est maximal, donc à doser pour les accents.
• Adjacentes : une teinte et les deux voisines de son opposée. L'énergie du contraste, en plus nuancée.
• Triade : trois teintes à 120°. Dynamique et équilibré si l'une domine.
• Tétrade et carré : quatre teintes. Elles offrent beaucoup de choix, mais demandent de la discipline.

Teinte, saturation, luminosité

Une couleur se décrit avec trois réglages indépendants. La teinte est sa place sur la roue. La saturation dit si elle est vive ou grisée. La luminosité la rend plus claire ou plus sombre. Deux couleurs de teintes différentes mais de même luminosité se distinguent mal en niveaux de gris et pour une personne daltonienne : pour séparer deux éléments, jouez aussi sur la luminosité, pas seulement sur la teinte.

Roue artiste ou roue écran ?

Sur un écran, les couleurs naissent de lumières rouge, vert et bleu qui s'additionnent. En peinture, des pigments se superposent et absorbent la lumière. Les deux logiques n'ont pas les mêmes opposés : l'outil vous laisse basculer de l'une à l'autre en conservant votre couleur, pour comparer. Pour du web, la roue écran correspond à ce que le navigateur affiche ; la roue artiste reste utile pour raisonner comme un peintre ou un décorateur.

Où s'en servir

• Choisir ou faire évoluer les couleurs d'une marque, d'un site ou d'une application.
• Faire ressortir un bouton ou un message important sans surcharger la page.
• Composer un décor ou une tenue autour d'une pièce imposée.
• Étalonner une image ou une vidéo : l'opposition du bleu-vert et de l'orangé est un grand classique du cinéma.