Théorie des couleurs pour les designers : le système à la base de toute bonne palette
Théorie des couleurs pour les designers professionnels. Le cercle chromatique, les harmonies, la perception, la psychologie, l'accessibilité et comment les systèmes de design modernes transforment tout cela en produit fini.
La théorie des couleurs s'enseigne comme un cours d'histoire de l'art et se pratique comme le génie civil. Cercles chromatiques, harmonies, couleurs complémentaires. Chaud et froid.
« Le rouge symbolise la passion. » Voilà le genre de notions qu'on enseigne aux designers à l'école, et qui, pour la plupart, ne résistent pas à l'épreuve du temps et ne se retrouvent jamais appliquées à un produit réel.
Ce dont les designers ont réellement besoin, c'est d'une approche structurée. Un système hiérarchisé qui part de la perception visuelle des couleurs, en passant par le cercle chromatique et ses harmonies, le contraste et la hiérarchie, la psychologie et la culture, jusqu'à la construction de la palette, et enfin les éléments et systèmes de design qui permettent de finaliser le projet. Si l'on omet une étape, la palette semble parfaite dans Figma mais s'effondre en production.
Ce document représente l'ensemble de cette approche. Chaque étape est approfondie dans un document Brainy dédié. C'est ici que nous les relions.
Ce que la théorie des couleurs vous demande réellement de résoudre
La théorie des couleurs n'est pas un ensemble de règles esthétiques, mais une approche systémique qui repose sur la vision, la perception et la pensée critique, et qui doit impérativement fonctionner de concert avant la finalisation d'une palette.
En bref : la vision humaine est complexe, la couleur est un phénomène physique, et les designers doivent créer des visuels adaptés à des millions d’utilisateurs, sur des centaines d’appareils et dans une multitude de contextes. La théorie est le vocabulaire qui nous permet d’appréhender ce problème. Il ne s’agit pas d’un ensemble de règles strictes, mais d’un ensemble de concepts partagés qui permettent de passer d’une simple impression (« ça ne va pas ») à une analyse plus approfondie (« la couleur accentuée se confond avec le fond et le contraste est insuffisant à 14 points »).
La superposition des calques est intentionnelle. Chaque calque répond à une question différente.
| Calque | Question à laquelle il répond |
|-------|-------------------------|
| Perception | Comment l’œil perçoit-il réellement cette couleur dans son contexte ? |
| Cercle chromatique | Quelle est la relation de teinte entre ces couleurs ? |
| Harmonie | Ces couleurs semblent-elles harmonieuses ou dissonantes ? |
| Contraste | Est-ce lisible, visible et cliquable ? |
| Palette | Quelles sont les couleurs emblématiques de cette marque ou de ce produit ? |
| Système | Comment ces couleurs sont-elles appliquées de manière cohérente à grande échelle ?
| Accessibilité | Chaque association de couleurs du système est-elle adaptée à tous les utilisateurs ? |
Chaque couche est porteuse. Une palette conçue sans tenir compte de la perception visuelle est inefficace dans son contexte. Un système conçu sans accessibilité est vulnérable aux audits.
Une harmonie choisie sans logique de palette est inefficace à l'échelle. Les couches s'accumulent, c'est pourquoi bien choisir ses couleurs est un investissement rentable.
La roue des couleurs, les harmonies et leur véritable utilité
Le roue chromatique est un modèle des relations entre les teintes, et les harmonies sont des raccourcis pour choisir des paires et des groupes de couleurs que l'œil perçoit comme apparentés.
La plupart des designers apprennent la roue des couleurs comme un triangle primaire-secondaire-tertiaire et ne l'utilisent plus jamais. C'est un gâchis. La roue des couleurs est le moyen le plus rapide de déterminer quelles couleurs s'accordent et lesquelles sont incompatibles, ce qui est essentiel à chaque fois que vous ajoutez une nouvelle couleur à une palette, un nuancier ou un logo.
Quatre harmonies sont indispensables dans le travail sur les produits et les marques.
Couleurs complémentaires
Couleurs opposées sur le cercle chromatique. Bleu et orange, rouge et vert, violet et jaune. Les couleurs complémentaires créent une tension visuelle maximale entre deux teintes.
C'est idéal pour un impact immédiat (une affiche, une image principale, un uniforme sportif) mais à proscrire pour une utilisation prolongée dans une interface. C'est pourquoi on voit rarement des palettes de produits entièrement complémentaires. Dans les interfaces utilisateur, les couleurs complémentaires sont adoucies : une teinte domine, l'autre apparaît comme une touche discrète.
Couleurs analogues
Couleurs adjacentes sur le cercle chromatique. Bleu ciel, bleu, bleu-violet. Les palettes analogues offrent une impression de cohérence et d'harmonie.
Elles constituent la base de la plupart des palettes modernes. Le risque est qu'elles paraissent monotones si le contraste entre les teintes est insuffisant. Les couleurs analogues fonctionnent bien lorsqu'on les considère comme une famille, et non comme un ensemble de couleurs rivales.
Triadique et complémentaire divisée : un duo sous-exploité
Les harmonies complémentaires et analogues sont au cœur des cours de design. Les deux harmonies suivantes sont moins connues et pourtant, pour les designers professionnels, souvent plus utiles.
Triadique
Trois teintes équidistantes sur le cercle chromatique. Rouge-jaune-bleu. Orange-vert-violet. Les palettes triadiques évoquent le jeu et l'énergie, ce qui explique leur présence dans les marques pour enfants, le sport et le divertissement.
En design produit, la triadie pure est rare car son équilibre est difficile à atteindre. Les palettes inspirées de la triadie (une teinte dominante et deux autres plus discrètes) sont omniprésentes.
Complémentaire divisée
Une teinte et les deux teintes adjacentes à sa complémentaire. Bleu, jaune-orange et rouge-orange. La complémentarité divisée conserve la majeure partie du contraste de la complémentarité, avec moins de tension. C'est une harmonie sous-estimée que l'on retrouve dans de nombreuses identités visuelles réussies.
Les harmonies sont des outils, pas des réponses toutes faites. On ne choisit pas un palette de marques en disant « prenons une triadique ». On utilise les harmonies pour analyser les combinaisons proposées et repérer celles qui fonctionnent déjà.
La perception prime toujours sur la théorie
Le même rouge sur le même bouton paraît urgent sur une page neutre, bruyant sur une page orange et invisible sur une page rouge foncé. Or, la roue chromatique n'explique rien de tout cela.
Le contexte décuple l'impact des couleurs. Une couleur n'a ni signification fixe, ni luminosité fixe, ni lisibilité fixe. Elle interagit avec ce qui l'entoure, ce qui était affiché à l'écran une seconde auparavant, l'écran que l'utilisateur regarde et la lumière qui l'éclaire. Une théorie sans perception est une théorie en vase clos.
Trois effets de perception méritent d'être connus.
Contraste simultané. Un même gris paraît plus clair à côté du noir et plus foncé à côté du blanc. Conséquence : une couleur de marque choisie sur un fond blanc de studio paraîtra complètement différente sur un fond sombre. Il est essentiel de tester les couleurs dans leur contexte de production, et non isolément.
Adaptation chromatique. L'œil s'adapte à la couleur ambiante en 500 ms ou moins. Une page affichant un fond orange chaud pendant cinq secondes avant de faire défiler vers une zone de contenu neutre semblera légèrement plus froide que cette zone ne l'est réellement. La perception de l'utilisateur a changé sans qu'il s'en aperçoive.
Regroupement des valeurs. L'œil regroupe les éléments de luminosité similaire comme étant liés et ceux de même intensité visuelle comme étant distincts. C'est ainsi que fonctionne la hiérarchie visuelle. Un design efficace exploite davantage le contraste de valeurs que le contraste de teintes, car c'est la valeur que le système visuel traite en premier.
Psychologie des couleurs : Preuves vs Superstitions
La psychologie des couleurs est bien réelle, mais la plupart des théories qui y sont associées ne sont que des mythes recyclés. C'est pourquoi les designers doivent distinguer les faits des idées reçues.
Des recherches sérieuses existent sur la reconnaissance de la marque Loyola (la couleur influence jusqu'à 80 % de la reconnaissance de la marque), sur les effets de la saturation sur l'urgence perçue, sur les préférences pour le mode sombre et sur les associations culturelles des couleurs. Ces recherches sont utiles. On trouve aussi une multitude d'articles de blog affirmant que « le rouge augmente les conversions de 21 % », mais ces affirmations ne résistent pas à un examen approfondi. Elles ne sont pas utiles.
Un test rapide : toute affirmation concernant la psychologie des couleurs qui ne tient pas compte du contexte, de la culture ou du public cible relève de la superstition. La signification des couleurs est toujours contextuelle. Le vert est associé à l'argent dans le secteur de la fintech aux États-Unis et à la nature dans le domaine du bien-être, et ces deux interprétations sont pertinentes dans leur contexte respectif.
Pour une analyse complète de ce qui est authentique, de ce qui est recyclé et de la manière d'appliquer concrètement la psychologie des couleurs au design de marque et de produit, le document La psychologie des couleurs dans le design propose un cadre factuel.
Pourquoi les règles de proportion ne sont plus adaptées à l'échelle du produit
Le Règle 60-30-10 et ses dérivés ont résolu un problème de surface unique, or le design de produit ne se limite pas à une seule surface.
Le design d'intérieur a inventé la règle 60-30-10 pour répondre à la question : « Quelle proportion de chaque couleur utiliser sur les murs, les meubles et les éléments de décoration ? » Cette règle s'applique parfaitement à une pièce. Elle ne s'applique pas à un produit numérique qui comporte des centaines de surfaces, des dizaines d'états, un mode clair et un mode sombre, et des utilisateurs sur une multitude d'appareils.
La couleur des produits modernes a abandonné la proportion au profit de rôles : surface, contenu, accentuation, état, sémantique. Chaque rôle se voit attribuer un jeton de conception qui correspond à une valeur brute différente selon le thème. C'est le remplaçant du 60-30-10, et c'est le seul système évolutif.
Une analyse complète des raisons de l'échec des proportions et une description pratique des systèmes de jetons basés sur les rôles sont disponibles dans l'article La règle des 60-30-10 n'est pas respectée..
L'accessibilité fait désormais partie intégrante de la théorie des couleurs
WCAG et APCA ont fait passer l'accessibilité d'un simple contrôle qualité final à une propriété intrinsèque du système de couleurs.
Pendant longtemps, l'accessibilité a fait l'objet d'une discussion distincte. Les concepteurs choisissaient une palette pour des raisons esthétiques, l'assurance qualité vérifiait les proportions à la fin, des ajustements étaient apportés, et chacun passait à autre chose. Ce processus n'est pas évolutif. Désormais, chaque système de conception déployé intègre l'accessibilité au niveau des jetons, ce qui signifie que la palette elle-même doit être conçue dès le départ en tenant compte de rapport de contraste et des seuils perceptifs.
En bref : WCAG 2.2 AA représente le seuil de conformité (rapport corps 4,5:1, rapport texte/interface utilisateur 3:1). APCA est l’algorithme perceptuel qui reflète mieux la lisibilité réelle et est proposé pour WCAG 3. Les produits actuels ciblent les deux.
Pour une analyse complète des ratios WCAG, d’APCA et de la manière dont les systèmes de conception tokenisent le contraste du point de vue d’un designer professionnel, le document contraste de couleurs accessible aborde le sujet en détail.
Création d’une palette : La méthode du designer professionnel
Une palette utilisable et adaptable se construit couche par couche, et non en une seule fois.
Le processus efficace suit un ordre précis. Chaque couche encadre la suivante, ce qui permet de conserver la cohérence de la palette et d’éviter de se retrouver avec une collection de couleurs isolées.
-
Commencez par une gamme neutre. Créez 8 à 12 nuances de gris (ou de gris clair, souvent légèrement décalées vers la couleur de la marque). La majeure partie d'une interface utilisateur est composée de couleurs neutres. C'est la base sur laquelle repose toute autre couche.
-
Choisissez la couleur d'accentuation de la marque. Une couleur principale, celle qu'un lecteur associerait immédiatement à la marque. La sobriété est essentielle. Réservez cette couleur aux moments clés de la marque, aux actions principales et aux éléments à forte valeur ajoutée.
-
Ajoutez des couleurs sémantiques. Succès, avertissement, critique, information. Ces couleurs sont fonctionnelles, non décoratives, et doivent être compatibles avec les modes clair et sombre sans refléter l'identité de la marque. Considérez-les comme un outil, et non comme une simple touche esthétique.
-
Développez une couche d'état. Survol, focus, clic, désactivé, sélectionné. Ces états dérivent généralement des autres couches (une couleur d'accentuation plus foncée pour le survol, une couleur neutre discrète pour la désactivation), mais ils constituent leurs propres jetons.
-
Tekoniquez tout. Chaque paire d'éléments déployée doit avoir un nom de rôle.
text-on-accent,bg-subtle,border-default. Si un designer peut accéder à une couleur brute sans jeton, la palette est déjà incomplète. -
Testez la perception, pas seulement les calculs. Priorisez les ratios WCAG, puis les scores APCA, et enfin les tests en conditions réelles : mode niveaux de gris, test de strabisme, aperçu en faible luminosité, réactions instantanées de personnes extérieures à la marque (5 secondes).
-
Proposez le mode sombre sous forme de palette parallèle. Ni filtre, ni inversion. Une véritable palette parallèle qui associe des valeurs différentes aux mêmes jetons.
Créer par étapes, pas en une seule fois
L'ordre est important car les couleurs neutres jouent un rôle prépondérant sur chaque page. Les designers qui commencent par couleur d'accent finissent par construire le reste de la palette autour d'une seule décision qui risque de ne pas être judicieuse. Commencez par une couche discrète. Ajoutez la couche plus vive en dernier.
Les systèmes de conception comme théorie des couleurs appliquée
La meilleure ressource en matière de théorie des couleurs aujourd'hui n'est pas un manuel, mais la documentation publique des systèmes de conception des marques qui commercialisent leurs produits à grande échelle.
Ces systèmes intègrent chaque couche de la pile dans les valeurs par défaut. Ils sont également gratuits, ouverts et maintenus par des personnes qui gèrent les couleurs des produits au quotidien.
Material Design 3
À voir en direct sur m3.material.io
Material 3 est la version la plus explicite concernant la théorie des couleurs en tant que système appliqué. Chaque rôle possède un équivalent on- (texte/icônes superposés). Les échelles sont basées sur la teinte, la saturation et la tonalité plutôt que sur le TSL, et le système est conçu pour s'adapter dynamiquement à partir d'une couleur source unique.
À retenir : le modèle on-. Lorsqu'un concepteur choisit primary pour un bouton, le système sait déjà quelle couleur doit avoir le texte associé. L'accessibilité et les principes de contraste sont intégrés à la nomenclature.
Couleurs Radix
À voir en direct sur radix-ui.com
Radix propose des échelles à 12 niveaux par teinte, chaque niveau étant associé à un rôle spécifique (arrière-plan de l'application, arrière-plan discret, élément d'interface, survol, focus, actif, couleur unie, texte, texte à contraste élevé). Il s'agit en fait d'une référence harmonie des couleurs intégrée à une échelle de contraste. Les designers utilisent l'échelle 11 lorsqu'ils ont besoin d'un texte à contraste élevé et savent qu'il répondra aux critères AA par rapport aux échelles inférieures.
À retenir : l'échelle numérotée. Attribuer un rôle à chaque étape d'une échelle élimine le débat interminable sur le choix du gris lors des revues de conception.
Adobe Spectrum : Uniformité perceptive à l'échelle
Material et Radix gèrent la couleur au niveau des rôles. Adobe va plus loin en construisant les échelles elles-mêmes sur des modèles perceptifs, de sorte que les relations de contraste restent inchangées même lorsque les teintes changent.
Visionnez-le en direct sur spectrum.adobe.com
Spectrum utilise des échelles perceptivement uniformes, de sorte que deux éléments ayant le même numéro d'échelle ont le même poids visuel quelle que soit la teinte. Ainsi, un thème peut passer du bleu à l'orange sans rupture de contraste, car les relations perceptives sont figées au niveau de l'échelle.
À retenir : l'uniformité perceptive. Si votre échelle est basée sur des modèles perceptifs comme OKLCH ou HSLuv, l'accessibilité devient transposable d'une marque à l'autre, sans nécessiter de vérification pour chaque nouvelle couleur.
FAQ
Comment apprendre la théorie des couleurs en tant que designer ?
Parcourez les différentes étapes (perception, cercle chromatique, harmonie, contraste, palette, système), puis appliquez-les dans l'ordre à un projet concret. La théorie sans application s'estompe en une semaine. La théorie appliquée à une palette finalisée est efficace car le retour d'information est immédiat. Commencez par lire Interaction of Color de Josef Albers pour la perception, consacrez un après-midi à la documentation Radix Colors pour les échelles de contraste appliquées, et créez une palette réelle en utilisant les étapes décrites ci-dessus.
Dois-je connaître la science ou puis-je simplement utiliser les outils ?
Vous pouvez finaliser un projet sans connaître la physique de la lumière ni la biologie des cônes. Vous ne pouvez pas finaliser un projet sans connaître la perception, le contraste et la pensée systémique basée sur les rôles.
Les outils gèrent les calculs. Le designer, lui, apporte son jugement. Un designer qui se fie uniquement aux outils est incapable de déceler leurs erreurs (ce qui est fréquent, notamment pour les calculs liés aux WCAG 2).
Quelle est la plus grande erreur des designers débutants en matière de couleur ?
Choisir la couleur d'accent en premier. L'accent est la couleur la plus vive de la palette, et construire le reste de la palette autour d'un choix aussi marqué aboutit presque toujours à une palette surchargée.
Commencez par des couleurs neutres. Laissez l'accent être le dernier élément à finaliser. Vous pourrez toujours le changer plus tard si le reste de la palette est harmonieux.
La théorie des couleurs est essentielle
La théorie des couleurs est un aspect du design qui fait l'unanimité et que tout le monde applique, consciemment ou non.
Un designer qui choisit « ce corail, ça lui va bien » applique la théorie des couleurs. Un chef de produit qui demande « peut-on rendre le bouton plus visible ? » pose une question de théorie des couleurs. Un utilisateur qui dit « cette page est surchargée » signale un problème de contraste.
La théorie est déjà là. La question est de savoir si vous l'appliquez consciemment ou si vous y réagissez après coup.
Maîtriser la pile technologique rend l'invisible visible. Vous cessez de choisir des couleurs et vous commencez à concevoir des palettes. Vous cessez de choisir des teintes et vous commencez à concevoir des systèmes. Vous cessez de deviner l'accessibilité et vous commencez à déployer.
Les bénéfices sont cumulatifs. Une palette conçue grâce à la pile technologique se prête parfaitement aux changements d'image, aux versions sombres, à l'échelle et passe les audits sans problème. Une palette choisie au feeling ne présente aucun de ces avantages et fait perdre du temps à l'équipe à chaque fois qu'un seul de ces aspects est important.
Apprenez à maîtriser la pile technologique. Maîtrisez-la. Déployez-la.
Want a color system that actually works end to end? Brainy builds palettes from perception to tokens with accessibility baked in.
Get Started
