Qu'est-ce qu'un code couleurs ?
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.
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%).
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.
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
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
Sur code-couleur.com, vous pourrez trouver vos codes en un instant grâce à leurs sélecteur de couleurs.
ImageColorPicker
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.
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.
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.
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é.
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.
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.
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.
