Obtenez une palette de couleurs à partir de n’importe quelle image, avec vérificateur de contraste

Comment les couleurs sont choisies

L'outil dessine une petite copie de votre image, de 160 pixels au maximum sur son plus grand côté, et compte chaque pixel non transparent. Il regroupe ensuite les pixels similaires avec un regroupement k-means et indique la couleur moyenne de chaque groupe, du plus grand au plus petit. Le pourcentage sur chaque échantillon correspond à la part de l'image couverte par ce groupe.

Le point de départ est fixe plutôt qu'aléatoire : il commence par la couleur la plus fréquente, puis ajoute toujours la couleur la plus éloignée de celles déjà retenues. Ainsi, une même image donne la même palette à chaque fois, et un petit accent vif, comme un logo rouge sur une boîte blanche, obtient son propre échantillon au lieu d'être fondu dans l'arrière-plan.

Demandez de 5 à 8 couleurs. Une photo de produit sur fond uni nécessite généralement 5 ou 6. Une photo lifestyle chargée est mieux rendue avec 8. Si l'image a moins de couleurs distinctes que le nombre demandé, l'outil vous le signale et affiche celles qu'il a trouvées.

Lire la matrice de contraste

Chaque couleur est associée à toutes les autres, plus le blanc et le noir pur, et chaque cellule affiche le ratio de contraste d'un texte dans la couleur de la ligne sur un fond dans la couleur de la colonne. Le ratio suit la définition WCAG : (L1 + 0,05) / (L2 + 0,05), où L1 et L2 sont la luminance relative de la couleur la plus claire et de la plus foncée. Il va de 1:1 (deux fois la même couleur) à 21:1 (noir sur blanc).

Les libellés correspondent aux seuils définis par la WCAG :

• AA : au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (critère de réussite 1.4.3).
• AAA : au moins 7:1 pour le texte normal et 4,5:1 pour le grand texte (critère de réussite 1.4.6).
• Grand texte signifie au moins 18 points, ou 14 points en gras (définition WCAG du grand format).

Une cellule marquée AA grand convient pour un gros titre mais reste trop pâle pour une légende. L'explication du W3C sur le critère 1.4.3 précise aussi que le ratio ne doit pas être arrondi, donc 4,499:1 n'atteint pas 4,5:1. L'outil se base sur la valeur exacte et l'affiche tronquée à deux décimales, jamais arrondie à la hausse.

Un exemple détaillé

Supposons que la photo vous donne un bleu marine #1a3c6e et un crème #fdf6e3. La luminance relative du marine est d'environ 0,046 et celle du crème d'environ 0,923. Le ratio est (0,923 + 0,05) / (0,046 + 0,05), soit environ 10,1:1 avec ces chiffres arrondis et 10,16:1 avec les valeurs exactes. Cela valide le niveau AAA pour tout texte, donc un texte marine sur une carte de fin crème est sûr à n'importe quelle taille. Mettez un orange moyen comme #e07a2e sur le même crème et le ratio tombe à 2,78:1, ce qui échoue même pour le grand texte. Réservez l'orange à un bouton avec du texte noir (6,99:1, soit AA mais juste en dessous de AAA), ou à une forme sans texte.

Utiliser l'export

L'export CSS est un bloc :root de propriétés personnalisées, --color-1 pour la couleur couvrant la plus grande part de l'image, et ainsi de suite. Le JSON contient pour chaque couleur son hex, son RGB, son HSL et sa part de l'image, facile à coller dans un fichier de tokens de design ou à passer à un script. Renommez les variables une fois que vous savez quelle couleur est le fond, laquelle est le texte et laquelle est l'accent.

Ce que cet outil ne fait pas

Il ne sait pas quelles couleurs sont celles de votre marque. Une photo de votre produit sur une table en bois inclura la table. Recadrez d'abord sur le produit ou l'emballage si vous ne voulez que ses couleurs. Il ne peut pas non plus vous indiquer les couleurs d'impression exactes : les chiffres correspondent aux pixels du fichier, après votre appareil photo et toute retouche, alors vérifiez-les avec votre charte de marque avant de les publier. Et il n'évalue que le contraste du texte. La WCAG a des règles distinctes pour les icônes et les éléments d'interface, que cette matrice n'évalue pas.

Si vous préférez ne pas le faire à la main

Hermoso, c'est le marketing en pilote automatique : il analyse les publicités qui fonctionnent déjà sur votre marché, crée des publicités image et vidéo fidèles à votre marque, planifie les publications et lance des campagnes payantes sur vos propres comptes publicitaires. Lorsque vous ajoutez votre marque depuis votre site web, il apprend vos produits, votre logo et votre palette, et vous pouvez définir les couleurs des légendes et des cartes de fin avec des codes hex. Il fonctionne dans l'application web, ou au sein de Claude, ChatGPT et Cursor via son serveur MCP.

Outils gratuits: Guide des tailles pour réseaux sociaux · Générateur de grille Instagram · Générateur Open Graph

Questions fréquentes

Comment obtenir une palette de couleurs à partir d'une photo ?

Déposez la photo dans l'outil et choisissez le nombre de couleurs souhaité, de 5 à 8. Il regroupe les pixels similaires et affiche la couleur moyenne de chaque groupe en HEX, RGB et HSL, du plus grand au plus petit, avec un bouton de copie sur chacun.

Quel rapport de contraste me faut-il pour le texte ?

Le niveau AA de la norme WCAG 2.2 exige un ratio d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AAA exige 7:1 et 4,5:1. Le grand texte correspond à au moins 18 points, ou 14 points en gras.

Un ratio de 4,49:1 est-il suffisamment proche pour valider le niveau AA ?

Non. Le W3C indique que le ratio calculé ne doit pas être arrondi lors de la comparaison avec un seuil, donc 4,499:1 n'atteint pas 4,5:1. L'outil se base sur la valeur exacte.

Pourquoi obtiens-je la même palette à chaque fois ?

Le regroupement part d'un point fixe, la couleur la plus fréquente, puis ajoute la couleur la plus éloignée de celles déjà choisies. Il n'y a pas de départ aléatoire, donc une image donne toujours un seul résultat.

Mon image est-elle envoyée en ligne ?

Non. Elle est lue par le lecteur de fichiers de votre navigateur et analysée dans un canvas sur votre appareil. Rien n'est envoyé ni stocké où que ce soit.