Construire une palette de couleurs de marque à partir de vos propres photos produit
Extrayez les couleurs réelles de vos photos de produit et d’emballage, attribuez un rôle à chacune, et vérifiez chaque association de texte selon le contraste WCAG avant qu’elle n’apparaisse dans une publicité, une légende ou une carte de fin.
Beaucoup de petites marques ont un fichier de logo et aucune liste de couleurs. Les couleurs se trouvent dans le produit lui-même : la bouteille, l’étiquette, la boîte, le tissu. Au moment de créer une publicité, une vignette ou un style de légende, on regarde à l’œil un code hexadécimal sur une photo en espérant qu’il soit bon.
On peut faire mieux en une dizaine de minutes. Extrayez les couleurs de photos du produit réel, attribuez un rôle à chacune, et vérifiez quelles paires sont lisibles en tant que texte. Notre extracteur de palette de couleurs gratuit fait l’extraction et la vérification directement dans votre navigateur, sans rien téléverser.
Pourquoi partir du produit plutôt que d’un tableau d’inspiration
Les gens reconnaissent votre produit à son apparence en rayon ou dans leur main. Une publicité dont les couleurs correspondent à l’emballage paraît être la même marque d’un coup d’œil, alors qu’une publicité qui s’en éloigne donne une impression de contrefaçon. Une palette tirée du produit est aussi fidèle à ce que vous vendez réellement, ce qu’un tableau d’inspiration fait rarement.
Cela fonctionne aussi pour les services. Si vous n’avez pas de produit physique, utilisez vos meilleures captures d’écran, votre vitrine ou des photos de votre équipe, tout ce que les gens associent déjà à vous.
Étape 1 : choisir et recadrer les photos
Choisissez deux ou trois photos nettes : le produit sur fond uni, la face de l’emballage, et une photo d’ambiance que vous aimez. Recadrez ensuite fortement. L’extracteur compte chaque pixel qu’on lui donne, donc une bouteille posée sur une table en bois renverra la table comme l’une de vos couleurs de marque. Recadrez sur le produit et l’étiquette, et la palette sera celle du produit.
Photographiez à la lumière du jour, ou sous une lumière neutre si possible. Une lampe chaude rend le blanc de l’emballage crème, et chaque couleur extraite portera cette teinte.
Étape 2 : extraire cinq à huit couleurs
Déposez chaque photo dans l’extracteur et demandez 5 ou 6 couleurs pour une photo de produit épurée, ou 8 pour une photo chargée. Il regroupe les pixels similaires et liste la moyenne de chaque groupe, du plus important au moins important, avec la part de l’image que chacun couvre. Le point de départ est fixe, donc la même photo donne toujours la même palette, et un petit accent vif, comme un bouchon rouge sur une bouteille blanche, obtient son propre échantillon au lieu d’être noyé dans la moyenne.
Lancez toutes vos photos et repérez les couleurs qui reviennent. Ce sont celles de la marque. Une couleur qui n’apparaît que sur une seule prise est généralement le fond ou la lumière.
Étape 3 : attribuer un rôle à chaque couleur
Une palette n’est utile que si chaque couleur a un rôle. La plupart des marques en ont besoin de quatre :
- Fond : la couleur sur laquelle repose la plus grande partie d’une mise en page. Souvent la couleur de base de l’emballage, ou un neutre clair.
- Texte : une couleur foncée lisible sur le fond. Un noir profond convient. Une couleur de marque foncée fonctionne mieux, si elle réussit le test de contraste.
- Accent : la couleur vive, pour un bouton, une pastille de prix ou un mot mis en avant.
- Support : un ou deux neutres pour les encadrés, les séparateurs et les textes secondaires.
Résistez à la tentation d’utiliser tout ce que la photo vous donne. Cinq couleurs nommées, chacune avec un rôle clair, garderont cohérentes une centaine de publicités. Douze n’y parviendront pas.
Étape 4 : vérifier le contraste avant de l’utiliser
Des paires de couleurs qui paraissent correctes sur un grand écran peuvent être difficiles à lire sur un téléphone au soleil, et bien plus encore pour les personnes malvoyantes. Les Web Content Accessibility Guidelines du W3C donnent un chiffre pour cela, le rapport de contraste, qui va de 1:1 (la même couleur deux fois) à 21:1 (noir sur blanc). Les seuils sont :
| Texte normal | Grand texte | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Un grand texte correspond à au moins 18 points, ou 14 points gras, selon la définition du WCAG. Et ces chiffres sont des limites strictes : la recommandation du W3C sur le critère 1.4.3 indique qu’un rapport calculé ne doit pas être arrondi, donc 4.499:1 ne satisfait pas 4.5:1.
Le WCAG a été rédigé pour le contenu web, et non pour les publicités, mais le raisonnement vaut pour tout texte à l’écran, y compris les sous-titres incrustés dans une vidéo et les mots d’une carte de fin.
Un exemple concret
Imaginons que votre emballage vous donne un bleu marine #1a3c6e, un crème #fdf6e3 et un orange #e07a2e.
La formule est (L1 + 0.05) / (L2 + 0.05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus foncée. La luminance relative va de 0 pour le noir à 1 pour le blanc. Le bleu marine donne environ 0.046, le crème environ 0.923 et l’orange environ 0.300.
- Texte bleu marine sur crème : (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, soit environ 10.1 avec ces valeurs arrondies, et 10.16:1 exact. Cela passe le niveau AAA quelle que soit la taille. C’est votre association principale.
- Texte orange sur crème : (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, soit environ 2.78:1. Cela échoue même pour un grand texte. L’orange ne doit pas porter de mots sur du crème.
- Texte noir sur orange : (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, soit 7.0 avec ces valeurs arrondies mais 6.99:1 exact. Cela passe le niveau AA pour tout texte mais manque de peu le niveau AAA. Convient pour l’étiquette d’un bouton.
- Texte crème sur bleu marine : la même paire que la première, donc le même 10.16:1. Inverser une paire ne change jamais le rapport.
Ainsi, les rôles se choisissent presque d’eux-mêmes : fond crème, texte bleu marine, orange comme forme d’accent avec des mots noirs dessus (le bleu marine sur orange n’atteint que 3.65:1, ce qui n’est acceptable en AA que pour un grand texte seulement). L’extracteur affiche toute cette grille d’un coup : chaque couleur face à chaque autre, plus le blanc et le noir, chaque case étant notée AAA, AA, AA grand texte ou Échec.
Étape 5 : la noter une fois pour toutes
Exportez la palette en propriétés personnalisées CSS ou en JSON, et conservez-la à côté de vos fichiers de logo. Renommez les variables selon leur rôle une fois la décision prise : --brand-bg, --brand-text, --brand-accent se lisent mieux que --color-3 un mois plus tard. Ajoutez sous chacune une ligne indiquant les associations validées, pour que personne n’ait à refaire la vérification.
Vérifiez ensuite les valeurs par rapport à tout document officiel dont vous disposez. Une photo donne la couleur vue par votre appareil, qui se rapproche de l’emballage imprimé sans être identique à la spécification d’encre. Si votre imprimeur ou votre graphiste a des valeurs exactes, ce sont elles qui priment.
Utiliser la palette dans les publicités et les publications
- Légendes et sous-titres : votre couleur de texte sur un encadré de votre couleur de fond, ou l’inverse. Vérifiez d’abord la paire.
- Cartes de fin : la couleur de fond avec le logo et une ligne dans votre couleur de texte. L’accent peut remplir une forme de bouton derrière un court appel à l’action.
- Vignettes et couvertures : un accent, un grand mot lisible, beaucoup de fond.
- Codes QR sur l’emballage : une couleur de marque fonctionne si elle est nettement plus foncée que l’emballage. Notre générateur de codes QR signale quand le contraste est faible.
Où se situe Hermoso
Hermoso est un agent de marketing IA. Il repère les publicités qui fonctionnent déjà sur votre marché, crée des publicités image et vidéo fidèles à votre marque, publie et programme sur vos propres comptes de réseaux sociaux, et lance des campagnes payantes sur vos propres comptes publicitaires. Lorsque vous ajoutez votre marque à partir de votre site web, il apprend vos produits, votre logo et votre palette. Les légendes et les cartes de fin restent désactivées sauf si vous le demandez, et dans ce cas vous pouvez définir les couleurs du texte, des encadrés et de la carte de fin avec des codes hexadécimaux, de sorte que les paires vérifiées ici sont celles qui sont réellement publiées. Il fonctionne dans l’application web, ou dans Claude, ChatGPT et Cursor, via son serveur MCP.
Questions fréquentes
Comment trouver les codes hexadécimaux des couleurs de mon produit ?
Recadrez une photo nette sur le produit ou l’emballage et déposez-la dans un extracteur de palette de couleurs. Il liste les couleurs principales en HEX, RGB et HSL. Lancez-le sur deux ou trois photos et gardez les couleurs qui reviennent.
Quel rapport de contraste faut-il pour un texte ?
Selon le WCAG 2.2, le niveau AA exige 4.5:1 pour un texte normal et 3:1 pour un grand texte, et le niveau AAA exige 7:1 et 4.5:1. Un grand texte correspond à au moins 18 points, ou 14 points gras.
Un rapport de 4.49:1 suffit-il pour le niveau AA ?
Non. Le W3C indique que le rapport ne doit pas être arrondi lors de la comparaison avec le seuil, donc 4.499:1 ne satisfait pas 4.5:1.
Combien de couleurs une palette de marque doit-elle comporter ?
Assez pour que chacune ait un rôle : en général un fond, une couleur de texte, un accent et un ou deux neutres. Cinq couleurs nommées avec des rôles clairs gardent les publicités plus cohérentes qu’une longue liste.
Les couleurs d’une photo sont-elles exactes ?
Non. Ce sont les couleurs enregistrées par l’appareil sous cette lumière, proches du produit mais pas identiques à une spécification d’impression ou d’encre. Si vous disposez de valeurs officielles, utilisez-les.