Personnalise la palette de couleur de ta marque en fonction de son style

Q Quelles couleurs choisir pour ta marque ?
Tu as bien une petite idée mais tu ne sais pas par où commencer.

Ce tutoriel, accessible à tous, te présente plusieurs options pour définir ta palette complète de couleurs. Tu choisiras celle qui colle à ta marque.

Quand tu auras fini, tu obtiendras ce résultat avec une gamme complète de couleurs et de gris :

Cette question mérite que tu y consacres environ 1 heure car les couleurs influencent directement sur la perception.

Tu vas voir cela n’est pas sorcier de s’en sortir avec les honneurs quand tu utilises les bons outils.

Cet article prend environ 15 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

Mc Donald’s a par exemple fait évoluer les couleurs de son logo pour faire passer l’idée qu’un effort à été réalisé sur la qualité nutritionnelle.

Convaincu que le big Mac fait maigrir ?

Tu vas t’approprier des couleurs qui seront associées à ta marque. C’est un outil efficace pour se démarquer de ses concurrents. Nous allons chercher à sortir un peu du rouge et du bleu de base et essayer de faire preuve d’un peu de nuance.

Les couleurs principales

Tu commence par choisir une photo qui reflète l’image que tu veux véhiculer avec ta marque.

Le plus facile est de reprendre ton tableau de marque et sélectionner la photo la plus représentative. (Retrouve toutes les explications détaillées dans l’article consacré au tableau de marque).

L’univers au niveau des couleurs doit correspondre à ton entreprise et plaire à tes clients. Il est plus facile de partir d’une photo qui ne présente pas une multitude de couleurs.

Nous cherchons une couleur dominante, une couleur secondaire, et une couleur d’accent. Ces couleurs seront présentes sur ton site dans des proportions différentes : 60, 30 et 10% ces proportions sont à titre indicatif et sont celles utilisées en décoration d’intérieur.

La dominante apportera la continuité (souvent neutre), la secondaire animera (dynamique) et l’accent donnera un coup de fouet à l’ensemble (couleur la plus visible et contrastée).

Nous allons utiliser Adobe Color CC. Cette application en ligne facilite énormément le travail. Tu vas voir elle est très intuitive et permet d’obtenir des résultats stupéfiants en un claquement de doigts.

Tu arrives sur cette page :

• Cliquer sur l’icône appareil photo en haut à droite

• Sélectionner ton image
• Essayer toutes les propositions dans Atmosphère de couleur

Coloré

Lumineux

Sourd

Profond

Sombre

• Conserver celle qui est la plus appropriée
• Déplacer le curseur si une couleur ne te convient pas

A ce stade, tu as ta couleur dominante et avec beaucoup de chance tes 3 couleurs.

• Cliquer sur la roue Chromatique (en haut à droite)

Les couleurs retenues sont disposées sur la roue chromatique.

Voici un bref aperçu du fonctionnement de la roue chromatique.

La roue est schématiquement divisée en 12 couleurs.

Le déplacement le long de l’axe entre le centre et le bord détermine la quantité de blanc ajoutée à la couleur.

La réglette la plus en bas détermine la quantité de noir additionnée à la couleur.

Ainsi pour avoir une couleur pure, il faut que le curseur touche le bord de la roue et que la réglette soit positionnée à droite.

• Ouvrir un document texte
• Copier les lignes suivantes :
  • Couleurs photos
    • Couleur 1 :
    • Couleur 2 :
    • Couleur 3 :
  • Dominante :
  • Supplémentaire :
  • Accent :
  • Gris clair :
  • Gris moyen :
  • Gris foncé :
• Noter les références HEX des couleurs choisies dans couleurs photo. Il s’agit des références informatiques des couleurs. Il sera plus facile de t’y retrouver en nommant les couleurs.
  Dans cet exemple :

• Vert tendre : 4C7302
• Orange clair : F18805
• Orange soutenu : F25E02

• Sélectionner ta couleur dominante en se déplaçant en bas de la case et en cliquant sur le triangle

Je te présente 4 options pour réaliser ta palette à l’aide de l’outil Règle de couleur. A chaque fois, il est nécessaire de copier la référence de la couleur si possible avec des annotations.

Zen et harmonie – Les monochromes et semblables

Les palettes monochromatiques sont les plus simples à réaliser. Il s’agit de la déclinaison d’une couleur unique.

