Palette de couleurs

Qu’est-ce qu’une palette de couleurs?

Une palette de couleurs est l’ensemble défini des couleurs qu’utilise une marque ou un produit, avec des valeurs exactes pour chaque support et des règles qui précisent le rôle de chaque couleur. Une palette complète indique les valeurs HEX ou RVB pour les écrans, CMJN et souvent Pantone pour l’imprimé, et nomme chaque couleur selon sa fonction.

Une palette est bien plus qu’une liste d’échantillons. Elle établit des proportions (la quantité de chaque couleur), des combinaisons (quelles couleurs peuvent être posées sur quels arrière-plans) et des fonctions (quelle couleur signale un lien, une erreur ou un appel à l’action). Sans ces règles, les cinq mêmes couleurs peuvent être agencées en mises en page qui semblent sans lien entre elles ou qui échouent aux vérifications d’accessibilité.

Pourquoi une palette de couleurs est importante

Reconnaissance : utiliser les mêmes couleurs de façon constante sur le site Web, l’emballage, l’affichage et les médias sociaux rend la marque plus facile à reconnaître.
Des interfaces utilisables : dans un site Web ou une application, la couleur indique l’état et l’action. Une palette claire rend les boutons, les liens et les alertes prévisibles.
Accessibilité : les WCAG exigent un rapport de contraste d’au moins 4,5:1 pour le texte normal et de 3:1 pour le grand texte et les éléments d’interface essentiels. Vérifier les combinaisons une seule fois, dans la palette, évite d’avoir à les corriger sur chaque page.
Une production uniforme : des valeurs définies pour l’imprimé et l’écran empêchent les couleurs de dériver entre l’imprimeur, le fabricant d’enseignes et le développeur Web.
Des décisions plus rapides : designers et développeurs travaillent à partir de jetons plutôt que de choisir à l’œil des couleurs approximatives.

Composantes clés d’une palette de couleurs

Couleur principale ou d’accent : la couleur la plus distinctive, utilisée avec parcimonie pour mettre en valeur, pour les appels à l’action et pour les moments forts de la marque.
Neutres : des tons foncés, clairs et gris pour le texte, les arrière-plans et les bordures. Sur la plupart des sites, les neutres occupent beaucoup plus de surface que la couleur de la marque.
Couleurs secondaires : des couleurs d’appoint facultatives pour les illustrations, les graphiques ou les catégories de produits, choisies pour accompagner la couleur principale plutôt que pour lui faire concurrence.
Couleurs fonctionnelles : les états de réussite, d’avertissement, d’erreur et d’information, qui doivent être clairement distincts et ne jamais reposer uniquement sur la couleur pour transmettre un sens.
Valeurs pour chaque support : HEX/RVB pour le numérique, CMJN et Pantone pour l’imprimé, avec des notes lorsqu’une couleur d’écran ne peut pas être reproduite exactement à l’impression.
Règles d’utilisation : les combinaisons texte-arrière-plan approuvées avec leurs rapports de contraste, des proportions approximatives et des variantes pour le mode clair et le mode sombre.

Erreurs courantes avec une palette de couleurs

Tester les échantillons plutôt que les combinaisons : une couleur peut paraître forte en elle-même et pourtant échouer au test de contraste lorsqu’elle sert de texte sur votre arrière-plan.
Trop de couleurs de marque : chaque couleur supplémentaire ajoute des combinaisons à gérer et dilue la reconnaissance.
Utiliser l’accent pour tout : lorsque les titres, les icônes, les liens et les boutons partagent tous la couleur d’accent, plus rien ne ressort.
Se fier uniquement à la couleur : les bordures rouges des erreurs de formulaire échappent aux personnes ayant un trouble de la vision des couleurs; ajoutez du texte et des icônes.
Des valeurs pour l’écran seulement : les couleurs numériques vives, surtout les orangés et les bleus éclatants, changent souvent en CMJN. Définissez les valeurs d’impression de façon délibérée.

Bonnes pratiques pour une palette de couleurs

Partez de la stratégie de marque : choisissez des couleurs en fonction du positionnement et du public, puis vérifiez comment elles se démarquent de celles des concurrents.
Vérifiez chaque combinaison : consignez les rapports de contraste de chaque combinaison texte-arrière-plan que vous comptez utiliser et indiquez quels usages sont permis.
Définissez des jetons selon le rôle : nommez les couleurs selon leur fonction, par exemple --colour-accent ou --colour-text, pour que les thèmes et le mode sombre puissent modifier les valeurs sans réécrire les composants.
Créez les teintes et les nuances de façon systématique : si vous avez besoin de déclinaisons plus claires ou plus foncées, générez-les de manière cohérente et testez-les plutôt que de les choisir au cas par cas.
Faites des épreuves d’impression : demandez des épreuves imprimées des couleurs clés avant les gros tirages et consignez les valeurs approuvées.

La palette de couleurs chez PerfectPixels

Notre propre palette est volontairement restreinte : Ember (#FF4A1C) comme couleur d’accent, Ink (#0B0B0A) et Graphite (#2E2E2B) comme tons foncés, et Paper (#F1F0EB) comme neutre clair. La vérification des combinaisons a déterminé la façon dont nous l’utilisons. Ember sur Ink atteint environ 5,9:1 et convient donc au texte sur fond foncé, tandis qu’Ember sur Paper se situe juste sous 3:1, soit en deçà même du minimum pour le grand texte. Sur fond clair, nous utilisons donc Ember pour les aplats et les accents, et un Ember plus profond (#C4250A, environ 5:1 sur Paper) chaque fois qu’il doit porter du texte ou des traits fins. Nous créons les palettes de nos clients de la même façon dans le cadre de nos mandats d’identité de marque, et les documentons dans des normes graphiques et des jetons de design.

Foire aux questions

Combien de couleurs une palette de marque devrait-elle compter?

Bien des marques fortes travaillent avec une ou deux couleurs signatures et une série de neutres, et n’ajoutent des couleurs secondaires ou fonctionnelles que lorsque celles-ci ont un rôle clair. Le bon nombre dépend de ce que la marque doit communiquer, par exemple des catégories de produits ou de la visualisation de données.

Que nous apprend la psychologie des couleurs sur le choix des couleurs de marque?

Les associations de couleurs sont réelles, mais elles dépendent fortement de la culture, du secteur et du contexte : abordez donc les affirmations générales avec prudence. Se démarquer dans son marché, faire preuve de constance et offrir un contraste accessible comptent généralement plus que la signification supposée d’une couleur en particulier.

Ai-je besoin de couleurs différentes pour le mode sombre?

En général, il suffit d’ajuster les valeurs plutôt que de créer une nouvelle palette. Un texte blanc pur sur un noir pur peut sembler agressif, et les accents saturés peuvent paraître différents sur fond foncé; définissez donc des jetons pour le mode sombre et revérifiez le contraste de chaque combinaison.