Générateurs de palettes de couleurs : des palettes qui marchent

Un générateur de palette de couleurs est un outil qui propose un ensemble de couleurs harmonieuses, à partir des règles de la théorie des couleurs, du hasard, d’une photo ou d’une consigne écrite. Servez-vous-en pour vous débloquer, puis retouchez le résultat : ajoutez un fond neutre et une couleur de texte, donnez un rôle à chaque couleur et testez-la sur une vraie création. Les cinq pastilles du générateur sont un point de départ. La palette qui fonctionne est celle que vous en tirez.

Les principaux types de générateurs de palettes

Chaque générateur fait, en coulisses, l’une de quatre choses. Savoir lequel vous utilisez vous dit à quoi il est bon et ce qu’il faudra corriger.

Pour comprendre les règles derrière les cercles d’harmonies, lisez l’harmonie des couleurs. Pour l’approche par la photo, une palette de couleurs à partir d’une image explique comment mieux prélever, et les générateurs de palettes par IA traitent de l’art de la consigne.

Pourquoi les palettes générées échouent souvent en situation réelle

Un générateur présente les couleurs en cinq bandes égales. Les vraies créations n’ont rien à voir : une couleur couvre l’essentiel de l’espace, une autre porte les mots et le reste n’apparaît qu’en petites quantités. Voici un résultat aléatoire typique, à côté de la même idée une fois retouchée.

Cinq retouches pour rendre utilisable n’importe quelle palette générée

1. 1

   Gardez la couleur qui vous plaît vraiment

   Verrouillez-la et faites-en la couleur principale. Tout le reste existe pour la servir. Si rien ne se détache, relancez plutôt que de vous contenter du résultat.

2. 2

   Ajoutez un fond et une encre

   Les générateurs les incluent rarement. Choisissez un fond clair (un blanc cassé chaud ou froid) ou sombre, et une couleur d’encre pour le texte qui contraste fortement avec lui. Teintez légèrement les deux vers votre couleur principale pour qu’ils s’accordent.

3. 3

   Étagez la clarté

   Passez les pastilles en niveaux de gris, de tête ou à l’écran. Vous voulez des valeurs claires, moyennes et sombres, pas cinq valeurs moyennes. Ajustez la clarté jusqu’à ce que chaque couleur se distingue nettement.

4. 4

   Baissez la saturation de toutes sauf une

   Laissez l’accent vif et calmez les autres. Une couleur d’appui plus douce que la couleur principale rend celle-ci plus riche.

5. 5

   Attribuez les proportions

   Une bonne répartition de départ est la règle 60 30 10 : le fond à environ 60 %, la couleur principale à environ 30 %, l’accent à environ 10 %. Ajustez à l’œil une fois la mise en page sous les yeux.

Pour faire ces retouches avec précision, travaillez dans un format qui sépare la clarté de la teinte. HSL est facile à lire ; OKLCH garde mieux une clarté juste d’une teinte à l’autre.

Testez la palette sur une vraie mise en page

Les pastilles cachent des problèmes qui surgissent dès que les mots arrivent. Posez votre palette sur quelque chose que vous feriez vraiment, comme une publication, un menu ou une section d’accueil, et regardez-la à la taille où on la verra. Vérifiez ensuite chaque association de texte avec un vérificateur de contraste.

Un dégradé fait un test supplémentaire rapide. Fondez ensemble le fond, la couleur principale et la couleur d’appui : si le mélange devient gris au milieu, deux couleurs s’affrontent, comme l’explique les dégradés boueux.

Enregistrez-la en tokens, pas en capture d’écran

Une fois la palette au point, nommez les couleurs par leur rôle plutôt que par leur teinte, pour pouvoir changer le bleu canard plus tard sans tout renommer. En code, ce sont des variables CSS ; dans les outils de design, des styles nommés ; dans Gradiently, le kit de marque, où palettes, polices et ton de voix vivent ensemble et où le Designer les applique à tout ce qu’il crée.

:root {
  --color-ground:  #f7f3ec;
  --color-ink:     #1c2321;
  --color-main:    #2a6f68;
  --color-support: #a8c5b8;
  --color-accent:  #e07a5f;
}

.button {
  background: var(--color-main);
  color: var(--color-ground);
}

Chercher par couleur plutôt que générer

Parfois, ce que vous voulez vraiment, ce n’est pas cinq codes mais un fond abouti dans une famille de couleurs. Le Marché de Gradiently permet de chercher des Marks par mots de couleur comme «  bleu canard profond  » ou «  pêche chaude  » et de filtrer par style. Chaque Mark est un fond vivant de dégradé et de matière, avec sa propre palette et sa propre voix typographique, comparé à tous les autres pour qu’aucun ne se ressemble, et vous pouvez créer gratuitement avec n’importe quel Mark non réservé. C’est un autre chemin vers le même but : des couleurs qui vont ensemble et tiennent déjà leur rôle.