Elles fonctionnent avec toutes les couleurs et les résultats sont harmonieux dans la très grande majorité des cas. Le résultat peut cependant manquer de relief et de dynamisme.

Ce choix n’est pas recommandé pour une palette composée de pastels. Le résultat est trop terne.

Les palettes semblables sont très similaires mais offrent plus de diversité en combinant des couleurs juste à côté dans la roue chromatique.

Pour réussir une palette monochromatique ou semblable, il faut veiller à bien contraster les couleurs en les choisissant à des niveaux de pureté bien marqués en se déplaçant sur l’axe de la roue.

C’est une bonne option si le contenu visuel prime sur le reste. Les photos ressortiront en particulier si elles sont dans des teintes complémentaires (à l’opposé du cercle chromatique).

Les design minimalistes utilisent souvent une palette monochrome.

• Choisir Semblable ou Monochrome

• Sélectionner Personnalisé dans la liste
• Remonter le curseur de l’accent sur le bord
• Supprimer le noir de l’accent en déplaçant à droite la molette de la réglette située le plus en bas
• S’assurer que les 2 curseurs des couleurs dominante et complémentaire ne soient pas sur la même hauteur du cercle

Un petit contraste bienvenu – L’équerre

Il s’agit de 2 couleurs semblables ou monochromes avec une couleur accent à 90° sur le cercle. Le résultat est équilibré.

• Choisir Semblable ou Monochrome

• Sélectionner Personnalisé dans la liste
• Déplacer un des curseurs à angle droit des autres sur le bord opposé
• S’assurer que les 2 curseurs des couleurs dominante et complémentaire ne soient pas sur la même hauteur du cercle

• Accentuer si besoin le contraste en jouant avec la barre du bas

Harmonie dynamique – La complémentaire

Cette palette est la plus simple à utiliser pour un débutant car elle remplit aisément toutes les taches. 2 couleurs pour l’habillage du site et un accent qui tranche.

Elle demande un peu plus de travail qu’une simple palette monochrome mais reste très accessible.

La couleur complémentaire est celle qui ressort le mieux face à la couleur dominante. Elle est celle située directement à l’opposé sur le cercle.

2 couleurs complémentaires peuvent vraiment détonner ensemble pour le meilleur et pour le pire. Il peut être judicieux de ne pas prendre une couleur strictement à l’opposé mais un peu décalée sur le côté. Le fait d’ajouter du noir à la dominante permet également de disposer d’un résultat harmonieux.

La complémentaire adjacente offre une gamme plus subtile en reprenant des couleurs semblables non directement opposées.

• Choisir Semblable ou Monochrome

• Sélectionner Personnalisé dans la liste
• Déplacer un des curseurs sur le bord opposé (ne pas hésiter à ne pas être exactement en face mais choisir une couleur qui claque)
• S’assurer que les 2 curseurs des couleurs dominante et complémentaire ne soient pas sur la même hauteur du cercle
• Augmenter si besoin le contraste en jouant avec la barre du bas

Une palette puissante – La triade

Il s’agit de choisir les 3 couleurs les plus éloignées sur le cercle. Les couleurs sont contrastées et attirent l’œil. Le résultat est probant mais la palette nécessite un ajustement un peu plus fin.

La triade de couleurs pures est souvent trop intense pour être utilisée directement. Il va falloir faire preuve de subtilité.

La triade fonctionne parfaitement pour les gammes pastelles qui dans les autres options sont trop fades.

La version assombrie donne également de beaux résultats.

• Choisir Triade

• Sélectionner Personnalisé dans la liste
• Déplacer le curseur de la couleur d’accent le plus au bord et ne pas hésiter à se déplacer un peu le long du cercle pour trouver une couleur éclatante
• Répartir les couleurs dominante et supplémentaire sur la hauteur du cercle
• Accentuer si besoin le contraste en déplaçant le curseur sur la barre du bas

Des exemples de sites avec leurs palettes illustrées sur la roue chromatique

Semblables ou monochromes

Équerre

Semblables ou monochromes + complémentaire

Triade

Découvre plus d’exemples de palettes de sites visualisés sur la roue Chromatique

La déclinaison d’une palette complète

Nous allons utiliser Photopea. Ce logiciel permet de modifier des fichiers Photoshop ou Gimp en ligne sans aucune installation ni inscription. Je dois avouer que j’ai été bluffé la première fois que j’ai découvert cet outil. Le travail réalisé est tout simplement prodigieux.

