sitopia

Créer sa palette de couleurs

Créez facilement une palette de couleur pour construire une identité visuelle impactante
creer palette couleurs min

Le choix des couleurs a un rôle déterminant dans votre communication. Faites les mauvais choix en matière de couleurs et vous gâcherez tous les efforts que vous avez faits à côté.

En communication, la forme est toujours aussi importante que le fond.

En utilisant des mots, vous allez agir sur la partie rationnelle du cerveau de votre audience. Les couleurs, polices d’écritures ou encore images vont permettre d’agir sur la partie émotionnelle et amplifier le fond de votre message.

En comprenant comment choisir vos couleurs vous serez capable d’utiliser à votre avantage l’une des armes les plus puissantes en communication.

Qu’est-ce qu’un bon choix de couleurs

Tout le monde connaît la phrase «les goûts et les couleurs ça ne se discute pas».

Dans un sens, c’est vrai. Même si beaucoup de gens détestent le jaune moutarde ou le vert fluo, on ne peut pas dire que ce sont de mauvaises couleurs.

Mais alors comment savoir si on a fait le bon choix de couleurs si tout est subjectif ?

En réalité il existe trois grands cas de figure où on peut juger objectivement le choix de couleurs :

  • Le mélange des couleurs – Il existe des combinaisons de couleurs qui ne fonctionnent tout simplement pas. Si on met un texte en vert foncé sur un fond rouge vif, c’est un mélange qui, objectivement, ne fonctionne pas.
  • Le choix par rapport aux objectifs – Chaque couleur a une signification différente et peut influencer les gens d’une manière particulière. Un choix de couleur peut donc ne pas être aligné avec les objectifs de communication.
  • La différenciation – Une communication réussie est une communication qui sort du lot et donc qui se différencie de ce qui existe déjà. Choisir les mêmes couleurs que ses concurrents est une opportunité manquée de se démarquer.

Vous l’aurez compris, on ne peut pas se baser sur le choix d’une seule couleur pour dire si le choix est bon ou mauvais. Par contre, c’est en fonction des mélanges, de comment les couleurs sont utilisées et des intentions de communication qu’on pourra déterminer si les choix sont réussit ou pas.

La palette de couleurs

L’objectif final de cet article est que vous puissiez créer votre propre palette de couleurs.

Cette palette de couleurs sera composée généralement de 5 types de couleurs :

  • D’une couleur primaire
  • D’une couleur contraste (à la couleur primaire) qui va servir à accentuer certains éléments
  • D’une couleur complémentaire (toujours à la couleur primaire) qui va apporter de la diversité et casser la monotonie
  • D’une couleur de fond foncée
  • D’une couleur de fond claire
construction palette min

Comme vous l’aurez peut-être remarqué, votre palette de couleurs va se construire en fonction du choix de votre couleur primaire.

Tous les autres choix vont donc découler de ce que vous allez décider dans quelques instants.

La psychologie des couleurs

Pour bien choisir votre couleur primaire vous devez déjà connaître un concept essentiel :

La psychologie des couleurs.

Chaque couleur est associée à des réponses émotionnelles. Certaines sont logiques, d’autres non. Certaines varient drastiquement d’une culture à une autre et d’autres sont universelles.

Par exemple, le blanc dans la culture chinoise symbolise la mort. C’est donc la couleur portée lors des cérémonies funéraires. Dans notre culture occidentale, c’est le noir qui symbolise la mort et le blanc qui est réservé pour des cérémonies joyeuses comme le mariage.

Ce qu’il faut garder à l’esprit ici c’est qu’il n’y a pas de règles clairement définies sur la signification des couleurs.

Par contre, beaucoup de recherches ont permis d’établir des sentiments généralement ressentis au contact des principales couleurs.

psychologie couleurs min

Comprendre la psychologie des couleurs, c’est pouvoir choisir une ou plusieurs couleurs qui viendront amplifier l’émotion qu’on a envie de générer. Modifier la couleur d’un objet, d’un support graphique et encore d’un site web peut complètement changer la perception de l’audience.

Avant de faire un choix de couleur en fonction de vos goûts personnels, posez-vous la question :

