Comment fais-tu pour choisir les couleurs à appliquer sur ton site web (des titres, des boutons, etc.) ? Je te le demande, parce qu’en fait, le choix est quand même assez difficile parmi les 16,8 millions de couleurs qu’il y a ! Je pense alors qu’il est important que chaque designer maîtrise la fameuse théorie des couleurs.

• I - Comprendre le jargon des couleurs
• Couleurs primaires
• RGB et Hex
• Couleur froide et Chaude
• Température de couleurs
• Teintes et nuances
• Saturation et Luminosité
• II - La roue des couleurs
• Monochrome
• Complémentaire
• Analogue
• Triadic
• III - Comment utiliser les couleurs en webdesign
• Rouge
• Orange
• Jaune
• Bleu
• Vert
• Marron
• Violet
• Blanc
• Noir

Avant d’aller plus loin, je pense toutefois que ce serait mieux de revenir à la base.

Comprendre les jargons de couleurs

Saturation, tons, température... Tous ces mots que l’on entend souvent quand on parle d’images ou de couleurs. Que signifient-ils exactement ?

1. Les couleurs primaires : que sont-elles ?

Elles sont la base de toutes les autres nuances. En effet, nos yeux ne perçoivent en réalité que ces types de couleurs. Elles sont 3 au total :

• magenta
• cyan
• jaune

Qu’en est-il donc des autres : rose, violet, orange… ? Ce ne sont que les combinaisons de ces 3 couleurs primaires. Les résultats diffèrent en fonction de la quantité, de la luminosité et des nuances.

En fait, au début, ces 3 couleurs s'appellent respectivement : rouge, bleu et jaune. Mais diverses études ont montré qu’elles ne décrivaient pas assez les couleurs. D’où leur nouvelle appellation : cyan, magenta, jaune.

2. RGB & Hex : de quoi s’agit-il ?

Du côté du web, le langage le plus utilisé est le RGB&Hex (Rouge Vert Bleu et Hexagonales). Pour le RGB notamment, toutes les couleurs sont définies comme une combinaison de 3 valeurs différentes : nuance de rouge, de vert et de bleu. Voici leur notation :

• rgb(59, 89, 145) : bleue comme la couleur de Facebook
• rgb(0, 0, 0) : noir
• rgb(255, 255, 255) : blanc

Pour ce qui est du système de couleur hexadécimale, il convertit chaque couleur en notation hexadécimale, qui se présente comme suit :

• #3b599b : bleu de Facebook
• #000000 : noir
• #ffffffff : blanc

Le bleu de Facebook par exemple a une teinte rouge de valeur 3b, vert 59 et bleu 9b.

3. Une couleur froide vs chaude

Il y a également deux catégories de couleurs :

• les couleurs chaudes : elles sont composées d’une plus grande quantité de rouges et de jaunes. Ces dernières suscitent généralement un sentiment de chaleur et de passion. Elles sont aussi agressives et audacieuses, c’est pourquoi elles sont utilisées dans les messages d’erreur.
• les couleurs froides : Elles sont plus composées de bleu et font ressortir quelque chose comme : climat, glace, hiver, eau, nuit… Elles sont également moins agressives et plus apaisantes.

4. La température des couleurs

On entend souvent parler de température en image. Il m’arrive par exemple d’augmenter la température d’une image. En langage plus courant, j’augmente donc le niveau d’orange dans le média en question.

Inversement, quand un client me demande d’abaisser la température d’une image, je réduis la luminosité pour donner une impression de froid.

5. Les teintes et nuances

On parle de teinte lorsqu’on ajoute du blanc à une couleur tandis qu’on dit nuance lorsque la couleur ajoutée est du noir. A quoi servent les teintes et nuances donc ? Elles sont celles qui te permettent créer du monochrome.

Par exemple, si ta couleur de base est un #8dbdd8 (un bleu clair), tu peux créer un monochrome en choisissant quatre autres teintes (deux bleus plus vifs et deux bleus plus sombres).

6. Saturation et luminosité en webdesign

La saturation décrit l'intensité d'une couleur. Si tu l’augmentes, l’image sera plus riche mais également plus sombre. Par contre, réduire la saturation d’une image revient à la rendre plus légère, plus floue. En ce qui concerne la luminosité, on parle de la perception de la luminosité par rapport au blanc pur.

Maintenant que tu as une notion des couleurs en général, voici quelques conseils sur le choix des palettes de couleur.

Utilise la roue des couleurs

Toutes les couleurs sont en relation et on peut le voir par la roue des couleurs.

Tu peux visualiser l’ensemble des 12 principales couleurs sur cette roue.

Attention ! Si certaines couleurs sont faites pour être ensemble, d’autres ne vont pas du tout de pair. Comment être sûr de choisir les bonnes ? J’utilise ces 4 modèles de schémas de couleurs.

1. Monochrome

