Que contient une palette de couleurs de marque ?

Une palette de marque attribue un rôle à chaque couleur. La couleur principale est celle dont les gens se souviennent : celle du logo et des boutons principaux. Une couleur secondaire la complète, une couleur d’accentuation fait ressortir les appels à l’action, et les couleurs d’arrière-plan et de texte assurent la cohérence de la page.

Le contraste compte autant que l’esthétique. Les Règles pour l’accessibilité des contenus Web (WCAG) recommandent un rapport d’au moins 4,5:1 entre le texte courant et son arrière-plan, ou de 7:1 pour le niveau AAA, plus strict.

Description de l’outil

Décrivez votre marque dans le champ « À propos de votre marque » : son activité, son public et l’impression qu’elle doit donner. Choisissez une personnalité de marque (Professionnelle, Ludique, Luxueuse, Minimaliste, Audacieuse ou Naturelle), ou laissez l’option « Adapter à la description » pour que l’IA la déduise de votre texte.

Vous obtenez cinq couleurs nommées : Principale, Secondaire, Accentuation, Arrière-plan et Texte. Le format de sortie permet de basculer entre les valeurs HEX, RGB, HSL, CMYK et d’autres formats, et chaque couleur dispose d’un bouton de copie. Le guide d’utilisation explique comment employer chaque couleur, et la section Variables CSS fournit un bloc à coller dans une feuille de style. L’IA est invitée à maintenir un rapport de contraste d’au moins 7:1 entre le texte et l’arrière-plan, et d’au moins 3:1 pour les couleurs principale et d’accentuation.

Exemple

Pour « Un torréfacteur de quartier à Portland. Chaleureux, accueillant et engagé dans le développement durable », vous pourriez obtenir une couleur principale brun torréfié, un arrière-plan crème et une accentuation terracotta, avec des variables CSS comme celles-ci :

:root {
  --brand-primary: #5b3a29;
  --brand-secondary: #a47551;
  --brand-accent: #d9643a;
  --brand-background: #faf6f0;
  --brand-text: #2b211c;
}

Fonctionnalités

  • Cinq couleurs aux rôles clairement définis, chacune avec un nom et une indication d’utilisation
  • Six personnalités, ou une personnalité choisie à partir de votre description
  • Copiez les couleurs au format souhaité, ou l’ensemble sous forme de variables CSS

Limites

L’outil ne mesure pas lui-même le contraste. Avant la mise en ligne, vérifiez donc le couple texte et arrière-plan avec un outil de vérification du contraste.