Quels sont les émotions et sentiments que je veux générer à travers ma communication ou ma marque ?

Votre réponse à cette question sera donc un de vos objectifs de communication. Reprenez ensuite le tableau des significations des couleurs et trouvez la couleur qui se rapproche le plus de votre objectif.

Choisir sa couleur primaire

Dire «je veux du bleu dans mon identité visuelle» c’est bien, mais ce n’est pas suffisant.

Parce que des bleus, vous le savez, il en existe énormément : le bleu azur, le bleu ciel, le bleu canard, le bleu nuit…

C’est grâce justement à cette quantité de choix que des entreprises en concurrence directe peuvent même se permettre de faire les mêmes choix de couleur primaire.

Prenons Facebook, Twitter et LinkedIn par exemple. Trois géants des réseaux sociaux qui ont tous les trois fait le choix du bleu comme couleur primaire.

Un choix pertinent quand on sait ce que le bleu communique en termes de sentiments et d’émotions, mais un choix qui reste discutable sur le plan de la différenciation.

Heureusement ces énormes entreprises ont pu compter sur un budget titanesque en communication pour se différencier autrement que par leur de choix de couleurs. Ce qui aujourd’hui nous permet assez facilement de différencier chaque teinte de bleu et de l’associer au bon réseau social.

bleu reseau sociaux min

(Réponse : dans l’ordre, Facebook, Twitter et LinkedIn)

Même si nous avons en face de nous trois bleus, chacune de ces teintes dégage quelque chose de différent.

  • Facebook : un bleu qui a été récemment changé pour être plus «flashy» dans le but de récupérer l’intérêt des jeunes
  • Twitter : un bleu doux qui reflète la volonté de la marque d’accentuer le côté sécurité et confiance (ce qui peut lui être reproché)
  • LinkedIn : le bleu le plus «traditionnel» des trois qui dégage une certaine solidité et un sérieux que le réseau social cherche à incarner

Grâce aux teintes, il est donc tout à fait possible de faire le même choix de couleur primaire que son concurrent tout en dégageant quelque chose de différent.

Malgré tout, il est toujours plus rapide et simple de se différencier de ses concurrents en faisant un choix de couleur drastiquement différent.

Avant de valider votre choix de couleur primaire, prenez donc quelques minutes pour observer le choix de vos concurrents et réfléchissez à l’idée d’aller à contre-courant de ce qui se fait autour de vous.

Connaître le code couleur exact

Une fois que vous êtes sûr de votre choix de couleur primaire, il va falloir chercher à être le plus précis possible.

Comme on vient de le voir, chaque couleur primaire a des déclinaisons : jaune moutarde, bleu ciel, vert turquoise, etc.

Connaître les noms c’est bien, mais il va falloir être encore plus précis. C’est pour ça qu’on a inventé deux codes couleurs que sont le code RGB et le code HEX.

bleu min

N’importe quelle couleur au monde possède un code RGB et HEX.

  • Le code RGB va se composer de 3 numéros séparés d’une virgule
  • Le HEX est composé d’un hashtag et de 6 caractères

Grâce à ces codes couleurs, vous allez pouvoir récupérer précisément n’importe quelle couleur que vous voyez et qui vous plaît. Que ce soit sur un site web, une illustration, une affiche et même une photo.

Sur Sitopia l’objectif est de créer votre site web, donc je vous conseille d’aller chercher l’inspiration directement sur d’autres sites. Pour ça, il existe deux très bonnes ressources que sont Land-Book et Dribbble.

L’objectif ici va être de récupérer les codes exacts des couleurs qui vous plaisent. Pour ça, vous allez avoir besoin d’un outil spécial.

Si vous êtes sur Mac, vous pouvez télécharger ColorSlurp et si vous êtes sur PC, vous devrez d’abord passer par Chrome et ensuite télécharger l’extension Color by Fardos.

Pour ColorSlurp, il vous suffira d’ouvrir l’application et de sélectionner la petite pipette pour récupérer le code d’une des couleurs de votre écran.

colorslurp min

Pour Color by Fardos, ouvrez l’extension et sélectionnez l’icône en forme de cible présente en bas de la fenêtre pour pouvoir récupérer le code couleur dont vous avez besoin.