J’en ai un peu parlé tout à l’heure. Le Monochrome est obtenu à partir d’une seule couleur de base. Il crée donc de l’harmonie. Voici un petit bémol : cette méthode risque de donner une palette monotone.

Voici un exemple qui est basé sur le violet :

2. Complémentaire

Il se base sur deux couleurs complètement opposées (sur la roue des couleurs), et donc, très différentes. Avec cette technique, tu as plus de chances de créer un impact pour les visiteurs de ton site, notamment pour les appels à l’action.

Disons que le fond de votre page est vert, le bouton de CTA pourrait être rose. Dis comme ça, ça a l’air bizarre. Je te rassure pourtant qu’elles sont littéralement complémentaires. Vois par toi-même :

3. Analogue

Les schémas analogues contiennent trois couleurs qui se trouvent cote à cote sur la roue des couleurs. Les tons adoptés sont presque similaires, ce qui crée un tout harmonieux, un sentiment de cohésion et d’unité.

4. Triadic

Pour créer un schéma de couleurs triadique, tu dois dessiner un triangle équilatéral (dont les trois côtés sont de même longueur) sur la roue des couleurs. Ensuite, tu sélectionnes les trois couleurs aux 3 extrémités. Tu obtiens alors un schéma tout aussi diversifié qu’équilibré.

Comment utiliser les couleurs en webdesign ?

Rouge

Je n’ai plus besoin de t’apprendre que le rouge est associé à la chaleur, l’énergie, la passion et l’amour. On dit aussi qu’on voit rouge quand on est furieux, et c’est peut-être pour cette raison qu’elle est qualifiée comme étant la couleur du sang, du pouvoir, du danger.

Tout cela, pour te dire que le rouge est immanquable. Il crée un effet non négligeable sur les cibles d’une marque. Prenons l’exemple de McDonald’s ; il utilise le rouge (et le jaune) comme couleur de sa marque. Il y a aussi Netflix. Pour ses boutons CTA, il ne s’en prive pas. Vient ensuite Coca-Cola. À ce qu’il paraît, l’idée de donner la couleur rouge au père Noël vient de lui.

Dans le cadre du webdesign, comment peut-on donc utiliser le rouge ? Supposons que tu travailles pour une marque audacieuse et/ou masculine. Je te conseille fortement le rouge, car il la représente bien. En fonction des produits proposés par la marque, le rouge pourrait également être intéressant : boissons caféinées, voitures de sport, etc.

Par contre, tu n’es pas obligé d’appliquer le rouge sur la totalité du site, du produit… Il peut être appliqué à certains éléments en particulier, le CTA entre autres.

Orange

Cette couleur est moins agressive que le rouge, mais cela ne l’empêche pas d’être remarquable. Dans le plus souvent des cas, on le rencontre dans le domaine de la construction et de la sécurité (les cônes sur la route entre autres). Qu’évoque-t-elle l’orange précisément ?

La chaleur qu’elle émet nous rappelle la créativité, l’énergie, la jeunesse et l’enthousiasme. Le fait que Nickelodeon l’utilise pour représenter sa marque le prouve d’ailleurs. Pareillement pour Fanta, l’orange ressort parfaitement son côté fun.

En Webdesign, je te conseille donc d’avoir recours à cette couleur pour des sites qui ciblent particulièrement les jeunes ou pour ceux qui parlent de créativité (et tout ce qui s’en rapproche). Comme elle est chaleureuse, elle donne aux visiteurs comme une envie de passer à l’action surtout si elle est appliquée sur les boutons ou texte de CTA.

Jaune

Le soleil, l’été, le tournesol, la chaleur… Quand j’évoque ces 3 éléments, tu penses automatiquement au jaune, n’est-ce pas ? Il rend alors joyeux, plein d’espoir et positif. Dans d’autres contextes toutefois, le jaune peut devenir irritant.

Je t’ai parlé de McDonald’s tout à l’heure. Eh bien là encore, je reprends l’exemple parce que le jaune fait aussi des principales couleurs utilisées par la marque. Elle a visiblement réussi, car combinés, le rouge et le jaune sont tous deux attirants. Même si on se trouve à quelques mètres de leur logo, difficile de le manquer ! Il y a aussi Best Buy ; tu connais ? L’étiquette de son logo est aussi jaune, de manière que les petits prix qu’il propose soient attrayants.

Quand tu crées un site internet, n'oublie donc pas le pouvoir du jaune. Il tape à l’oeil, et ainsi, peut être utilisé pour souligner un élément précis du design (dans le cas pratique, ce sera exactement comme pour l’étiquette de prix de Best Buy). Tu dois quand même faire attention aux tons. Si certains évoquent nature et bien-être (jaune chaud ou pâle), d’autres donnent plutôt un air artificiel (jaune néon).

Bleu

Le bleu est connu pour être calme, serein et surtout : professionnel. Il évoque effectivement la responsabilité et l’intelligence. Souvent, on l’associe à l’eau, ce qui fait de lui une couleur rafraîchissante. Le niveau des tons peut aussi faire toute la différence. Plus sombre, elle devient triste. D’où l’expression “les blues”.