Télécharger le fichier Photoshop zippé

• Ouvrir Photopea

• Cliquer sur Open from computer

Sur la droite, tu as des calques. Il s’agit des éléments du visuel présentés indépendamment en strates indépendantes.

• Double cliquer sur le deuxième : dominante au niveau du dessin

• Cliquer sur le carré de couleur dans la fenêtre qui vient de s’ouvrir

• Indiquer sa couleur dominante dans Hex
• Bouton OK

• Recommencer avec les couleurs secondaire et accent

Nous allons enrichir la palette des gris qui te seront d’une grande utilité.

• Cliquer sur la pipette dans le menu de gauche

• Cliquer sur le gris clair

• Double cliquer sur le gestionnaire des couleurs

• Noter la référence Hex

• Recommencer pour le gris moyen et le foncé

Tu disposes désormais de la palette de couleur de ton site qui te servira dans 95 % des cas.
Le gris clair sera utilisé pour les fonds. Le foncé remplacera avantageusement  le noir dans les textes. Le moyen pourra atténuer les textes les moins importants.

Tu as remarqué le cercle en bas. Tu vas le compléter avec les couleurs présentes dans les barres.

Tu ouvres chaque couleur dans les calques et cliques directement sur la couleur dans les barres.

Il s’agit de parer aux cas très rares où tu dois disposer de plus de nuances pour un projet bien spécifique. Ce jour là, tu utilises la pipette pour enrichir ta gamme.

Tu disposes de toutes les couleurs dont tu devrais avoir besoin. Tu n’introduis aucune autre couleur dans ton design. Tu pioches dans ce document quel que soit le support utilisé : site, carte de visites, e-book… Ta marque disposera d’une palette cohérente et reconnaissable.

Tu vas sauvegarder ton document.

Au format PSD pour réaliser des modifications si besoin.

File > Save as PSD

Au format PNG pour pouvoir l’imprimer, le consulter et le partager (tu peux par exemple m’adresser ton chef d’œuvre pour que je te donne un retour).

File > Save for web

Raffiner ta palette

Tu peux aller plus loin en utilisant des filtres sur ta palette. Les filtres permettent d’unifier une palette en ajoutant une traitement commun à toutes les couleurs.

J’ai réalisé un fichier PSD que tu utilises sous Photopea.

Télécharger le fichier PSD

Tu retrouves sur le coté gauche les calques avec les couleurs à remplacer.

Les 3 derniers sont les 3 couleurs de ta palette.

Les 3 premiers sont un filtre coloré que tu peux modifier en fonction de tes envies. Tu indiques 3 fois la même couleur.
L’orange réchauffe une palette quand le bleu la refroidie par exemple.

Tu as dans l’ordre :

• 3 nuances de blanc

• de noir

• de gris

• le filtre personnalisé

L’accent peut être trop atténué par le filtre. Dans certains cas, il vaut mieux conserver la teinte d’origine.

Valider sa palette

Les questions à se poser :

• Ma palette dispose-t-elle de tons clairs, moyens, foncés ?
• Ma palette correspond-elle au gout de mon persona ? Tu peux vérifier dans les couleurs préférées en fonction des sexes et des ages.
• Ma palette ressemble-t-elle à celle d’un de mes concurrents directs ?

Je te propose un aperçu (sommaire) de ce que pourrait rendre ta palette de couleurs à l’aide de ce fichier de test.

Télécharger le fichier de test

• Ouvrir le fichier de test avec Photopea (Open from computer)
• Remplacer les 3 couleurs par celles que tu as choisies dans le menu des calques à droite

• Sauvegarder pour le web
  File > save for web > bouton save
• Ouvrir le nouveau fichier test-couleurs.png

Tu as 2 parties dans le fichier.

La parties haute simule une page de site.

La partie basse permet de visualiser la juxtaposition des couleurs.

Le contraste est un élément important d’une palette de couleurs.
Nous allons le vérifier en passant la création en noir et blanc.

• Copier test-couleurs.png et renommer le test-couleurs-gris.png
• Ouvrir test-couleurs-gris.png dans photopea
• Menu Image > ajustements > hue saturation

• Mettre le curseur de saturation à gauche

• Bouton OK
• Sauvegarder pour le web
• Ouvrir le fichier images

Tu dois voir distinctement tous les éléments dans les couleurs en bas.

Couleurs contrastées

Tu vois clairement les 2 blocs à chaque fois.

