Découvrez comment choisir et coordonner les couleurs dans un document, notamment une page web, pour créer un design efficace et harmonieux.
Les couleurs nous affectent et nous touchent de différentes façons, mentalement et physiquement, consciencieusement ou non. Les experts et psychologues s’accordent à dire que la couleur d’un objet ou d’un service représente 60% dans la décision d’effectuer une action. J’avais d’ailleurs déjà évoqué l’infographie de Kiss Metrics qui dévoile des données sur l’influence des couleurs sur les achats des internautes. En voici une autre que je viens de trouver, qui date de 2011 mais qui est toujours d’actualité.
Dans cet article qui convient à tout le monde mais qui traite surtout des couleurs pour le web-design, vous verrez que le choix des couleurs ne doit jamais être sous-estimé. Une mauvaise combinaison de couleurs peut avoir un rôle vraiment néfaste pour votre communication ou votre taux de conversion. Le but de cette infographie et de vous aider à mettre toutes les chances de votre coté lors de vos choix de couleurs.
La « roue des couleurs »
La « roue des couleurs » est un moyen simple pour découvrir et coordonner les harmonies de couleurs, notamment dans le web-design. Le premier diagramme circulaire chromatique a été dessiné par Isaac Newton en 1666.
Couleurs chaudes et froides
Le cercle coloré peut être divisé en 2 parties: les couleurs chaudes (du rouge au vert clair) et les couleurs froides (du violet au vert foncé). En règle général, designer un site web avec une combinaison excessive de couleurs chaudes et froides peut rendre la lecture confuse mais également donner au site en question un coté trop chargé, pas clean et pas professionnel du tout!
Retenez que les couleurs chaudes s’utilisent plutôt dans des designs qui évoquent la passion, la joie, l’enthousiasme et l’énergie alors que les couleurs froides amèneront à vos designs un coté calme et professionnel.
Couleurs primaires, secondaires et tertiaires
Les 3 couleurs primaires sont le rouge, le jaune et le bleu. Selon la théorie traditionnelle, ces couleurs ne peuvent pas être créées à partir d’autres couleurs.
Les 3 couleurs secondaires sont le vert, orange et violet. Elles sont créés en mélangeant les couleurs primaires. Par exemple jaune+rouge=orange, bleu+jaune=vert, bleu+rouge=violet.
Les couleurs tertiaires, au nombre de 6, sont obtenues grâce au mélange des couleurs primaires et secondaires.
Harmonies des couleurs et schémas
Certaines combinaisons de couleurs sont très agréables à regarder alors que d’autres ne le sont pas. Harmoniser les couleurs consiste donc à sélectionner et coordonner 2, 3, 4 couleurs ensemble en fonction des schémas harmoniques basés sur la color wheel.
Dans cette infographie, vous trouverez les 6 schémas les plus connus:
Couleurs complémentaires
Sur le cercle chromatique, elles se définissent par leur opposition. En effet si vous choisissez une couleur au hasard sur le cercle, alors sa couleur complémentaire est celle qui est à l’opposé. C’est pourquoi sur l’exemple ci-dessus, le rouge est la couleur complémentaire du vert. Grâce à ce fort contraste entre ces 2 couleurs complémentaires, un web-designer peut par exemple choisir une couleur dominante (pour l’arrière-plan notamment), et une autre couleur qui servira à mettre en valeur et attirer l’œil sur les éléments les plus importants de la page (le contenu).
Couleurs analogues
Les couleurs analogues sont les 2 couleurs qui se trouvent de chaque coté de la couleur sélectionnée. C’est un schéma que l’on retrouve souvent dans la nature comme par exemple les différentes teintes d’une feuille d’arbre, d’un ciel… Cette composition de couleurs promet un rendu harmonieux et très agréable à regarder. Ce schéma de couleurs convient dans beaucoup de situations car il permet de créer un design confortable, clair et serein.
Couleurs triadiques
Le schéma des couleurs triadiques regroupe 3 couleurs équidistantes, c’est à dire que chacune des 3 couleurs est située à un angle de 120° par rapport à l’autre. Ce schéma est ainsi représenté par un triangle équilatéral et est considéré comme étant le meilleur schéma de coordination possible. Grâce à ces 3 couleurs, vous pourrez en déterminer une pour votre background, les deux autres serviront pour votre contenu et pour mettre en évidence certaines parties de votre page, là ou l’œil du visiteur doit être attiré.
Couleurs semi-complémentaires
C’est le même schéma que celui des couleurs complémentaires mis à part que la couleur de base est remplacée par ses 2 couleurs analogues. Dans l’exemple ci-dessus, le vert est remplacé par ses deux couleurs analogues: le vert clair et le vert foncé. Les couleurs semi-complémentaires offre un degrés de contraste moins important que les couleurs complémentaires, ce qui leurs confèrent une meilleure harmonie visuelle.
Couleurs tétradiques (rectangle)
Les couleurs tétradiques sont constituées de quatre couleurs (deux paires de couleurs complémentaires) et sont symbolisées par le rectangle formé sur la roue chromatique. Ce schéma rectangulaire offre ainsi de multiples possibilités de variations. Notez que ce schéma fonctionne assez bien avec une seule couleur dominante. Faites également attention à la balance entre les couleurs froides et chaudes.
Couleurs dites « carré »
Ce schéma est appelé schéma carré; en effet, il est similaire au schéma rectangulaire à la différence que les 4 couleurs sont espacées à la même distance. Il offre ainsi un grand nombre de combinaisons possibles. Attention toutefois à son utilisation car si vous l’employez mal, votre rendu risquera de ne pas être très harmonieux…
Voila vous en savez un peu plus sur l’art de coordonner les couleurs maintenant, si vous désirez en savoir davantage, cliquez sur la source de cet article. Mais pour faire bref, retenez une chose: la couleur peut être l’élément de base de votre design à condition de savoir comment l’utiliser et surtout l’associer. Coordonner les couleurs entre les différents éléments de la page et les photographies par exemple est une façon remarquable de créer de l’harmonie et de l’unité dans votre design.
Pour vous aider à déterminer les couleurs qui pourraient s’adapter à la votre, je vous recommande d’utiliser Adobe Color.
Source: https://blog.kissmetrics.com [En]