colorbyfardos min

Une fois que vous aurez récupéré le code couleur exact de votre couleur primaire, vous pourrez ensuite construire le reste de votre palette.

Construire sa palette de couleurs

Comme on l’a vu un peu plus tôt, le choix de votre couleur primaire peut difficilement être critiquable. On pourra remettre en question la pertinence de votre choix par rapport à vos objectifs et à vos concurrents, mais quoi qu’il arrive on ne pourra pas parler d’erreur grave.

C’est seulement à partir de maintenant que vous serez susceptibles de faire les plus grosses erreurs.

Combiner des couleurs entre elles pour créer une palette est loin d’être un exercice facile. La raison derrière ça est que la liberté de choix est infinie et qu’il n’existe pas réellement de règles établies qui permettront de guider vos choix.

Mais alors comment s’assurer de créer une combinaison de couleurs qui fonctionne ?

Tous les designers vous diront que l’oeil est un muscle qui s’éduque. C’est donc à force d’analyser ce qui se fait de mieux qu’on est capable de développer un instinct qui permettra de savoir ce qui fonctionne et ce qui ne fonctionne pas.

Heureusement, il existe aujourd’hui des outils qui permettent d’éviter les erreurs en design et de donner un certain cadre. Ici, on va utiliser un outil extrêmement puissant et simple d’utilisation : Coolors.

coolors

Une fois sur le site, vous verrez apparaître une palette composée de 5 couleurs.

La toute première chose que vous pouvez faire est de cliquer sur la barre espace. Vous verrez que le site génèrera automatiquement une nouvelle combinaison à chaque fois que vous cliquerez sur cette barre d’espace.

Si vous n’aviez pas fait de choix de couleur pour le moment, cette méthode sera un bon moyen de trouver de l’inspiration. D’ailleurs, Coolors met aussi à disposition des palettes déjà créées par des designers.

Si au contraire vous aviez déjà défini une couleur primaire, Coolors va être capable de vous générer des idées de combinaisons à partir de votre choix.

Il suffit de cliquer sur le code hexadécimal de la couleur centrale et modifier sa valeur par le code de votre couleur. Je vous conseille de modifier le code de la couleur centrale de la palette, de façon à avoir votre couleur primaire au centre de votre palette.

Une fois que c’est fait, vous aurez besoin de bloquer cette couleur avant de générer des combinaisons. En passant la souris sur n’importe quelle couleur, vous verrez une icône cadenas tout en bas. Cliquez-dessus et appuyez sur la barre d’espace.

Au fur et à mesure que vous allez cliquer sur la barre d’espace, certaines combinaisons vont sûrement vous plaire. Vous n’aurez qu’à bloquer la couleur comme vous l’avez fait avec le cadenas et relancer le générateur jusqu’à ce que les 5 couleurs vous plaisent.

Vous pouvez revenir en arrière avec la commande CMD+Z ou CTRL+Z si vous êtes allé trop vite.

Vous pouvez aussi déplacer une couleur à l’endroit que vous voulez en utilisant l’icône en forme de flèche qui se présente une fois le survol de la couleur.

coolors drag min

Pour finir, gardez en tête que votre palette devra être composée de ces 5 types de couleurs :

  • D’une couleur primaire
  • D’une couleur contraste (à la couleur primaire) qui va servir à accentuer certains éléments
  • D’une couleur complémentaire (toujours à la couleur primaire) qui va apporter de la diversité et casser la monotonie
  • D’une couleur de fond foncée
  • D’une couleur de fond claire

Si vous voulez créer une palette de plus de 5 couleurs, vous verrez apparaître une icône «+» entre les couleurs pour ajouter une nouvelle bande.

coolors ajouter min

Enregistrer votre palette

Une fois que vous aurez construit votre palette, vous pourrez ensuite l’enregistrer pour ne pas la perdre et la réutiliser sur tous vos supports de communication comme au moment de créer votre logo.

Il vous suffira simplement de cliquer sur Export présent dans la barre d’outils et vous pourrez ensuite choisir la façon dont vous voulez enregistrer votre palette.

coolors exporter min