Couleurs manquant de contraste

La couleur secondaire et l’accent ne se distinguent pas.

Si tes couleurs manquent de contraste, tu peux sélectionner une tonalité plus claire ou plus foncée de la couleur qui pose problème.

Pour aller plus loin :

Tu peux vérifier précisément le contraste entre tes couleurs à l’aide d’Hexnaw. Malheureusement, il ne semble fonctionner que sous Chrome.

• Compléter les 2 premières couleurs

• Cliquer sur Add pour la troisième couleur et continuer avec les 3 gris
• Cliquer sur Test colors

• Vérifier que le contraste est bon entre la dominante et les 2 autres couleurs

Dans cet exemple, le contraste est quasi parfait entre la couleur dominante et les 2 autres en particulier avec l’accent ce qui est le but recherché.

Le ratio est une note de 0 à 15. La note AAA est la plus élevée. Naw indique que le contraste n’est pas suffisant. La colonne large texte correspond aux titres et Small texte au corps du texte.

• Vérifier que les 2 niveaux de gris des textes (foncé et moyen) soient utilisables sur un maximum de fonds

Il faudra utiliser le jaune pour pour les titres sur le violet.

Les textes ne pourront pas être écrits en gris moyen sur le bleu.

Mes félicitations. Tu viens de finaliser la palette complète de ton site. Comment as-tu trouvé cette méthode ? Je pense que le cas pratique en toute fin d’article peut t’aider à bien comprendre le fonctionnement. C’est toujours plus simple avec un exemple.

Maintenant que tu maîtrises le processus, tu peux en réaliser une ou 2 autres si le cœur t’en dit.

Compléter son moodboad avec le jeu de couleur

Pour couronner le tout, tu peux reprendre ton moodboard sous Canva et ajouter les 3 teintes principales de ta palette.

• Éléments > formes
• Cliquer sur le premier carré

• Cliquer sur la couleur de la forme

• Cliquer sur +

• Indiquer l’HEX de la couleur dominante
• Touche Entrée

• Mettre la forme au bon format (tu peux utiliser comme repère le plus petit cadre pour harmoniser l’ensemble)
• Recommencer pour les 2 autres couleurs en faisant un copié-collé sur la forme
• Sauvegarder
• L’imprimer
• L’encadrer
• Vendre cette pièce majeure de l’art contemporain pour 50 millions – bon, je me suis peut être un peu emballé mais il faut quand même reconnaître que le résultat est sympa.

Ressources :

Tu peux consulter BrandColors pour trouver l’inspiration. Ce site recense les couleurs de grandes marques.

Le cas pratique

Je vais repartir des 2 cas déjà évoqués dans les articles précédents.

Cas 1 : Le réparateur de moto MoToZuKa

Voici les 2 photos choisies

Les palettes suggérées pour la photo de l’atelier.

Aucune ne me convient comme point de départ. J’abandonne cette option immédiatement. Si je n’ai pas de pistes avec le deuxième choix, je repars à zéro avec 2 autres photos.

Les palettes proposées pour la photo du compteur.

Cela me paraît plus prometteur.

Je pars sur la palette sourde

Dans la roue chromatique, je vois une palette équerre qui se dessine.

Les valeurs des couleurs :

• bleu moyen : 698EA5
• rouge : A62123
• bleu clair : CAECF4

Je décale le rouge vers le bord du cercle pour avoir une couleur pure qui ressorte mieux. j’enlève un peu de noir pour le rendre plus éclatant.

Je purifie un peu le bleu moyen pour le rendre un peu plus présent.
Je le fonce pour le faire contraster avec les 2 autres couleurs.

Je ne touche pas au bleu qui fonctionne bien.

J’ai maintenant :

• bleu moyen : FFFCFB
• rouge : D30003
• bleu clair : CAECF4

Je prends la couleur rouge qui pour moi est la plus intéressante et regarde ce que l’on peut créer comme palettes.

Semblables : un grand non

Monochrome : trop plat

Triade : pourquoi pas

Équerre : les 2 options sont pas mal.

J’ai éloigné le bleu clair car la couleur violette de l’équerre initiale passe très mal auprès des hommes.

Complémentaire : rouge-vert, je passe cette association trop difficile à manier.

J’ai oublié de noter les couleurs de la complémentaire. Je vais les chercher avec Photopea depuis la capture d’écran.