Bref, le bleu va de pair avec le gris, comme tu l’as sûrement remarqué chez plusieurs entreprises comme : Intel, PayPal, General Motors et bien d’autres. Par ailleurs, les réseaux sociaux adorent le bleu (notamment pour le cas de Facebook). La raison en est simple : cette couleur inspire confiance, d’autant plus que les données personnelles de plusieurs personnes sont traitées par ces réseaux.

Donc, si ton site doit inspirer la confiance à ses visiteurs, tu sais ce qu’il te reste à faire. Joue avec le bleu et ses nuances !

Certes, le bleu est une couleur calme et apaisante, exactement adapté à certaines activités telles que la thérapie, la méditation… Cependant, elle est est aussi la couleur la plus appréciée par grand nombre de personnes (femmes et hommes, enfants et adultes), il faut en profiter pour l’utiliser si tu cibles un large public pour ton site.

Vert

Croissance, santé, nature, printemps… on trouve tout cela dans le vert. La richesse et la finance ont aussi leur place dans cette couleur, aux États-Unis. Tu peux donc choisir ces couleurs pour représenter des entreprises qui interviennent dans l’environnement, la nature, la finance, etc.

Il arrive qu’on fait aussi appel au vert quand on veut créer un équilibre de couleur. C’est ce qu’a fait Microsoft et Google par exemple ; ils ont voulu ajouter du vert aux principales couleurs de leur logo. Le résultat a été une pure réussite.

Marron

Si je te parle de marron, quel élément te vient à l’esprit ? Pour nombreuses personnes, elles pensent à la terre, ce qui fait du marron une couleur naturelle. Il est donc évident qu’elle soit très présente dans les sites dédiés à l’agriculture, activités en plein air…

Par ailleurs, le marron est lié à quelque chose d’ancien. C’est pourquoi quand un logo prend cette couleur, c’est pour souligner son aspect traditionnel. Voici d’ailleurs un exemple d’entreprise qui l’utilise dans son logo : ultrastjarna.

Violet

On le décrit comme étant la couleur de la royauté, une couleur prestigieuse et luxueuse. Autrefois, les pigments qui permettaient d’obtenir cette couleur étaient très chers. Seuls, les rois et reines pouvaient s’en procurer, et ainsi, s’habiller avec cette couleur. On a même interdit son port à toutes personnes qui ne faisaient pas partie de la famille royale.

Pour des sites qui veulent refléter le luxe, le violet ne peut être que le meilleur choix. Prenons l’exemple d’Asprey, une société britannique très connue dans la production d’articles de luxe.

En fonction de la couleur avec laquelle tu l’associes, l’effet sera toutefois différent. Avec du doré par exemple, l’effet royauté voulu est à son comble. Avec du rose, il sera plutôt féminin. Et bien d’autres encore.

Blanc

Les sites axés sur les mariages, la science et la spiritualité utilisent beaucoup de blancs. Ces derniers évoquent en effet un sentiment de propreté et de fraîcheur. Le blanc permet aussi un design minimaliste, car il est à la fois simple, sobre et moderne : Apple est le mieux placé pour l’illustrer.

Le blanc est surtout utilisé comme couleur de fond. Ainsi peut-il mettre en valeur d’autres couleurs ou éléments. Mais encore, les contenus textes sont plus lisibles de cette manière. Dans le cas où il est utilisé comme couleur secondaire au sein d’une palette, il est évoque différentes choses en fonction des couleurs accompagnatrices : avec des pastels, il devient plus féminin tandis qu’avec le noir, il contribue à donner un ensemble minimaliste, design et classique.

Noir

Enfin, le noir. Il implique la force, le luxe, le mal, la mort et l'inconnu. Il est aussi neutre, d’où le choix de Channel et de Dior dans les couleurs de leur logo (noir et blanc). Le tout paraît intimidant, inaccessible...

Cela te donne sûrement une idée de comment tu vas l’utiliser sur les sites que tu crées. Que ce soit pour faire ressortir le luxe d’un site ou d’un produit, pour créer un effet royal (en l’associant à d’autres couleurs), ou encore, pour des usages habituelles (couleurs des textes).

Conclusion

Bref, comment réagirais-tu si quelqu’un t’offre la voiture de tes rêves, mais qu’elle soit peinte d’une couleur qui n’est pas très évidente (il s’agit peut-être d’une couleur que tu détestes, ou d’une couleur tout simplement ringarde) ? Tu seras moins enthousiaste, n’est-ce pas ? Tout cela, pour te dire que les couleurs ont un sens. Elles créent une émotion si bien que leur choix nécessite une réelle attention.

Reviens sur cette page chaque fois que tu voudras. As-tu trouvé des idées que j'aurais oubliés? Si oui, quels sont-ils? Laisse un commentaire ci-dessous ou envoi un mail à hello@happydesk.be