L’essentiel en bref
- La théorie des couleurs est un ensemble d’idées pratiques sur la façon dont les couleurs se relient, se combinent et influencent ce que l’on voit en premier.
- Toute couleur peut se décrire par trois propriétés : la teinte, la famille de couleur ; la saturation, son intensité ; et la luminosité, sa proximité avec le blanc ou le noir.
- Le contraste de luminosité compte plus pour la lisibilité que le contraste de teinte, c’est pourquoi un design doit fonctionner aussi en niveaux de gris.
- Les harmonies de couleurs comme complémentaire, analogue, triadique et monochrome sont des positions sur le cercle chromatique qui paraissent équilibrées de façon fiable.
- La plupart des bonnes palettes utilisent une couleur dominante, une ou deux couleurs secondaires et un petit accent.
Sur cette page
La théorie des couleurs est l’ensemble d’idées pratiques que les designers utilisent pour choisir des couleurs qui vont bien ensemble et remplissent leur rôle. Elle se ramène à six notions : teinte, saturation, luminosité, température, harmonie et contraste. Maîtrisez-les et vous saurez expliquer pourquoi une palette paraît calme ou forte, pourquoi certains textes se lisent mal et pourquoi deux couleurs jurent.
Cette page est le point de départ de tous les articles sur la couleur du Guide pratique. Chaque section renvoie à un article plus approfondi quand vous en avez besoin.
Teinte, saturation et luminosité
Toute couleur se décrit avec trois propriétés. La teinte est la famille de couleur : rouge, orange, vert, bleu. La saturation (aussi appelée chroma) est son intensité, du gris au vif. La luminosité est sa proximité avec le noir ou le blanc. Changez-en une en gardant les autres et vous voyez ce que fait chacune.
Ces trois notions sont celles par lesquelles des codes comme TSL et OKLCH décrivent la couleur, ce qui les rend faciles à ajuster dans le code. Les codes couleur expliqués couvrent HEX, RVB, TSL et OKLCH.
Couleurs chaudes et froides
Les couleurs ont aussi une température. Les rouges, les oranges et les jaunes paraissent chauds ; les bleus, les verts et les violets paraissent froids. Les couleurs chaudes semblent plus proches et plus énergiques, les froides plus lointaines et plus calmes. La température est pourtant relative : un violet très rouge peut paraître chaud à côté d’un bleu pur.
Couleurs chaudes et froides va plus loin, notamment sur la façon de mêler les températures dans un même dégradé.
Harmonie des couleurs et cercle chromatique
Disposez les teintes en cercle et certaines relations paraissent équilibrées de façon fiable. Ce sont les harmonies de couleurs. Ce ne sont pas des règles, mais de bons points de départ quand on hésite. Le guide du cercle chromatique explique comment les lire.
| Harmonie | Où se placent les couleurs | Ce qu’elle évoque |
|---|---|---|
| Monochrome | Une teinte en plusieurs luminosités | Calme, unifiée, raffinée |
| Analogue | Voisines sur le cercle | Harmonieuse, naturelle, facile |
| Complémentaire | Opposées l’une à l’autre | Fort contraste, énergique |
| Complémentaire divisée | Une teinte plus les deux voisines de son opposée | Vivante mais moins tendue |
| Triadique | Trois teintes à égale distance | Ludique, équilibrée, audacieuse |
Contraste : pourquoi certaines couleurs se lisent mal
Le contraste est la différence entre deux couleurs. Pour la lecture, la différence qui compte le plus est la luminosité, pas la teinte. Un texte rouge sur fond vert peut associer deux teintes très différentes et rester difficile à lire, car leurs luminosités peuvent être proches. Beaucoup de personnes daltoniennes ne peuvent pas les distinguer du tout.
Contraste de teinte seul
- Rouge sur vert de luminosité proche
- Bleu sur violet
- Orange sur rose
- Disparaît en niveaux de gris
Contraste de luminosité
- Presque blanc sur bleu marine profond
- Presque noir sur jaune pâle
- Encre sombre sur pastel clair
- Se lit encore en niveaux de gris
Le test des niveaux de gris est la vérification la plus rapide : passez votre design en gris et regardez si les mots ressortent encore. Pour le texte, les Web Content Accessibility Guidelines fixent des rapports de contraste minimums, 4,5:1 pour le texte courant et 3:1 pour le grand texte. Le contraste des couleurs explique comment les mesurer.
Proportion : quelle part pour chaque couleur
Les mêmes cinq couleurs peuvent paraître calmes ou chaotiques selon la part de chacune. Une bonne base : une couleur dominante couvrant l’essentiel de l’espace, une ou deux couleurs secondaires et un petit accent pour ce que l’on veut faire remarquer. La règle des 60-30-10 en est la version courante.
Ce que signifient les couleurs
Les couleurs portent des associations, mais elles sont apprises, pas innées, et varient selon la culture et le contexte. Le vert peut signifier la nature, l’argent ou « passez » ; le rouge, le danger, la chance ou des soldes. Voyez le sens comme une question sur votre public et votre catégorie plutôt que comme un dictionnaire figé. La psychologie des couleurs sépare ce qui tient de ce qui ne tient pas, et la signification des couleurs dans le monde montre l’ampleur des différences.
Mettre la théorie des couleurs au travail
- 1
Partez d’une couleur
Choisissez la couleur qui compte le plus : celle de votre marque, ou une couleur tirée d’une photo. Tirer une palette d’une image vous aide.
- 2
Choisissez une harmonie
Décidez si la palette doit être calme (monochrome ou analogue) ou énergique (complémentaire ou triadique).
- 3
Construisez une plage de luminosité
Ajoutez une version très sombre et une très claire pour le texte et les fonds. La plupart des palettes échouent faute de ces deux-là.
- 4
Attribuez des proportions
Décidez quelle couleur domine, laquelle soutient et laquelle est l’accent.
- 5
Testez le contraste et le contexte
Vérifiez le contraste du texte, faites le test des niveaux de gris et regardez la palette dans une vraie mise en page, pas seulement en pastilles.
Pour le travail de marque, comment choisir les couleurs de marque transforme ces étapes en méthode complète.
Les questions qu’on nous pose
Qu’est-ce que la théorie des couleurs ?
La théorie des couleurs est un ensemble d’idées pratiques sur la façon dont les couleurs se relient, s’associent en palettes harmonieuses et dont le contraste influence ce que l’on voit et lit.
Quelles sont les trois propriétés d’une couleur ?
La teinte, la famille de couleur ; la saturation, son intensité ou son grisé ; et la luminosité, sa proximité avec le noir ou le blanc.
Quelles sont les principales harmonies de couleurs ?
Monochrome, analogue, complémentaire, complémentaire divisée et triadique. Chacune décrit la position des couleurs les unes par rapport aux autres sur le cercle chromatique.
Qu’est-ce qui compte le plus pour la lisibilité, la teinte ou la luminosité ?
La luminosité. Un texte doit se distinguer nettement de son fond par sa luminosité, c’est pourquoi un design lisible fonctionne aussi converti en niveaux de gris.
Les couleurs ont-elles des significations universelles ?
Non. Les associations de couleurs sont apprises et diffèrent selon les cultures, les catégories et les contextes : vérifiez-les auprès de votre public.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
