Générateur de palettes de couleurs

Une palette, ce n’est pas une collection de couleurs qu’on aime

C’est la première erreur, et elle explique la plupart des identités visuelles ratées. Choisir cinq couleurs plaisantes ne fait pas une palette : une palette est un système hiérarchisé, où chaque couleur a un rôle défini et une part d’espace attribuée.

Sans cette hiérarchie, vous obtenez un site où tout crie en même temps, où le bouton important se noie parmi les encadrés colorés, et où le regard ne sait pas où se poser. Le problème n’est pas esthétique, il est fonctionnel.

Le générateur ci-dessus vous propose des combinaisons harmonieuses. Cette page vous explique comment les organiser pour qu’elles servent votre projet.

La règle des 60-30-10

C’est le principe le plus utile à retenir, emprunté à la décoration d’intérieur et parfaitement transposable au web comme à l’impression.

• 60 % couleur dominante. Le fond, les grandes surfaces. Presque toujours un neutre : blanc cassé, gris très clair, ou une teinte très désaturée. C’est la couleur qu’on ne remarque pas ;
• 30 % couleur secondaire. Les blocs, les zones différenciées, les en-têtes. Elle structure la page sans attirer l’œil ;
• 10 % couleur d’accent. Les boutons, les liens, les éléments sur lesquels vous voulez qu’on clique. C’est votre couleur de marque, et sa rareté fait sa force.

La faute classique consiste à inverser ces proportions, en utilisant sa couleur de marque partout. Résultat : elle cesse d’attirer l’attention précisément là où elle devrait. Si tout est rouge, le bouton rouge ne se voit plus.

Un test rapide : plissez les yeux devant votre écran. Le premier élément qui ressort doit être celui sur lequel vous voulez que le visiteur agisse. Si c’est autre chose, la répartition est à revoir.

Combien de couleurs faut-il ?

Moins qu’on ne le croit. Une palette efficace comporte généralement :

• Une couleur principale, celle qu’on associera à votre marque ;
• Une couleur d’accent, pour les actions et les points d’attention ;
• Deux à trois neutres, du très clair au très foncé, qui feront la majorité du travail ;
• Deux couleurs fonctionnelles, vert et rouge, pour signaler la réussite et l’erreur.

Ces deux dernières sont systématiquement oubliées, et elles manquent toujours au moment de concevoir un formulaire. Prévoyez-les dès le départ, en veillant à ce qu’elles s’accordent avec le reste plutôt que d’ajouter un vert et un rouge criards au dernier moment.

Un point souvent négligé : pensez également aux déclinaisons de votre couleur principale, une version plus claire et une plus foncée. Elles serviront pour les survols de boutons, les états désactivés et les fonds légèrement teintés.

Le contraste n’est pas négociable

C’est le critère qui distingue une palette professionnelle d’une palette amateur, et il se mesure objectivement plutôt qu’à l’œil.

Les recommandations d’accessibilité fixent un rapport de contraste minimal entre un texte et son fond : 4,5 pour 1 pour du texte courant, 3 pour 1 pour du texte de grande taille. En dessous, une partie de vos visiteurs ne pourra tout simplement pas vous lire confortablement.

Les cas problématiques reviennent toujours : le gris clair sur blanc, très à la mode et souvent illisible ; le texte blanc sur une couleur pastel ; les liens colorés qui ne se distinguent du texte que par leur teinte, invisibles pour une personne daltonienne.

Cette dernière remarque mérite qu’on s’y arrête : environ un homme sur douze perçoit mal certaines couleurs. Si votre interface ne signale une information que par la couleur, un vert pour valide et un rouge pour erreur par exemple, une part non négligeable de vos utilisateurs perdra l’information. Doublez toujours le signal par un texte, une icône ou un symbole.

Comment utiliser ce générateur

L’outil ci-dessus construit des palettes à partir des relations chromatiques. Quelques conseils pour en tirer un résultat exploitable :

• Partez d’une couleur imposée si vous en avez une : celle de votre logo, ou une teinte liée à votre secteur. Le générateur construira le reste autour ;
• Testez plusieurs harmonies pour la même couleur de base. Une combinaison complémentaire produit un rendu énergique, une combinaison analogue un rendu apaisé. Ce n’est pas une question de goût mais de message ;
• Notez les codes hexadécimaux plutôt que de vous fier à votre écran. Les couleurs varient énormément d’un moniteur à l’autre ;
• Vérifiez sur un vrai support. Une palette validée sur un aplat peut se révéler pénible une fois appliquée à une interface complète.

Pour comprendre pourquoi certaines combinaisons fonctionnent et d’autres non, mon outil de cercle chromatique détaille les relations entre les teintes, et c’est la base théorique de tout ce qui précède.

Ce que les couleurs racontent

Les associations culturelles existent, mais elles sont moins déterminantes qu’on ne le prétend souvent. Le bleu domine chez les banques et les acteurs technologiques, le vert dans l’alimentaire et l’écologie, le noir dans le luxe. Ces conventions donnent des repères utiles.

Deux nuances importantes toutefois. D’abord, ces significations varient selon les cultures : le blanc évoque la pureté en Occident et le deuil dans plusieurs pays d’Asie. Si vous vous adressez à l’international, vérifiez.

Ensuite, suivre la convention de son secteur signifie ressembler à tous ses concurrents. Un choix décalé, s’il reste cohérent et lisible, peut devenir un actif de différenciation bien plus fort qu’un bleu de plus dans un marché de bleus.

Documenter sa palette

Dernier conseil, celui qu’on regrette toujours d’avoir négligé. Une fois votre palette arrêtée, écrivez-la quelque part : les codes hexadécimaux, le rôle de chaque couleur, et les combinaisons interdites.

Sans ce document, six mois plus tard, personne ne saura si le bleu du bouton est le même que celui du logo, et vous vous retrouverez avec quatre variantes légèrement différentes de votre propre couleur de marque. C’est le genre de dérive qui passe inaperçue jusqu’au jour où l’on compare deux supports côte à côte.

Ce même document vous servira à décliner votre identité sur tous vos supports. Les générateurs d’images IA que j’ai comparés acceptent d’ailleurs des codes couleur précis dans leurs instructions, ce qui permet de produire des visuels cohérents avec votre charte.