Générateur de palette de couleurs : sept couleurs lisibles, et pourquoi sept

Notre histoire · Les outils du studio

Je photographie presque tout en noir et blanc. La couleur, je la retrouve de l'autre côté de mon travail, dans le graphisme. La charte du studio tient en sept teintes, et quand j'ai construit le générateur de palette de couleurs, j'ai voulu qu'il raisonne de la même façon : sept couleurs qui vont ensemble, et qui restent lisibles.

Sept teintes, aucune autre

C'est la première phrase du nuancier, dans la charte graphique de Studio Soleil Orange : « Sept teintes, aucune autre. » Un accent orange, trois encres sombres, trois fonds clairs. Sur le papier, cinq couleurs pourraient suffire. Dans la vie d'une marque, il en faut presque toujours un peu plus : un second fond pour les cartes et les encarts, une encre plus profonde pour les grands aplats sombres, une lumière pour les réserves. Le studio a deux fonds clairs très proches et deux bruns foncés, et chacun a son rôle.

Le générateur reprend cette logique. Il compose cinq couleurs de base, le fond principal, le fond secondaire, le texte, l'accent et le neutre, puis deux nuances complémentaires, l'Ombre et la Lumière. L'Ombre est un quasi-noir, la Lumière un quasi-blanc, tous deux légèrement teintés pour s'accorder au reste. Jamais de noir ni de blanc pur : c'est souvent ce qui rend une palette plus douce à l'œil.

Comment l'outil compose une palette

Vous choisissez d'abord un fond clair, sombre ou au hasard, puis une ambiance parmi huit : libre, chaleureuse, fraîche, naturelle, pastel, sobre, audacieuse ou rétro. Si vous avez déjà une couleur en tête, celle d'un logo par exemple, vous pouvez partir d'elle et lui donner un rôle : les six autres s'accordent avec elle. Ensuite, il suffit de cliquer sur « Composer le prisme » autant de fois que vous voulez. Le cadenas garde les couleurs qui vous plaisent, les boutons Précédente et Suivante permettent de revenir sur une proposition, et « Modifier » sert à corriger une teinte à la main.

Derrière le bouton, l'outil travaille dans un espace de couleur proche de la perception humaine : il choisit une teinte, en déduit des couleurs qui s'accordent, puis ajuste la luminosité de chacune jusqu'à atteindre le contraste visé. Les mêmes règles s'appliquent à chaque proposition.

Des contrastes garantis

Une belle palette illisible ne sert à rien. Chaque proposition passe donc sept vérifications, affichées sous les couleurs :

• le texte sur le fond principal et sur le fond secondaire, au moins 4,5:1, l'outil visant 7:1 ;
• le neutre sur le fond principal, au moins 4,5:1 ;
• l'accent sur chacun des deux fonds, au moins 3:1, pour les titres et les icônes ;
• le texte d'un bouton aux couleurs de l'accent, au moins 4,5:1 ;
• l'Ombre sur la Lumière, au moins 4,5:1.

Si des couleurs verrouillées rendent un contraste impossible, le verdict passe au rouge et l'outil conseille de déverrouiller. Il ne triche pas pour vous faire plaisir.

L'essai avec l'orange du studio

Pour cet article, j'ai donné à l'outil l'orange du studio, #FF681F, comme couleur de départ pour l'accent, en ambiance chaleureuse. Sur fond clair, il l'a gardé dans sa famille mais l'a assombri en #CD3600 : tel quel, cet orange ne tiendrait pas les contrastes sur un fond aussi lumineux. Le vérificateur de contraste le confirme, il tombe à 2,45:1 sur le crème du studio. Sur fond sombre, l'outil l'a seulement décalé vers #FD7300.

Si votre couleur de marque n'est pas négociable, entrez-la avec « Modifier » : elle est alors verrouillée telle quelle, les autres couleurs se composent autour, et l'outil vous dit franchement si un contraste ne tient plus.

Exporter et utiliser sa palette

Une palette n'a d'intérêt que si elle sort de l'écran. Donnez-lui un nom, et l'outil la met en page en image PNG, avec son titre, la mention de ses contrastes et la signature du studio en bas. Cinq formats sont prêts, du carré pour Instagram à la bannière pour le web.

La palette peut aussi partir directement vers deux autres outils du studio : le générateur de charte graphique, qui range chaque couleur dans le bon rôle, et le générateur de polices, pour habiller les visuels de présentation de votre police. Le passage se fait dans votre navigateur, rien n'est envoyé sur Internet.

Pour qui, et pour quoi faire

Graphistes

En rendez-vous, trois pistes de palette valent mieux qu'un long discours. Le cadenas garde la couleur imposée par le client, l'outil compose le reste, et les exports PNG se glissent dans une présentation ou un moodboard. Le nuancier .ase arrive directement dans les logiciels Adobe.

Commerces, restaurants et artisans

Quand on fait soi-même sa communication, le plus dur est de rester cohérent entre la carte, l'enseigne, le site et Instagram. Une palette de sept couleurs, avec un rôle pour chacune, règle la question une bonne fois. Et comme les contrastes sont vérifiés, le texte de la carte reste lisible, même en terrasse.

Développeurs et intégrateurs

Les variables CSS sortent prêtes à l'emploi, avec des duos déjà conformes aux seuils WCAG. Pour un mode sombre, il suffit de choisir le fond sombre.

Community managers

Les formats d'export correspondent aux réseaux : carré et portrait pour Instagram, story, épingle pour Pinterest. Une palette partagée, c'est aussi une façon simple de montrer l'univers d'une marque avant même le premier visuel.

La couleur dans mes photos

Même si le noir et blanc domine mon catalogue, il m'arrive de garder la couleur quand elle est le sujet. Les cerfs-volants dans le ciel de Dieppe sont de ceux-là : des baleines, des rubans, des formes qui n'existent vraiment qu'en couleur.

Questions fréquentes

À vous de composer

Le générateur fait partie des outils du studio, aux côtés du vérificateur de contraste, du générateur de polices, du générateur de charte graphique et de l'Atelier de motifs. Pour la suite logique, lisez comment ranger sa palette dans une charte graphique. Et si la couleur vous manque au mur, quelques-uns de mes tirages l'ont gardée.

Composer ma palette →Voir les tirages en couleur →