Mis à jour le mercredi 23 août 2017
  • 8 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Faites bon usage des couleurs

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

La roue chromatique

La roue chromatique est l'une des meilleures façons de représenter les couleurs et leurs rapports entre elles.

La roue chromatique est une représentation circulaire des couleurs qui permet de voir les dégradés et les nuances de chaque teinte :

Roue chromatique - Adobe Kuler
Roue chromatique

Au delà des simples violet-indigo-bleu-vert-jaune-orange-rouge (les couleurs dites "de l'arc-en-ciel"), il y a tellement de possibilités de nuances et de teintes différentes, que l'on est obligé de les nommer pour s'y retrouver.

Il y a plusieurs normes pour "nommer" une couleur et sa nuance. Et celles que vous trouverez le plus fréquemment (et dont vous aurez besoin dans l'utilisation de logiciels comme Photoshop ou Illustrator (et même PowerPoint), mais aussi si vous programmez en CSS) ;  sont :

  • le code hexadécimal (un code à 6 caractères, souvent précédé d'un "#")

  • le code RVB (Rouge Vert Bleu) ou RGB (Red Green Blue) en anglais qui révèle la composition d'une couleur à partir des 3 couleurs primaires.

Pour vous montrer, prenons par exemple les couleurs dans le logo d'OpenClassrooms :

Logo OpenClassrooms
Le logo d'OpenClassrooms

Et maintenant, voici leur emplacement sur la roue chromatique :

Les couleurs du logo d'OpenClassrooms
Les couleurs du logo d'OpenClassrooms

La roue chromatique ci-dessous est simplifiée mais son découpage est pratique car il permet de comprendre comment les couleurs s'opposent et s'associent entre elles : le rouge est opposé au bleu, le jaune au violet, etc.

Roue chromatique
Roue chromatique simplifiée 

Les couleurs complémentaires

Nous allons apprécier naturellement certains arrangements, et pas d'autres : les couleurs opposées sur la roue chromatique vont naturellement très bien ensemble.

Pour une fois que les opposés s'attirent. 😏

Ce n'est pas une invention, c'est réellement reconnu universellement dans le genre humain comme une association harmonieuse. C'est naturel, inné, voire inconscient…

C'est parce que c'est ainsi que notre cerveau perçoit les couleurs : il détecte automatiquement la complémentarité !

Vous connaissez ce phénomène, c'est l'expérience que vous faites lors d'un effet d'optique !

Je suis sûre que cela vous est déjà arrivé : lorsque vous regardez longtemps une ampoule allumée, et que vous fermez ensuite les yeux, vous continuez de voir pendant quelques secondes une tache de lumière colorée.

Vous n'êtes pas convaincus ? Regardez cette image en fixant le ➕ :

Effet d'optique - complémentarité des couleurs
Effet d'optique - complémentarité des couleurs

Incroyable ! 😧

Quand un point rose disparait, votre cerveau perçoit sa couleur complémentaire : le vert.

Utiliser dans un support graphique des couleurs complémentaires est donc une idée judicieuse car vous ne pourrez pas vous tromper, l'effet sera agréable à l'oeil !

Les couleurs analogues

Cela dit, on n'est pas obligé d'utiliser des couleurs complémentaires à tour de bras.

Les couleurs qui se suivent en dégradé sur la roue chromatique ont également un effet très harmonieux et doux pour l'oeil humain ! N'hésitez donc pas, et choisissez deux à quatre couleurs analogues sur la roue chromatique.

Couleurs analogues
Couleurs analogues

 

En graphisme, les designers utilisent très souvent des couleurs complémentaires ou des couleurs analogues.

En dehors de ces deux types d'associations de couleurs, vous risquez de faire des choix chromatiques qui ne seront pas très bons, voire qui déplairont fortement… Ne vous triturez pas le cerveau, ce n'est pas compliqué : suivez l'une ou l'autre de ces techniques.

Quelques ressources pour bien choisir

Les 3 couleurs analogues ou les 2 couleurs complémentaires que vous choisirez dépendent de vous, c'est un peu une question de goût et de ce que ces couleurs symbolisent ou évoquent.

Voici des outils pour vous aider à faire des essais de couleurs et d'association au code hexadécimal près !

Sites internet

  • ColorHexa, qui vous permet d'avoir toutes les informations nécessaires sur n'importe quelle couleur : je vous ai mis un exemple ici avec le vert #27ae60

  • ColourLovers, un site sur toutes les tendances actuelles en termes de couleurs.

Extensions Chrome ou Firefox

  • ColorZilla, qui vous permet de trouver le code hexadécimal d'une couleur sur n'importe quel page web

Exemple de certificat de réussite
Exemple de certificat de réussite