Comment trouver les bons codes couleurs pour son logo ?

Dans la création de logo, il est important de trouver des couleurs pertinentes et en accord avec la marque. L'ajustement de vos couleurs est une étape fondamentale pour l'optimisation de votre future communication visuelle. Et pour se servir des mêmes couleurs par la suite, vous pourrez vous référer à leurs codes.
 
Mais, qu'est-ce qu'un code couleur ? Les codes couleurs représentent le pourcentage de chaque couleur utilisée. Vous pourrez ainsi enregistrer votre code couleur dans votre document de charte graphique, afin de pouvoir les réutiliser sur différents supports de communication. Mais, saviez-vous qu'il existe plusieurs types de couleurs ? Et plusieurs méthodes pour les trouver ?

Codes-couleurs-logo

Les différents formats de codes couleurs

Choisir la couleur de son logo est une des étapes fondamentales pour créer votre identité de marque. Cependant, pour bien les utiliser, vous devrez utiliser les codes couleurs avec intelligence car certains types de codes couleurs sont spécifiques.
 
Il existe plusieurs types de codes couleurs destinés plus ou moins à vos différents supports de communication. Sur le web, il vaut mieux utiliser le format Hex ou RGB. Si vous souhaitez imprimer un support publicitaire, alors il vaut mieux privilégier le format CMJN.
 
Vous comprendrez alors que l'on utilise pas les mêmes formats de codes couleurs pour toutes les situations. Cela varie généralement en fonction de la source ( écran de téléphone, cartes de visite, PC, etc... ).

Hexadécimal

Le code couleur hexadécimal est composé de six caractères, les deux premiers représentant la quantité de rouge (de 00 à FF), les deux suivants la quantité de vert (de 00 à FF) et les deux derniers la quantité de bleu (de 00 à FF).

CMJN

Le code couleur CMYK est composé de quatre variantes de couleurs : Les premiers représentant la quantité de cyan (de 0 à 100%), de magenta (de 0 à 100%), de jaune (de 0 à 100%) et enfin de noir (de 0 à 100%).

RGB / RVB

Le code RGB est composé de trois couleurs : La première représente la quantité de rouge (de 0 à 255), de vert (de 0 à 255) et de bleu (de 0 à 255). C'est le format qui sera le plus souvent utilisé sur le web car il est supporté par tous les navigateurs.

RGBA / RVBA

Le code RGBA est composé des trois mêmes couleurs que le code RGB, auxquelles s'ajoute une quatrième représentant l'opacité (de 0 à 1).

HSL

Le code HSL (ou HSB) est composé de trois valeurs : La première représente la teinte (de 0° à 360°), la seconde la saturation (de 0 à 100%) et enfin la luminosité (de 0 à 100%).

type-de-code-couleurs--Hexadecimal---CMJN---RGB-RVB---RGBA-RVBA---HSL

Différence entre RGB & RGBA

La principale différence entre les codes couleurs RVB et RGBA est l'ajout du canal "alpha" dans le code couleur RGBA. Le canal "alpha" représente l'opacité d'une couleur, c'est-à-dire sa transparence. Une valeur alpha de 0 est complètement transparente tandis qu'une valeur alpha de 1 est complètement opaque.

difference-rgb-et-rgba---code-couleur-supplementaire-pour-transparence

3 outils pour trouver des codes couleurs

Vous pouvez utiliser l'un de ces 3 outils gratuits en ligne qui vous génèrera automatiquement les meilleures associations de couleurs :

HTMLColorCodes

HTMLColorCodes

Avec HTMLColorCodes, vous obtiendrez les codes couleurs HTML, HEX, RGB et HSL. L'outil propose de sélectionner une couleur facilement, ainsi qu'un tableaux et des informations précises sur leurs différents aspects. Vous pourrez ainsi modifier la teintes, les nuances, les tons, le contraste.

Code-Couleur

Code-Couleur

Sur code-couleur.com, vous pourrez trouver vos codes en un instant grâce à leurs sélecteur de couleurs.

ImageColorPicker

ColorPicker

ImageColorPicker est l'outil idéal pour identifier une couleur, directement sur une image. Vous pourrez  l'importer au format JPG afin de sélectionner l'emplacement de la couleur souhaitée. Ainsi, vous obtiendrez donc la valeur du code au format RGB, HEX et HSL.

3 méthodes pour trouver un code couleur

Utiliser les mêmes couleurs dans votre identité visuelle est important pour la reconnaissance de votre marque. Afin de tester si les codes couleurs sont cohérents, vous pouvez créer une mise en page personnalisée. Cela vous permettra d'avoir un aperçu de votre visibilité, et de jouer avec les différentes couleurs du texte.

 

Pour apporter un message plus fort, il est important de coordonner les couleurs chaudes et les couleurs froides, qui vous permettront de mettre en valeur certains éléments. Il est également important de tester les différents fonds de couleurs possibles. Notamment, vous devez penser aux fonds clairs et foncés.

Utiliser un nuancier de couleur

Cet outil vous permet de sélectionner n'importe quelle couleur sur votre écran et affiche le code couleur correspondant. C'est une excellente option si vous avez déjà une idée des couleurs que vous souhaitez utiliser. Générer des palettes de couleurs vous permet non seulement d'avoir des couleurs cohérentes que vous pourrez utiliser sur vos différents supports, mais vous obtenez également les codes couleurs exactes.

nuancier-de-couleurs

Utiliser un cercle chromatique

Une méthode un peu traditionnelle, qui consiste à utiliser une roue de couleurs pour trouver des coloris complémentaires. Cela peut être utile si vous voulez créer un logo avec deux ou trois teintes.

Cercle-chromatique

Créer un dégradé de couleurs

Un dégradé est un peu différent, car il consiste à créer plusieurs couleurs et obtenir les codes couleurs pour chaque étape du dégradé. Il s'agit d'une excellente option si vous souhaitez créer un design riche, plus vivant.

degradé-de-couleurs

Les couleurs à l'impression

Que ce soit sur une carte de visite, un flyer ou un dépliant, la qualité de l'impression d'un logo est d'une immense importance. Si vous souhaitez imprimer votre logo avec un rendu le plus professionnel possible, vous devez utiliser des couleurs CMJN avec le logo au format vectoriel. Ces combinaisons vous permettront d'imprimer un logo de haute qualité.

Mode-colorimétrique-du-document-CMJJN-sur-Illustrator

Accessibilité web : Contraste des couleurs & visibilité

Le choix de vos codes couleurs est important, non pas seulement pour la visibilité des différents éléments constituant votre identité visuelle, mais également la visibilité sur le moteur de recherche. Dans ses algorithmes de classement de site web, Google prend en compte l'expérience utilisateur. Une partie de cette expérience est directement en lien avec le design de votre site internet.

accessibilité web couleurs

Si vos textes sont blancs, et que votre fond est gris, la lecture sera difficile. C'est bien pour cela que vous devez choisir les bonnes couleurs pour qu'elles soient le plus complémentaires possible. Pour aller plus loin, il est possible d'établir un test très précis pour trouver les bons contrastes des couleurs grâce à un outil comme Contrast Finder.

Contrast-Finder

Il existe également un outil uniquement dédié à l'optimisation des couleurs pour les daltoniens. Afin de faciliter leurs visibilités, vous pouvez utiliser Colorblind Web Page Filter en indiquant précisément l'anomalie de daltonisme rencontrée.

Colorblind-web-page-filter

D'autres ressources pour trouver vos couleurs