Je compare les options et décide que l’équerre a le plus de potentiel.
J’affine en diminuant la pureté des couleurs pour laisser plus de place au rouge pour s’exprimer.

• bleu-gris : 548e91
• bleu-violet : 20243b
• rouge : d90003

• beige : c7c06e
• kaki : 635529
• rouge : d90003

J’essaie les filtres.

Le gris clair passe bien pour le beige. Je ne touche pas au rouge.

• beige : c4be6f
• kaki : 64572d
• rouge : d90003

Le filtre rouge me semble une bonne option pour le bleu.

• bleu-gris : 588b8e
• bleu-violet : 25233a
• rouge : d90003

Je vais départager les 2 options avec la palette complète et le test.

Les 2 résultats sont honnêtes.

Le contraste est un peu faible pour la version bleu mais rien de rédhibitoire.

Le bleu convient parfaitement à la cible masculine et le rouge à la vitesse ce qui en fait un bon candidat.

Le kaki est moins prisé mais la création est plus chaleureuse.

Le problème de la version bleue, c’est que le résultat est passe partout.
S’il n’y a pas de concurrents dans les tons bleus, c’est la solution de simplicité.

La version beige a plus de personnalité à mon goût. Pourquoi ne pas interroger une dizaine de clients et récolter leurs avis ?

Cas 2 : Les cours de yoga OseZen

je suis parti de 2 illustrations dont l’ambiance m’évoquait le yoga.

Visuel 1

Les propositions de palettes sont réussies mais les variations sont plus que subtiles.

Je pars sur la proposition colorée.

Nous sommes clairement dans la configuration d’une équerre avec des pastels.

• violet clair : CFD2F1
• violet : B6B0DC
• vert : 1A8A7A

Je tente de voir avec un vert plus pur. Je renforce un peu le contraste en fonçant un peu une couleur et en éclaircissant l’autre. Je les harmonise en les plaçant au même niveau sur la roue.

Je trouve le résultat convaincant.

• CBCAFF
• BEB8E5
• 008A76

Je tente une triade avec le violet.

Le résultat peut être travaillé en pastels.

• F1DDCF
• B6B0DC
• B6CCB5

C’est déjà évident que les contrastes ne seront pas très prononcés dans ces créations.

Visuel 2

Les premières propositions ne me conviennent pas.

Le sourd est plaisant.

Profond : nous nous éloignons de l’ambiance souhaitée.

Sombre : bonjour déprime.

Je pars de la proposition sourd.

Nous avons une belle complémentaire.

• rose : F4AACE
• gris : C5C8D6
• vert : 8BBDBA

je fais virer le gris sur du violet car cette couleur est peu appréciée par les femmes.

Le rose devient un peu plus clair pour contraster.

Je monte un tout petit peu la pureté du vert.

• rose : FFB2D7
• violet : DBBCD2
• vert : 73BDB9

Nous allons utiliser les filtres.

Visuel 1 :
Le filtre blanc rend bien.

La triade fonctionne avec le blanc et étonnamment avec le rouge.

Visuel 2 :
Le filtre blanc est pas mal.

Je retiens pour les tests :
1) la triade teintée de rouge
2) le visuel 2 avec le blanc moyen et le clair pour le rose

Triade

• violet : b8acd7
• rose : f1d8cb
• vert : b8c8b1

Visuel 2

• violet : eddde8
• rose ffc5e1
• vert : b8dedc

Les deux résultats sont au final très semblables avec une version sage et l’autre plus féminine et légèrement plus vive.

Le test de contraste penche en faveur de la triade.

Cette palette est équilibrée. La couleur accent manque un peu de vivacité pour être efficace en bouton.

Je pense que je prendrais cette palette avec une dominante très neutre, l’apport du rose pour la touche de douceur et l’accent vert  qui ressortira sans pour autant faire catalogue de supermarché.

Conclusion

Nous voici arrivés à la fin de ce périple sur la couleur. Tu as construit la palette complète des couleurs de ta marque.

Tes clients associeront désormais ces couleurs à ta marque ce qui sera un point positif pour la mémorisation et la différentiation.

Tu peux aller plus loin en consultant les articles complémentaires sur la couleur :

• La signification des couleurs
• La popularité des couleurs (préférée/détestée) et les associations à des qualités (vitesse, technologie, fiabilité…)
• Approfondis la théorie des couleurs

Retrouve tous les tutoriels pour Créer ta marque

Il ne te reste plus qu’à me faire part du résultat dans les commentaires.